Разработайте спецификацию фронтенд-разработки для своей команды

Длина может быть длинной, но я чувствую, что наличие набора спецификаций на самом деле очень важно для команды, поэтому его будет очень удобно поддерживать.Если следующие спецификации будут полезны для вашей команды, я надеюсь, что вы сможете попрактиковаться в команде или Рекомендовано вашему руководителю, ссылка на спецификацию кода взята из:Команда сплава Tencent, я надеюсь, что вы сможете следить за ним, посмотреть его еще раз и взять то, что вам нужно.

Еще я дополнил статьи вдогонку.Всего статей две,и обе статьи собственно боевые.Одна -eslint для разработки спецификаций фронтенд-разработки вашей собственной команды, другойВаши руки касаются рук со стандартной практикой норм фронтенд-разработки, я надеюсь, что вы сможете взглянуть на него, а затем применить этот набор спецификаций на практике, чтобы в вашей собственной разработке было меньше ошибок.

Если возможно, если это полезно и неудобно в процессе практики, пожалуйста, дайте мне обратную связь, чтобы я мог знать, подходит ли этот набор правил для использования большинству людей.

Соглашения об именах

Нейминг проекта

Все в нижнем регистре, разделенные символом подчеркивания. пример:my_project_name

именование каталогов

Ссылаясь на правила именования проекта;

При наличии структур множественного числа используйте номенклатуру множественного числа.

пример:scripts,styles,images,data_models

В проекте Vue имя каталога компонентов в компонентах используйте команду big camel case.

пример:LeftBar

Именование JS-файлов

Обратитесь к правилам именования проектов.

пример:account_model.js

CSS, именование файлов SCSS

Обратитесь к правилам именования проектов.

пример:retina_sprites.css

Именование HTML-файла

Обратитесь к правилам именования проектов.

пример:error_log.html

Спецификация HTML

грамматика:

Отступ с помощью табуляции (2 пробела);
Вложенные узлы должны иметь отступ;
В атрибутах используйте двойные, а не одинарные кавычки;
Все имена атрибутов пишутся строчными буквами и разделяются дефисом (-);
Использовать косую черту в конце автоматической закрытой лаборатории;

<!DOCTYPE html>
<html>
  <head>
    <title>Page title</title>
  </head>
  <body>
    <img src="images/company_logo.png" alt="Company" />

    <!-- 属性名全小写，用中划线（-）做分隔符 -->
    <h1 class="hello-world">Hello, world!</h1>
  </body>
</html>

стандартный режим

Чтобы запустить стандартный режим, укажите doctype в начале с doctype в верхнем регистре.

<!DOCTYPE html>
<html>
  ...
</html>

указать кодировку символов

Позвольте браузеру легко и быстро определить подходящий метод рендеринга для веб-контента, объявив явную кодировку символов, обычно определяемую как «UTF-8».

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
  </head>
  ...
</html>

Режим совместимости с IE

Используйте метатег, чтобы указать, какую версию IE страница должна использовать для отображения.

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
  </head>
  ...
</html>

Уменьшите количество ярлыков

При написании HTML-кода вам нужно максимально избегать избыточных родительских узлов;

<!-- bad -->
<span class="avatar">
  <img src="..." />
</span>

<!-- good -->
<img class="avatar" src="..." />

Семантические теги

HTML-теги могут использовать семантику, попробуйте использовать семантические теги, чтобы страница не содержала тегов div или p.

<!-- bad -->
<div>
  <p></p>
</div>

<!-- good -->
<header></header>
<footer></footer>

Спецификация CSS

отступ

Использовать отступ табуляции (2 пробела)

.element {
  border-radius: 10px;
  width: 50px;
  height: 50px;
}

точка с запятой

Заканчивайте каждое утверждение точкой с запятой

.element {
  border-radius: 10px;
  width: 50px;
  height: 50px;
}

Примечания

Комментарии используются единообразно /* */

.element {
  /* border-radius: 10px; */
  width: 50px;
  height: 50px;
}

кавычки

Используйте кавычки для содержимого URL-адреса
Значения атрибутов в селекторах атрибутов требуют кавычек

.element:after {
  content: "";
  background-image: url("logo.png");
}

li[data-type="single"] {
  ...;
}

имя

Используйте строчные буквы для имен классов, разделенных тире
id назван в верблюжьем регистре
Переменные, функции, примеси и заполнители в scss названы в верблюжьем регистре.

/* class */
.element-content {
  ...;
}

/* id */
#myDialog {
  ...;
}

/* 变量 */
$colorBlack: #000;

/* 混合 */
@mixin centerBlock {
  ...;
}

Спецификация JavaScript

отступ

Использовать отступ табуляции (2 пробела)

if (x < y) {
  x += 10;
} else {
  x += 1;
}

именование переменных

Стандартные переменные названы в верблюжьем регистре
«Android» делает первую букву в именах переменных заглавной.
'iOS' первая строчная буква, две последние буквы в верхнем регистре в имени переменной
Все константы в верхнем регистре, связанные с подчеркиванием
Конструктор, прописные первые буквы
Название объекта jQuery должно начинаться с '$'

var thisIsMyName;

var AndroidVersion;

var iOSVersion;

var MAX_COUNT = 10;

function Person(name) {
  this.name = name;
}

// not good
var body = $("body");

// good
var $body = $("body");

объявление переменной

Все объявления переменных в области действия функции в максимально возможной степени относятся к заголовку функции. Если вы можете использовать let и const, используйте let и const.

function doSomethingWithItems(items) {
  // use one var
  let value = 10,
    result = value + 10,
    i,
    len;

  for (i = 0, len = items.length; i < len; i++) {
    result += 10;
  }
}

длина одной строки

Не превышайте 100, но длину одной строки можно игнорировать, если в редакторе включен перенос слов.

точка с запятой

Унифицировано, чтобы добавить точку с запятой.

Пустой

Пробел не требуется в следующих случаях:

После имени свойства объекта
Скобки перед вызовом функции
Будь то объявление функции или функциональное выражение, не используйте пробел перед '('
Массив после '[' и до ']'
оператор '('после и до')'

Пространства должны быть написаны в следующих ситуациях:

Тернарный оператор ':?' До и после
После запятой должен быть пробел
перед кодовым блоком '{'
Перед следующими ключевыми словами: else, while, catch, наконец
После следующих ключевых слов: if, else, for, while, do, switch, case, try, catch, finally, with, return, typeof
После однострочного комментария '//' (если однострочный комментарий и код находятся в одной строке, он также обязателен перед '//'), после многострочного комментария '*'
перед значением свойства объекта
Для цикла оставьте пробел после точки с запятой, если предварительных условий несколько, оставьте пробел после запятой
Будь то объявление функции или функциональное выражение, перед '{' должен быть пробел.
между параметрами функции

Позже они будут отформатированы с помощью eslint и красивее.

пример:

// not good
var a = {
  b : 1
};

// good
var a = {
  b: 1
};

// not good
++x;
y++;
z = x ? 1:2;

// good
++x;
y++;
z = x ? 1 : 2;

// not good
var a = [ 1, 2 ];

// good
var a = [1, 2];

// good
var doSomething = function(a, b, c) {
  // do something
};

// good
doSomething(item);

// not good
for (let i = 0;i < 6;i++) {
  x++;
}

// good
for (let i = 0; i < 6; i++) {
  x++;
}

пустая строка

Должны быть пустые строки в следующих случаях

После объявления переменной (пустая строка не требуется, если объявление переменной находится в последней строке блока кода)
Перед комментарием (пустая строка не требуется, если комментарий находится в первой строке блока кода)
файл с пустой строкой в конце

var x = 1;

// 注释前要有空行
if (x >= 1) {
  var y = x + 1;
}

новая линия

Там, где есть новая строка, в конце строки должен быть символ ',' или оператор;

Разрывы строк не требуются в следующих случаях:

После следующих ключевых слов: else, catch, наконец
перед кодовым блоком '{'

Разрыв строки необходим в следующих случаях:

Блок кода после '{' и до '}'
после присвоения переменной

// not good
var a = {
    b: 1
    , c: 2
};

x = y
    ? 1 : 2;

// good
var a = {
    b: 1,
    c: 2
};

x = y ? 1 : 2;

// good
if (condition) {
    ...
} else {
    ...
}

try {
    ...
} catch (e) {
    ...
} finally {
    ...
}

// not good
function test()
{
    ...
}

// good
function test() {
    ...
}

// not good
var a, foo = 7, b,
    c, bar = 8;

// good
var a,
    foo = 7,
    b, c, bar = 8;

Примечания

однострочный комментарий

В случае комментария на одной строке после комментария // должен следовать пробел
Если комментарий находится на той же строке, что и код, за ним должен следовать пробел после точки с запятой в коде, а после пробела должен следовать // в комментарии

пример:

// 调用函数
foo();

var maxCount = 10; // 这是一个变量

многострочный комментарий

Многострочные комментарии имеют следующую форму:

/**
 * 代码注释1
 * 代码注释2
 */

Многострочные комментарии рекомендуются в следующих ситуациях:

Трудно понять фрагмент кода
Потенциально ошибочный фрагмент кода
Браузер специальный код взлома
Код с сильной бизнес-логикой

аннотация функции

Для сложных функций и всех классов необходимо выполнять аннотации функций.Аннотации функций используют унифицированные отраслевые спецификации, что удобно для последующего использования jsdoc для формирования документов.

пример:

/**
 * 获取任务的名称
 * @param id {Number} 传入需要获取名称的人物id
 * @return {String} 返回的姓名
 * @author shi 2015/07/21 可以不写
 * @version 1.1.0 可以不写
 * @example 示例代码，可以不写
 */
function getTaskName(id) {
  let name = "test";
  return name;
}

кавычки

Одинарные кавычки используются для самого внешнего слоя, если строки не являются вложенными.

// not good
var x = "test";

// good
var y = 'foo',
  z = '<div id="test"></div>';

объект, массив

Имя атрибута объекта не нужно заключать в кавычки. Например, если имя атрибута объекта названо с символом подчеркивания, оно должно быть заключено в кавычки (правила eslint).
Объекты записываются в форме с отступом, а не в одной строке (одно свойство может быть записано в одной строке, и одна строка может использоваться при импорте методов es6);
Массивы и объекты не имеют запятой в конце.

// good
var a = {
  b: 1,
  c: 2
};

кронштейны

Следующие ключевые слова должны сопровождаться фигурными скобками (даже если содержимое блока кода состоит только из одной строки):if, else, for, while, do, switch, try, catch, finally, with.

// not good
if (condition) doSomething();

// good
if (condition) {
  doSomething();
}

undefined

Никогда не используйте undefined напрямую для оценки переменных;

Используйте typeof и строку undefined для оценки переменных.

// not good
if (person === undefined) {
    ...
}

// good
if (typeof person === 'undefined') {
    ...
}

Условные суждения и циклы с несколькими уровнями вложенности не допускаются (до трех уровней).

Если условное суждение можно решить с помощью тернарных операторов и логических операторов, не используйте условное суждение, аНе забывайте писать слишком длинные тернарные операторы.

пример:

// bad
if (x === 10) {
  return 'valid';
} else {
  return 'invalid';
}

// good
return x === 10 ? 'valid' : 'invalid';

// bad
if (!x) {
  if (!y) {
    x = 1;
  } else {
    x = y;
  }
}

// good
x = x || y || 1;

Кратко объясните логические операторы, есть два основных логических оператора, один из них||логично или&&логическое И.

Логическое ИЛИ ||: возвращает предыдущее значение, если предыдущее истинно, и возвращает следующее значение, если предыдущее ложно.

var x = 1;
console.log(x || 2); // 1

var y = 0;
console.log(y || 2); // 2

Логическое И &&: возвращает следующее значение, если предыдущее истинно, и возвращает предыдущее значение, если предыдущее ложно.

var x = 1;
console.log(x && 2); // 2

var y = 0;
console.log(y && 2); // 0

Другое

Должно быть суждение hasOwnProperty в for-in;
Не добавляйте методы на прототип встроенных объектов, таких как Array, Date;
Не используйте после первой декларации переменной;
Не используйте конструктор просто в коде, не забудьте присвоить его переменной;
Не объявляйте переменные с одинаковыми именами в одной и той же области видимости;
Не ставьте скобки в ненужных местах, например: delete(a.b);
Не используйте необъявленные переменные;
Отладчик не должен отображаться в отправленном коде;
В массиве не должно быть пустых элементов;
Не объявляйте функции внутри циклов;
Не используйте новые конструкторы напрямую (кроме new Vue() );
Не объявляйте переменные, но и не используйте их;

К ним можно отнестиeslint-config-alloy, есть подробные спецификации для JS, TS, React и Vue. Когда мы позже настроим eslint, мы также представим спецификации eslint от Tencent.

// good
for (key in obj) {
  if (obj.hasOwnProperty(key)) {
    // be sure that obj[key] belongs to the object and was not inherited
    console.log(obj[key]);
  }
}

// not good
Array.prototype.count = function(value) {
  return 4;
};

// not good
function test() {
  console.log(x);

  var x = 1;
}

// not good
new Person();

// good
var person = new Person();

// not good
delete (obj.attr);

// good
delete obj.attr;

// not good
var a = [1, , , 2, 3];

// not good
var nums = [];

// not good
for (var i = 0; i < 10; i++) {
  (function(i) {
    nums[i] = function(j) {
      return i + j;
    };
  })(i);
}

разное

Символ новой строки повсеместно используется «LF»;
Ссылка на контекст ThIS может быть названа только с использованием одного из '_this', 'That', 'Self';
Не иметь пробельных символов в конце строки;
Пустые блоки кода не допускаются (вы можете писать комментарии в блоках кода, если вам это действительно нужно).

// not good
function Person() {
  // not good
  var me = this;

  // good
  var _this = this;

  // good
  var that = this;

  // good
  var self = this;
}

if (condition) {
}

Я использовал vuepress, чтобы создать веб-сайт для этого набора спецификаций, и вы можете просмотреть их.www.shiyanping.top/code_rule, в основном полагаюсь на страницу github для развертывания и приглашаю всех присоединиться к моему проекту gitGitHub.com/shiyanping/….

Ссылки по теме

eslint для разработки спецификаций фронтенд-разработки вашей собственной команды
Рука об руку с вами, чтобы попрактиковаться в стандартных спецификациях фронтенд-разработки

Прочтите две последние главы

Большое спасибо, что нашли время, чтобы прочитать его, и искренне надеемся, что вы можете потратить небольшое количество времени, чтобы помочь сделать две вещи:

Пошевелите пальцами и поставьте мне большой палец вверх. Ваш большой палец вверх — самая большая мотивация для меня.
Надеюсь, вы обратите внимание на мою официальную учетную запись. Новые статьи будут размещены на официальной учетной записи как можно скорее. Официальная учетная запись в основном отправляет некоторые личные эссе, заметки для чтения, а также некоторые технические горячие точки и горячие точки в реальном времени, и есть и очень привлекательные за свой счет.Розыгрыши!