Спецификация кода большой фронтенд-команды

1. Введение

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

Некоторые правила относятся к TencentalloyteamСпецификация кода для команды, если есть ошибки, укажите на них, будем очень благодарны.

Придерживайтесь хороших рекомендаций по стилю кода, начиная с вас и меня.

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

1) Название проекта

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

пример:my_project_name

2) Именование каталогов

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

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

пример:pages, assets, directives, components, mixins, utils

3)`javaScript`именование файлов

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

пример:account_model.js

4)`CSS`,`less`именование файлов

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

пример:retina_sprites.less

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

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

пример:error_report.html

6) При использовании`Vue`или`React`стек технологий, компоненты`Component`имя

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

пример:CalendarList.vue

3 HTML

1) Синтаксис

Для удержания Ind используется Soft Tab (4 пробела);
Вложенные узлы должны иметь отступ;
В атрибутах используйте двойные, а не одинарные кавычки;
Имя атрибута пишется строчными буквами с тире в качестве разделителя;
Не используйте косую черту в конце самозакрывающихся тегов (Спецификация HTML5указать, что они необязательны);
Не игнорируйте необязательные закрывающие теги;

<!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>

2) HTML5 doctype

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

Хотя типы документов не чувствительны к регистру, по соглашению они пишутся с заглавной буквы (Об атрибутах html, верхнем или нижнем регистре).

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

3) атрибут языка

Согласно спецификации HTML5:

Атрибут lang должен быть добавлен в тег html. В этом помогут речевые средства и средства перевода, подсказывающие, как их произносить и переводить.

больше оlangОписание недвижимостиэто здесь;

можно найти на sitepointСписок языков;

Но SitePoint дает только широкие категории языка, такие как китайский, только дает Жа, но не различает Гонконг, Тайвань и материковую Китай. Microsoft дает большеПодробный список языков, который подразделяет ж-сп, ж-хк, ж-тв.

<!DOCTYPE html>
<html lang="en-us">
    ...
</html>

4) Кодировка символов

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

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

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

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

Если вы хотите узнать больше, пожалуйста, нажмитездесь;

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

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

6) Импорт CSS, JS

Согласно спецификации HTML5 обычно не требуется указывать при импорте CSS и JStype,потому чтоtext/cssа такжеtext/javascriptсоответственно являются их значениями по умолчанию.

Каноническая ссылка HTML5

использовать ссылку
Использовать стиль
Использовать скрипт

<!-- External CSS -->
<link rel="stylesheet" href="code_guide.css">

<!-- In-document CSS -->
<style>
    ...
</style>

<!-- External JS -->
<script src="code_guide.js"></script>

<!-- In-document JS -->
<script>
    ...
</script>

7) Порядок атрибутов

Атрибуты должны отображаться в определенном порядке, чтобы обеспечить удобочитаемость;

class
id
name
data-*
src, for, type, href, value , max-length, max, min, pattern
placeholder, title, alt
aria-*, role
required, readonly, disabled

classОн рассчитан на многоразовые компоненты, поэтому должен быть на первом месте;

idКонкретный и его следует использовать с осторожностью, поэтому ставьте его на второе место.

<a class="..." id="..." data-modal="toggle" href="#">Example link</a>

<input class="form-control" type="text">

<img src="..." alt="...">

8) логическое свойство

Логический атрибут относится к атрибуту, которому не нужно объявлять значение.XHTML требует, чтобы каждый атрибут объявлял значение, но HTML5 в этом не нуждается;

Для получения дополнительной информации см.WhatWG section on boolean attributes:

Наличие логического атрибута указывает на то, что значение истинно, а отсутствие атрибута указывает на то, что значение ложно.

<input type="text" disabled>

<input type="checkbox" value="1" checked>

<select>
    <option value="1" selected>1</option>
</select>

9) JS генерирует теги

Генерация тегов в файлах JS усложняет поиск и редактирование контента и снижает его производительность. Этого следует избегать, насколько это возможно.

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

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

Во многих случаях необходимо сделать так, чтобы HTML стал меньше и итеративной реконструкции.

<!-- 不建议这么做 -->
<span class="avatar">
    <img src="...">
</span>

<!-- 建议这么做 -->
<img class="avatar" src="...">

11) практично выше, чем идеально

Максимально соблюдайте стандарты и семантику HTML, но не в ущерб полезности;

Всегда решайте задачи с минимальной сложностью и минимальным количеством ярлыков.

4 css, меньше

1) Отступ

Использовать программную вкладку (4 пробела)

.element {
    position: absolute;
    top: 10px;
    left: 10px;

    border-radius: 10px;
    width: 50px;
    height: 50px;
}

2) запястья

Каждое свойство должно быть объявлено в конце точки с запятой.

.element {
    width: 20px;
    height: 20px;

    background-color: red;
}

3) Космос

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

после имени атрибута
Разделитель ',' перед несколькими правилами
!important'!'назад
Значение атрибута после '(' и до ')'
Не иметь лишних пробелов в конце строки

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

перед значением атрибута
До и после селекторов '>', '+', '~'
'{'вперед
!important'!'вперед
@elseдо и после
Значение атрибута ','
комментарий '/«После и»/'вперед

/* not good */
.element {
    color :red! important;
    background-color: rgba(0,0,0,.5);
}

/* good */
.element {
    color: red !important;
    background-color: rgba(0, 0, 0, .5);
}

/* not good */
.element ,
.dialog{
    ...
}

/* good */
.element,
.dialog {

}

/* not good */
.element>.dialog{
    ...
}

/* good */
.element > .dialog{
    ...
}

/* not good */
.element{
    ...
}

/* good */
.element {
    ...
}

/* not good */
@debug: true;

header {
  background-color: (yellow)when(@debug = true);
}


/* good */
header {
  background-color: (yellow) when (@debug = true);
}

4) Пустая строка

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

файл с пустой строкой в конце
'}' желательно с пустой строкой, включая правила, вложенные в scss
Между атрибутами требуются соответствующие пустые строки, см.порядок декларирования имущества

/* not good */
.element {
    ...
}
.dialog {
    color: red;
    &:after {
        ...
    }
}

/* good */
.element {
    ...
}

.dialog {
    color: red;

    &:after {
        ...
    }
}

5) Примечания

Для комментариев используйте '/* */' (не используйте '//' в scss), подробности см. в тексте справа;

Отступ соответствует следующей строке кода;

Может стоять в конце строки кода, отделяясь от кода пробелом.

/* Modal header */
.modal-header {
    ...
}

/*
 * Modal header
 */
.modal-header {
    ...
}

.modal-header {
    /* 50px */
    width: 50px;

    color: red; /* color red */
}

6) Цитаты

Используйте двойные кавычки для самого внешнего слоя;

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

Значения атрибутов в селекторах атрибутов требуют кавычек.

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

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

7)`命名`

использование имени класса小写字母,к中划线отдельный
ID принимает驼峰式имя
lessПеременные и функции в中划线отдельное наименование

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

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

/* 变量 */
@color-black: #000;

/* mixins */
.my-mixin() {
  color: black;
}

8)`属性声明顺序`

Объявления связанных свойств сгруппированы в порядке справа, с пустой строкой между группами.

.declaration-order {
    display: block;
    float: right;

    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 100;

    border: 1px solid #e5e5e5;
    border-radius: 3px;
    width: 100px;
    height: 100px;

    font: normal 13px "Helvetica Neue", sans-serif;
    line-height: 1.5;
    text-align: center;

    color: #333;
    background-color: #f5f5f5;

    opacity: 1;
}

书写顺序前后для:

(1)定位属性: позиционное отображение плавающее левое верхнее правое нижнее переполнение очистить z-индекс

(2)自身属性: ширина, высота, отступ, граница, поле, фон

(3)文字样式:font-family размер шрифта стиль шрифта вес шрифта вариант цвета шрифта

(4)文本属性text-align vertical-align text-wrap text-transform text-indent text-decoration letter-spacing word-spacing white-space text-overflow

Цель: Уменьшите перекомпоновку браузера (reflow) и улучшите производительность рендеринга в браузере.

原理：浏览器的渲染流程为：

1. Разобрать html для построения дерева dom, разобрать css для построения дерева css: разобрать html в древовидную структуру данных и разобрать css в древовидную структуру данных

2. Постройте дерево рендеринга: дерево рендеринга, сформированное путем слияния дерева DOM и дерева CSS.

3. Макет дерева рендеринга: с деревом рендеринга браузер уже знает, какие узлы находятся на этих веб-страницах, определения CSS каждого узла и их принадлежность, чтобы вычислить положение каждого узла на экране.

4. Нарисуйте дерево рендеринга: По рассчитанным правилам отрисуйте содержимое на экране через видеокарту.

Разрешение стиля CSS на дисплей на экране браузера, возникает на 234 шага, см. В браузере не является стилем CSS, чтобы немедленно начать анализ, но в соответствии с порядком написания стиля CSS, он будет распределен в распределении структуры дерева DOM Стиль рендеринга, завершите шаг 2, затем начните стиль CSS каждого узела дерева для анализа, а порядок обхода стиля CSS в это время полностью написан в предыдущем письме. Во время процесса анализа, как только браузер найдет изменение позиционирования элемента, необходимо передать.

Правильный порядок написания:

.demo{
    width: 100px;
	height: 100px;
	background-color: red ;
    
	position: absolute;
}

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

// 下面是推荐的属性的顺序
[
    [
        "display",
        "visibility",
        "float",
        "clear",
        "overflow",
        "overflow-x",
        "overflow-y",
        "clip",
        "zoom"
    ],
    [
        "table-layout",
        "empty-cells",
        "caption-side",
        "border-spacing",
        "border-collapse",
        "list-style",
        "list-style-position",
        "list-style-type",
        "list-style-image"
    ],
    [
        "-webkit-box-orient",
        "-webkit-box-direction",
        "-webkit-box-decoration-break",
        "-webkit-box-pack",
        "-webkit-box-align",
        "-webkit-box-flex"
    ],
    [
        "position",
        "top",
        "right",
        "bottom",
        "left",
        "z-index"
    ],
    [
        "margin",
        "margin-top",
        "margin-right",
        "margin-bottom",
        "margin-left",
        "-webkit-box-sizing",
        "-moz-box-sizing",
        "box-sizing",
        "border",
        "border-width",
        "border-style",
        "border-color",
        "border-top",
        "border-top-width",
        "border-top-style",
        "border-top-color",
        "border-right",
        "border-right-width",
        "border-right-style",
        "border-right-color",
        "border-bottom",
        "border-bottom-width",
        "border-bottom-style",
        "border-bottom-color",
        "border-left",
        "border-left-width",
        "border-left-style",
        "border-left-color",
        "-webkit-border-radius",
        "-moz-border-radius",
        "border-radius",
        "-webkit-border-top-left-radius",
        "-moz-border-radius-topleft",
        "border-top-left-radius",
        "-webkit-border-top-right-radius",
        "-moz-border-radius-topright",
        "border-top-right-radius",
        "-webkit-border-bottom-right-radius",
        "-moz-border-radius-bottomright",
        "border-bottom-right-radius",
        "-webkit-border-bottom-left-radius",
        "-moz-border-radius-bottomleft",
        "border-bottom-left-radius",
        "-webkit-border-image",
        "-moz-border-image",
        "-o-border-image",
        "border-image",
        "-webkit-border-image-source",
        "-moz-border-image-source",
        "-o-border-image-source",
        "border-image-source",
        "-webkit-border-image-slice",
        "-moz-border-image-slice",
        "-o-border-image-slice",
        "border-image-slice",
        "-webkit-border-image-width",
        "-moz-border-image-width",
        "-o-border-image-width",
        "border-image-width",
        "-webkit-border-image-outset",
        "-moz-border-image-outset",
        "-o-border-image-outset",
        "border-image-outset",
        "-webkit-border-image-repeat",
        "-moz-border-image-repeat",
        "-o-border-image-repeat",
        "border-image-repeat",
        "padding",
        "padding-top",
        "padding-right",
        "padding-bottom",
        "padding-left",
        "width",
        "min-width",
        "max-width",
        "height",
        "min-height",
        "max-height"
    ],
    [
        "font",
        "font-family",
        "font-size",
        "font-weight",
        "font-style",
        "font-variant",
        "font-size-adjust",
        "font-stretch",
        "font-effect",
        "font-emphasize",
        "font-emphasize-position",
        "font-emphasize-style",
        "font-smooth",
        "line-height",
        "text-align",
        "-webkit-text-align-last",
        "-moz-text-align-last",
        "-ms-text-align-last",
        "text-align-last",
        "vertical-align",
        "white-space",
        "text-decoration",
        "text-emphasis",
        "text-emphasis-color",
        "text-emphasis-style",
        "text-emphasis-position",
        "text-indent",
        "-ms-text-justify",
        "text-justify",
        "letter-spacing",
        "word-spacing",
        "-ms-writing-mode",
        "text-outline",
        "text-transform",
        "text-wrap",
        "-ms-text-overflow",
        "text-overflow",
        "text-overflow-ellipsis",
        "text-overflow-mode",
        "-ms-word-wrap",
        "word-wrap",
        "-ms-word-break",
        "word-break"
    ],
    [
        "color",
        "background",
        "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader",
        "background-color",
        "background-image",
        "background-repeat",
        "background-attachment",
        "background-position",
        "-ms-background-position-x",
        "background-position-x",
        "-ms-background-position-y",
        "background-position-y",
        "-webkit-background-clip",
        "-moz-background-clip",
        "background-clip",
        "background-origin",
        "-webkit-background-size",
        "-moz-background-size",
        "-o-background-size",
        "background-size"
    ],
    [
        "outline",
        "outline-width",
        "outline-style",
        "outline-color",
        "outline-offset",
        "opacity",
        "filter:progid:DXImageTransform.Microsoft.Alpha(Opacity",
        "-ms-filter:\\'progid:DXImageTransform.Microsoft.Alpha",
        "-ms-interpolation-mode",
        "-webkit-box-shadow",
        "-moz-box-shadow",
        "box-shadow",
        "filter:progid:DXImageTransform.Microsoft.gradient",
        "-ms-filter:\\'progid:DXImageTransform.Microsoft.gradient",
        "text-shadow"
    ],
    [
        "-webkit-transition",
        "-moz-transition",
        "-ms-transition",
        "-o-transition",
        "transition",
        "-webkit-transition-delay",
        "-moz-transition-delay",
        "-ms-transition-delay",
        "-o-transition-delay",
        "transition-delay",
        "-webkit-transition-timing-function",
        "-moz-transition-timing-function",
        "-ms-transition-timing-function",
        "-o-transition-timing-function",
        "transition-timing-function",
        "-webkit-transition-duration",
        "-moz-transition-duration",
        "-ms-transition-duration",
        "-o-transition-duration",
        "transition-duration",
        "-webkit-transition-property",
        "-moz-transition-property",
        "-ms-transition-property",
        "-o-transition-property",
        "transition-property",
        "-webkit-transform",
        "-moz-transform",
        "-ms-transform",
        "-o-transform",
        "transform",
        "-webkit-transform-origin",
        "-moz-transform-origin",
        "-ms-transform-origin",
        "-o-transform-origin",
        "transform-origin",
        "-webkit-animation",
        "-moz-animation",
        "-ms-animation",
        "-o-animation",
        "animation",
        "-webkit-animation-name",
        "-moz-animation-name",
        "-ms-animation-name",
        "-o-animation-name",
        "animation-name",
        "-webkit-animation-duration",
        "-moz-animation-duration",
        "-ms-animation-duration",
        "-o-animation-duration",
        "animation-duration",
        "-webkit-animation-play-state",
        "-moz-animation-play-state",
        "-ms-animation-play-state",
        "-o-animation-play-state",
        "animation-play-state",
        "-webkit-animation-timing-function",
        "-moz-animation-timing-function",
        "-ms-animation-timing-function",
        "-o-animation-timing-function",
        "animation-timing-function",
        "-webkit-animation-delay",
        "-moz-animation-delay",
        "-ms-animation-delay",
        "-o-animation-delay",
        "animation-delay",
        "-webkit-animation-iteration-count",
        "-moz-animation-iteration-count",
        "-ms-animation-iteration-count",
        "-o-animation-iteration-count",
        "animation-iteration-count",
        "-webkit-animation-direction",
        "-moz-animation-direction",
        "-ms-animation-direction",
        "-o-animation-direction",
        "animation-direction"
    ],
    [
        "content",
        "quotes",
        "counter-reset",
        "counter-increment",
        "resize",
        "cursor",
        "-webkit-user-select",
        "-moz-user-select",
        "-ms-user-select",
        "user-select",
        "nav-index",
        "nav-up",
        "nav-right",
        "nav-down",
        "nav-left",
        "-moz-tab-size",
        "-o-tab-size",
        "tab-size",
        "-webkit-hyphens",
        "-moz-hyphens",
        "hyphens",
        "pointer-events"
    ]
]

9) Цвет

Цвет шестнадцатеричный со строчными буквами;

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

/* not good */
.element {
    color: #ABCDEF;
    background-color: #001122;
}

/* good */
.element {
    color: #abcdef;
    background-color: #012;
}

10) Сокращение атрибутов

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

marginа такжеpaddingВместо этого необходимо использовать стенографию;

Общие сокращения свойств включают:

font
background
transition
animation

/* not good */
.element {
    transition: opacity 1s linear 2s;
}

/* good */
.element {
    transition-delay: 2s;
    transition-timing-function: linear;
    transition-duration: 1s;
    transition-property: opacity;
}

11)`媒体查询`

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

.element {
    ...
}

.element-avatar{
    ...
}

@media (min-width: 480px) {
    .element {
        ...
    }

    .element-avatar {
        ...
    }
}

12)`Less相关`

У каждого модуля должен быть отдельный less, а затем каждый самый внешний родительский класс className должен быть написан первым, а все дочерние стили Node должны быть написаны в нем, чтобы избежать конфликтов имен. Например

//out: false
.parent-name{
    
    .child-name{
        ...
    }
    
    ...
}

@importКонец файла не требует введения «.less»

LESS嵌套最多不能超过5层;

Пустые правила не допускаются;

Селекторы элементов используют строчные буквы;

убрать 0 перед запятой;

Удалите ненужные десятичные точки и конечные 0 из чисел;

Не добавляйте единицу после значения атрибута '0';

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

Стандартные атрибуты без префикса следует записывать после атрибутов с префиксом;

Не используйте повторяющиеся атрибуты в одном и том же правиле, не имеет значения, являются ли повторяющиеся атрибуты последовательными;

Не иметь двух одинаковых правил в одном файле;

использоватьborder: 0;заменятьborder: none;;

CSS选择器不要超过3层;

использовать как можно меньше'*'Селектор.

/* not good */
.element {
}

/* not good */
LI {
    ...
}

/* good */
li {
    ...
}

/* not good */
.element {
    color: rgba(0, 0, 0, 0.5);
}

/* good */
.element {
    color: rgba(0, 0, 0, .5);
}

/* not good */
.element {
    width: 50.0px;
}

/* good */
.element {
    width: 50px;
}

/* not good */
.element {
    width: 0px;
}

/* good */
.element {
    width: 0;
}

/* not good */
.element {
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;

    background: linear-gradient(to bottom, #fff 0, #eee 100%);
    background: -webkit-linear-gradient(top, #fff 0, #eee 100%);
    background: -moz-linear-gradient(top, #fff 0, #eee 100%);
}

/* good */
.element {
    -webkit-border-radius: 3px;
       -moz-border-radius: 3px;
            border-radius: 3px;

    background: -webkit-linear-gradient(top, #fff 0, #eee 100%);
    background:    -moz-linear-gradient(top, #fff 0, #eee 100%);
    background:         linear-gradient(to bottom, #fff 0, #eee 100%);
}

/* not good */
.element {
    color: rgb(0, 0, 0);
    width: 50px;
    color: rgba(0, 0, 0, .5);
}

/* good */
.element {
    color: rgb(0, 0, 0);
    color: rgba(0, 0, 0, .5);
}

5 JavaScript

1) Отступ

Используйте мягкую вкладку (4 пробела).

var x = 1,
    y = 1;

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

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

Точка с запятой требуется после следующих ситуаций:

объявление переменной
выражение
return
throw
break
continue
do-while

/* var declaration */
var x = 1;

/* expression statement */
x++;

/* do-while */
do {
    x++;
} while (x < 10);

3) Космос

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

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

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

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

// 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];

// not good
var a = ( 1+2 )*3;

// good
var a = (1 + 2) * 3;

// no space before '(', one space before '{', one space between function parameters
var doSomething = function(a, b, c) {
    // do something
};

// no space before '('
doSomething(item);

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

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

4) Пустая строка

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

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

// need blank line after variable declaration
var x = 1;

// not need blank line when variable declaration is last expression in the current block
if (x >= 1) {
    var y = x + 1;
}

var a = 2;

// need blank line before line comment
a++;

function b() {
    // not need blank line when comment is first line of block
    return a;
}

// need blank line after blocks
for (var i = 0; i < 2; i++) {
    if (true) {
        return false;
    }

    continue;
}

var obj = {
    foo: function() {
        return 1;
    },

    bar: function() {
        return 2;
    }
};

// not need blank line when in argument list, array, object
func(
    2,
    function() {
        a++;
    },
    3
);

var foo = [
    2,
    function() {
        a++;
    },
    3
];

var foo = {
    a: 2,
    b: function() {
        a++;
    },
    c: 3
};

5) разрыв строки

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

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

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

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

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

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

x = y
    ? 1 : 2;

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

x = y ? 1 : 2;
x = y ?
    1 : 2;

// no need line break with 'else', 'catch', 'finally'
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;

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

После двойной косой черты должен следовать пробел;

Отступ соответствует следующей строке кода;

Может стоять в конце строки кода, отделяясь от кода пробелом.

if (condition) {
    // if you made it here, then all security checks passed
    allowed();
}

var zhangsan = 'zhangsan'; // one space after code

7) Многострочные комментарии

Не менее трех строк, '*' с последующим пробелом, пожалуйста, обратитесь к способу написания справа;

Рекомендуется в следующих ситуациях:

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

/*
 * one space after '*'
 */
var x = 1;

8)`文档注释`

Пожалуйста, обратитесь к различным тегам @param, @method и т. д.usejsdocа такжеJSDoc Guide;

Рекомендуется в следующих ситуациях:

все константы
все функции
Все классы

/**
 * @func
 * @desc 一个带参数的函数
 * @param {string} a - 参数a
 * @param {number} b=1 - 参数b默认值为1
 * @param {string} c=1 - 参数c有两种支持的取值</br>1—表示x</br>2—表示xx
 * @param {object} d - 参数d为一个对象
 * @param {string} d.e - 参数d的e属性
 * @param {string} d.f - 参数d的f属性
 * @param {object[]} g - 参数g为一个对象数组
 * @param {string} g.h - 参数g数组中一项的h属性
 * @param {string} g.i - 参数g数组中一项的i属性
 * @param {string} [j] - 参数j是一个可选参数
 */
function foo(a, b, c, d, g, j) {
    ...
}

9) Цитаты

Используйте одинарные кавычки для самого внешнего слоя.

// not good
var x = "test";

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

10) Именование переменных

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

var thisIsMyName;

var goodID;

var reportURL;

var AndroidVersion;

var iOSVersion;

var MAX_COUNT = 10;

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

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

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

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

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

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

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

12) Функция

Будь то объявление функции или функциональное выражение, перед '(' не должно быть пробела, но перед '{';

Перед скобками вызова функции пробел не требуется;

Слой круглых скобок должен быть заключен вне непосредственно выполняемой функции;

Не называйте встроенную функцию;

Параметры разделяются ', ', обратите внимание, что после запятой есть пробел.

// no space before '(', but one space before'{'
var doSomething = function(item) {
    // do something
};

function doSomething(item) {
    // do something
}

// not good
doSomething (item);

// good
doSomething(item);

// requires parentheses around immediately invoked function expressions
(function() {
    return 1;
})();

// not good
[1, 2].forEach(function x() {
    ...
});

// good
[1, 2].forEach(function() {
    ...
});

// not good
var a = [1, 2, function a() {
    ...
}];

// good
var a = [1, 2, function() {
    ...
}];

// use ', ' between function parameters
var doSomething = function(a, b, c) {
    // do something
};

13) Массивы, объекты

Имена свойств объекта не нуждаются в кавычках;

Объекты пишутся с отступом, а не в одну строку;

Массивы и объекты не имеют запятой в конце.

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

var a = {b: 1};

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

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

14) Скобки

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

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

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

15)null

Применимая сцена:

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

Неприменимые сценарии:

Не используйте значение null, чтобы определить, вызывается ли функция с параметрами или без них.
Не сравнивайте с неинициализированными переменными

// not good
function test(a, b) {
    if (b `= null) {
        // not mean b is not supply
        ...
    }
}

var a;

if (a `= null) {
    ...
}

// good
var a = null;

if (a `= null) {
    ...
}

16)undefined

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

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

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

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

17)jshint

использовать'=', '!' вместо '`', '!=';

Должно быть суждение hasOwnProperty в for-in;

Не добавляйте методы на прототип встроенных объектов, таких как Array, Date;

Не объявлять переменную в коде внутренней области видимости, а затем обращаться к одноименной переменной во внешней области видимости;

Не следует сначала использовать переменные, а затем объявлять их;

Не используйте конструктор просто в коде, не забудьте присвоить его переменной;

Не объявляйте переменные с одинаковыми именами в одной и той же области видимости;

Не ставьте скобки в ненужных местах, например: delete(a.b);

Не используйте необъявленные переменные (глобальные переменные необходимо добавить в атрибут globals файла .jshintrc);

Не объявляйте переменные, но и не используйте их;

Не назначайте задания, где следует проводить сравнения;

Отладчик не должен отображаться в отправленном коде;

В массиве не должно быть пустых элементов;

Не объявляйте функции внутри циклов;

new function () { ... }, new Object

// not good
if (a ` 1) {
    a++;
}

// good
if (a `= 1) {
    a++;
}

// 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
var x = 1;

function test() {
    if (true) {
        var x = 0;
    }

    x += 1;
}

// 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
if (a = 10) {
    a++;
}

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

// not good
var nums = [];

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

// not good
var singleton = new function() {
    var privateVar;

    this.publicMethod = function() {
        privateVar = 1;
    };

    this.publicMethod2 = function() {
        privateVar = 2;
    };
};

В примечании не должно быть указано пропадание и отсутствие переключателя по умолчанию;

Пустые блоки кода не допускаются.

// not good
var a   = 1;

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

    // good
    var _this = this;

    // good
    var that = this;

    // good
    var self = this;
}

// good
switch (condition) {
    case 1:
    case 2:
        ...
        break;
    case 3:
        ...
    // why fall through
    case 4
        ...
        break;
    // why no default
}

// not good with empty block
if (condition) {

}

Рекомендация плагина:EditorConfig for VS Code 生成.editorconfig文件

root = true

[*]
indent_style = space
indent_size = 4
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

[*.md]
trim_trailing_whitespace = false

Продолжение следует

1. Введение

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

1) Название проекта

2) Именование каталогов

3)javaScriptименование файлов

4)CSS,lessименование файлов

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

6) При использованииVueилиReactстек технологий, компонентыComponentимя

3 HTML

1) Синтаксис

2) HTML5 doctype

3) атрибут языка

4) Кодировка символов

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

6) Импорт CSS, JS

7) Порядок атрибутов

8) логическое свойство

9) JS генерирует теги

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

11) практично выше, чем идеально

4 css, меньше

1) Отступ

2) запястья

3) Космос

4) Пустая строка

5) Примечания

6) Цитаты

7)命名

8)属性声明顺序

9) Цвет

10) Сокращение атрибутов

11)媒体查询

12)Less相关

5 JavaScript

1) Отступ

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

3) Космос

4) Пустая строка

5) разрыв строки

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

7) Многострочные комментарии

8)文档注释

9) Цитаты

10) Именование переменных

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

12) Функция

13) Массивы, объекты

14) Скобки

15)null

16)undefined

17)jshint

3)`javaScript`именование файлов

4)`CSS`,`less`именование файлов

6) При использовании`Vue`или`React`стек технологий, компоненты`Component`имя

7)`命名`

8)`属性声明顺序`

11)`媒体查询`

12)`Less相关`

8)`文档注释`