Спецификация внешнего кодирования

внешний интерфейс JavaScript HTML CSS
Спецификация внешнего кодирования

содержание

Naming Project

HTML

CSS

JavaScript

Золотое правило

Всегда следуйте одному и тому же набору соглашений о кодировании — либо перечисленных здесь, либо ваших собственных. Если вы обнаружите какие-либо ошибки в этой спецификации, пожалуйста, исправьте их. пройти черезopen an issueДобавьте или внесите свой вклад в эту спецификацию.

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

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

Названия элементов пишутся строчными буквами и разделяются тире. Например: имя-моего-проекта

имя каталога

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

Именование файла JavaScript

Все имена файлов js, состоящие из нескольких слов, соединяются символами подчеркивания, например: Файл модели учетной записи account-model.js

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

При составлении из нескольких слов используйте метод соединения с подчеркиванием, например: retina-sprites.scss

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

Если текст состоит из нескольких слов, используйте метод соединения с подчеркиванием, например: error-report.html.

HTML

грамматика

  • Используйте программные табуляции с четырьмя пробелами — это единственный способ гарантировать, что код будет отображаться последовательно в разных средах.
  • Вложенные узлы должны иметь отступ (четыре пробела).
  • В атрибутах используйте двойные, а не одинарные кавычки.
  • Не используйте косую черту в конце самозакрывающихся тегов.Спецификация HTML5Укажите, что они необязательны.
  • Не игнорируйте необязательные закрывающие теги (например,</li>а также</body>).
<!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>

HTML5 doctype

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

Хотя типы документов не чувствительны к регистру, по соглашению они пишутся с заглавной буквы.Статья об атрибутах html, в верхнем или нижнем регистре 
<!DOCTYPE html>
<html>
    <head>
    </head>
</html>

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

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

Настоятельно рекомендуется указать атрибут lang в корневом элементе html, чтобы установить правильный язык для документа. Это поможет инструменту синтеза речи определить, какое произношение следует использовать, инструменту перевода — определить правила, которым он должен следовать при переводе, и так далее.

больше оlangЗнания о свойствах можно получить изэта спецификация.

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

Выше приведены только основные категории языковых кодов.Например, китайский дает только ZH, но не различает Гонконг, Тайвань и материковый Китай. И Microsoft дала разбивку zh-cn, zh-hk, zh-tw, Head to Microsoft дляdetail list of language codes.

Знай пост:Должна ли декларация в заголовке веб-страницы использовать lang="zh" или lang="zh-cn"?

Однако, учитывая совместимость, все веб-страницы, на которых необходимо указывать китайский язык, используются одинаково.zh-CN 
<html lang="en-us">
    <!-- ... -->
</html>

IE compatibility mode

IE поддерживает определенные<meta>тег для определения версии IE, которая должна использоваться для отрисовки текущей страницы. Если нет особой необходимости, лучше установитьedge mode, который указывает IE использовать последний поддерживаемый режим.

Прочтите эту статью о переполнении стекаМожно получить больше полезной информации.

Разные режимы рендеринга для разных типов документов в разных браузерах, странный режимподытожил хорошо. 
<meta http-equiv="X-UA-Compatible" content="IE=Edge">

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

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

<head>
    <meta charset="UTF-8">
</head>

Импорт CSS и JavaScript

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

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

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

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

<!-- JavaScript -->
<script src="code-guide.js"></script>

Практичность превыше совершенства

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

порядок собственности

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

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

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

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

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

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

Логическое свойство

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

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

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

если тыдолжендобавить в собственностьне требуетсяЗначение указано в рекомендациях WhatWG:

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

Короче говоря, не добавляйте значения в логические свойства. 
<input type="text" disabled>

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

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

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

При написании HTML-кода необходимо максимально избегать избыточных родительских узлов. Много раз требуется повторение и рефакторинг, чтобы сделать меньше HTML. См. пример ниже:

<!-- Not so great -->
<span class="avatar">
    <img src="...">
</span>

<!-- Better -->
<img class="avatar" src="...">

Теги, сгенерированные JavaScript

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

CSS

грамматика

  • Используйте программные табуляции с четырьмя пробелами — это единственный способ гарантировать, что код будет отображаться последовательно в разных средах.
  • При использовании комбинированных селекторов размещайте каждый отдельный селектор на одной строке.
  • Для удобочитаемости кода добавляйте пробел перед открывающей скобкой каждого объявления.
  • Закрывающая скобка блока объявлений должна начинаться с новой строки.
  • каждое утверждение:После следует вставить пробел.
  • Каждый оператор должен занимать только одну строку, чтобы обеспечить более точное сообщение об ошибках.
  • Все объявления должны заканчиваться точкой с запятой. Хотя точка с запятой после последнего оператора необязательна, без нее ваш код будет более подвержен ошибкам.
  • Значения, разделенные запятыми, должны сопровождаться пробелом. Например, box-shadow
  • не в значении цветаrgb() rgba() hsl() hsla()а такжеrect() серединаДобавьте пробелы и не ставьте ненужные 0 перед значением (например, используйте 0,5 вместо 0,5). Это помогает отличать несколько значений цвета (запятая, без пробела) от нескольких свойств. значения (запятая с пробелом).
  • Все шестнадцатеричные значения должны использовать строчные буквы, например.#fff. Поскольку строчные буквы имеют более широкий спектр форм, их легче различить при просмотре документов.
  • По возможности используйте короткие шестнадцатеричные значения, например, используя#fffзаменять#ffffff.
  • Добавьте кавычки вокруг значения атрибута в селекторе, например.input[type="text"].Они необязательны только в определенных обстоятельствах, поэтому оба используют кавычки для повышения согласованности.
  • Не указывайте единицы измерения для 0, например, используйтеmargin: 0;вместоmargin: 0px;.
Есть вопросы о правилах, упомянутых здесь? Обратитесь к ВикипедииРаздел синтаксиса CSS.
/* Bad CSS */
.selector, .selector-secondary, .selector[type=text] {
    padding: 15px;
    margin: 0px 0px 15px;
    background-color: rgba(0, 0, 0, 0.5);
    box-shadow: 0 1px 2px #CCC, inset 0 1px 0 #FFFFFF
}

/* Good CSS */
.selector,
.selector-secondary,
.selector[type="text"] {
    padding: 15px;
    margin-bottom: 15px;
    background-color: rgba(0,0,0,.5);
    box-shadow: 0 1px 2px #ccc, inset 0 1px 0 #fff;
}

Порядок декларирования

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

  1. Positioning
  2. Коробчатая модель
  3. Типографская типография
  4. Внешний вид

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

Остальные свойства есть только в компонентевнутреннийРабота или нет влияют на исход первых двух случаев, поэтому они идут в конце.

Полные свойства и их порядок см.Recess.
.declaration-order {
    /* Positioning */
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 100;

    /* Box-model */
    display: block;
    float: right;
    width: 100px;
    height: 100px;

    /* Typography */
    font: normal 13px "Helvetica Neue", sans-serif;
    line-height: 1.5;
    color: #333;
    text-align: center;

    /* Visual */
    background-color: #f5f5f5;
    border: 1px solid #e5e5e5;
    border-radius: 3px;

    /* Misc */
    opacity: 1;
}
// 为了方便查阅， 我把Recess的order贴了一份过来, 引入时间2014-05-05

// css property order
var order = [
    'position'
    , 'top'
    , 'right'
    , 'bottom'
    , 'left'
    , 'z-index'
    , 'display'
    , 'float'
    , 'width'
    , 'height'
    , 'max-width'
    , 'max-height'
    , 'min-width'
    , 'min-height'
    , 'padding'
    , 'padding-top'
    , 'padding-right'
    , 'padding-bottom'
    , 'padding-left'
    , 'margin'
    , 'margin-top'
    , 'margin-right'
    , 'margin-bottom'
    , 'margin-left'
    , 'margin-collapse'
    , 'margin-top-collapse'
    , 'margin-right-collapse'
    , 'margin-bottom-collapse'
    , 'margin-left-collapse'
    , 'overflow'
    , 'overflow-x'
    , 'overflow-y'
    , 'clip'
    , 'clear'
    , 'font'
    , 'font-family'
    , 'font-size'
    , 'font-smoothing'
    , 'osx-font-smoothing'
    , 'font-style'
    , 'font-weight'
    , 'hyphens'
    , 'src'
    , 'line-height'
    , 'letter-spacing'
    , 'word-spacing'
    , 'color'
    , 'text-align'
    , 'text-decoration'
    , 'text-indent'
    , 'text-overflow'
    , 'text-rendering'
    , 'text-size-adjust'
    , 'text-shadow'
    , 'text-transform'
    , 'word-break'
    , 'word-wrap'
    , 'white-space'
    , 'vertical-align'
    , 'list-style'
    , 'list-style-type'
    , 'list-style-position'
    , 'list-style-image'
    , 'pointer-events'
    , 'cursor'
    , 'background'
    , 'background-attachment'
    , 'background-color'
    , 'background-image'
    , 'background-position'
    , 'background-repeat'
    , 'background-size'
    , 'border'
    , 'border-collapse'
    , 'border-top'
    , 'border-right'
    , 'border-bottom'
    , 'border-left'
    , 'border-color'
    , 'border-image'
    , 'border-top-color'
    , 'border-right-color'
    , 'border-bottom-color'
    , 'border-left-color'
    , 'border-spacing'
    , 'border-style'
    , 'border-top-style'
    , 'border-right-style'
    , 'border-bottom-style'
    , 'border-left-style'
    , 'border-width'
    , 'border-top-width'
    , 'border-right-width'
    , 'border-bottom-width'
    , 'border-left-width'
    , 'border-radius'
    , 'border-top-right-radius'
    , 'border-bottom-right-radius'
    , 'border-bottom-left-radius'
    , 'border-top-left-radius'
    , 'border-radius-topright'
    , 'border-radius-bottomright'
    , 'border-radius-bottomleft'
    , 'border-radius-topleft'
    , 'content'
    , 'quotes'
    , 'outline'
    , 'outline-offset'
    , 'opacity'
    , 'filter'
    , 'visibility'
    , 'size'
    , 'zoom'
    , 'transform'
    , 'box-align'
    , 'box-flex'
    , 'box-orient'
    , 'box-pack'
    , 'box-shadow'
    , 'box-sizing'
    , 'table-layout'
    , 'animation'
    , 'animation-delay'
    , 'animation-duration'
    , 'animation-iteration-count'
    , 'animation-name'
    , 'animation-play-state'
    , 'animation-timing-function'
    , 'animation-fill-mode'
    , 'transition'
    , 'transition-delay'
    , 'transition-duration'
    , 'transition-property'
    , 'transition-timing-function'
    , 'background-clip'
    , 'backface-visibility'
    , 'resize'
    , 'appearance'
    , 'user-select'
    , 'interpolation-mode'
    , 'direction'
    , 'marks'
    , 'page'
    , 'set-link-source'
    , 'unicode-bidi'
    , 'speak'
]

Не используйте@import

а также<link>По сравнению с этикеткой@importИнструкции выполняются намного медленнее, не только добавляя дополнительные запросы, но и вызывая непредвиденные проблемы. Альтернативы следующие:

  • использовать несколько<link>элемент
  • Скомпилируйте несколько файлов CSS в один файл с помощью препроцессора CSS, такого как Sass или Less.
  • Объединение файлов CSS, предоставляемых Rails, Jekyll или другими системами.
Пожалуйста, обратитесь кСтатья Стива СодерсаУзнать больше.
<!-- Use link elements -->
<link rel="stylesheet" href="core.css">

<!-- Avoid @imports -->
<style>
    @import url("more.css");
</style>

Расположение медиа-запроса

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

.element { ... }
.element-avatar { ... }
.element-selected { ... }

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

атрибут префикса

При использовании атрибутов с префиксом поставщика сделайте отступ значения, чтобы выровнять значение по вертикали для многострочного редактирования.

В Textmate используйтеТекст → Редактировать каждую строку в выделении(⌃⌘А). В Sublime Text 2 используйтеВыбор → Добавить предыдущую строку(⌃⇧↑) иВыбор → Добавить следующую строку(⌃⇧↓).
/* Prefixed properties */
.selector {
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.15);
            box-shadow: 0 1px 2px rgba(0,0,0,.15);
}

блок объявлений для одного оператора

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

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

/* Single declarations on one line */
.span1 { width: 60px; }
.span2 { width: 140px; }
.span3 { width: 220px; }

/* Multiple declarations, one per line */
.sprite {
    display: inline-block;
    width: 16px;
    height: 15px;
    background-image: url(../img/sprite.png);
}
.icon           { background-position: 0 0; }
.icon-home      { background-position: 0 -20px; }
.icon-account   { background-position: 0 -40px; }

стенограмма свойства

Настаивайте на ограничении использования сокращений свойств, которые требуют, чтобы вы явно задавали все значения. Общие злоупотребления стенографией свойств включают:

  • padding
  • margin
  • font
  • background
  • border
  • border-radius

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

В Mozilla Developer Network есть отличная статья для тех, кто не знаком со стенографией свойств и их поведением.shorthand propertiesстатья.
/* Bad example */
.element {
    margin: 0 0 10px;
    background: red;
    background: url("image.jpg");
    border-radius: 3px 3px 0 0;
}

/* Good example */
.element {
    margin-bottom: 10px;
    background-color: red;
    background-image: url("image.jpg");
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
}

Вложение в Less и Sass

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

// Without nesting
.table > thead > tr > th { … }
.table > thead > tr > td { … }

// With nesting
.table > thead > tr {
    > th { … }
    > td { … }
}

Наименование класса

  • Сохраняйте имена классов в нижнем регистре, используйте тире (не используйте символы подчеркивания и имена в верблюжьем регистре). Дефис должен выступать в качестве естественного разрыва для связанных классов. (Например,.btnа также.btn-danger).
  • Избегайте чрезмерного использования сокращений..btnможно хорошо описатьbutton,но.sНе может представлять ни один элемент.
  • Имена классов должны быть как можно короче и понятнее.
  • Используйте осмысленные имена; используйте структурированные или связанные с целью, а не абстрактные имена.
  • Используйте ближайший родительский узел или родительский класс в качестве префикса при именовании.
  • использовать.js-*классы для представления поведения (в отличие от стилей), но не включайте эти классы в CSS.
/* Bad example */
.t { ... }
.red { ... }
.header { ... }

/* Good example */
.tweet { ... }
.important { ... }
.tweet-header { ... }

Селектор

  • Используйте классы вместо общих тегов элементов, чтобы оптимизировать производительность рендеринга.
  • Избегайте использования некоторых селекторов атрибутов в часто встречающихся компонентах (например,[class^="..."]). Эти условия могут повлиять на производительность браузера.
  • Уменьшите длину селектора, а количество записей каждого комбинированного селектора должно быть максимально ограничено тремя.
  • ТолькоПри необходимости используйте селекторы потомков (например, не используя префиксные классы).

Расширенное чтение:

/* Bad example */
span { ... }
.page-container #stream .stream-item .tweet .tweet-header .username { ... }
.avatar { ... }

/* Good example */
.avatar { ... }
.tweet-header .username { ... }
.tweet .avatar { ... }

организация кода

  • Организуйте свой код в единицах компонентов.
  • Разработайте последовательную иерархию аннотаций.
  • Используйте согласованные пробелы для разделения блоков кода, что более удобно при просмотре больших документов.
  • При использовании нескольких файлов CSS различайте их по компонентам, а не по страницам. Страница будет переупорядочена, а компоненты перемещены.
/*
 * Component section heading
 */

.element { ... }


/*
 * Component section heading
 *
 * Sometimes you need to include optional context for the entire component. Do that up here if it's important enough.
 */

.element { ... }

/* Contextual sub-component or modifer */
.element-heading { ... }

Конфигурация редактора

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

  • Используйте мягкие вкладки с четырьмя пробелами.
  • Конечные пробелы удаляются при сохранении.
  • Конечные пробелы удаляются при сохранении.Зачем это делать?
  • Установите кодировку файла UTF-8.
  • Добавьте пустую строку в конец файла.
  • Добавьте пустую строку в конец файла.Зачем это делать?
Обратитесь к документации, чтобы применить эти настройки к проекту..editorconfigдокумент. Например,в бутстрапе.editorconfigдокумент. пройти черезО EditorConfigУзнать больше.

JavaScript

Отступ, точка с запятой, длина одной строки

  • Всегда используйте 4 пробела
  • продолжение-отступ также применяет 4 пробела, выровненных с предыдущей строкой
  • Операторы всегда заканчиваются точкой с запятой и не могут быть опущены.
  • Теоретически длина одной строки не должна превышать 80 столбцов, но если в редакторе включен плавный перенос, длину одной строки можно игнорировать.
  • Продолжая предыдущий, если вам нужен перевод строки, если есть оператор, вы должны перенести строку после оператора, а затем отступ новой строки на 4 пробела
  • Здесь следует отметить, что если есть несколько разрывов строки, нет необходимости продолжать отступ, например, второй абзац справа является лучшим форматом.
if (typeof qqfind === "undefined" ||
    typeof qqfind.cdnrejected === "undefined" ||
    qqfind.cdnrejected !== true) {
    url = "http://pub.idqqimg.com/qqfind/js/location4.js";
} else {
    url = "http://find.qq.com/js/location4.js";
}

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

  • добавить между методами
  • Префикс однострочных или многострочных комментариев
  • Добавьте пустые строки между логическими блоками, чтобы улучшить читаемость

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

  • Стандартные переменные помечены верблюжьим регистром
  • Используемый идентификатор должен быть все прописными
  • Место, используемое URL-адресом, должно быть указано, например REPORTURL.
  • Для Android всегда делайте первую букву заглавной
  • Для iOS всегда вводите первую букву в нижнем регистре, а две последние буквы в верхнем регистре.
  • Константы пишутся с заглавной буквы и соединяются символом подчеркивания.
  • Конструктор, сделайте первую букву заглавной
var thisIsMyName;

var goodID;

var AndroidVersion;

var iOSVersion;

var MAX_COUNT = 10;

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

символьная константа

  • В общем, используйте одинарные кавычки '' единообразно

Сценарий использования null

  • To initialize a variable that may later be assigned an object value
  • To compare against an initialized variable that may or may not have an object value
  • To pass into a function where an object is expected
  • To return from a function where an object is expected

Не подходит для нулевых сценариев использования

  • Do not use null to test whether an argument was supplied
  • Do not test an uninitialized variable for the value null

undefinedСценарии использования

  • Никогда не используйте undefined напрямую для оценки переменных
  • Используйте строку «undefined» для оценки переменных
// Bad
var person;
console.log(person === undefined);    //true

// Good
console.log(typeof person);    // "undefined"

Object Literals

// Bad
var team = new Team();
team.title = "AlloyTeam";
team.count = 25;

// Good  semi colon 采用 Followed by space 的形式
var team = {
    title: "AlloyTeam",
    count: 25
};

Array Literals

// Bad
var colors = new Array("red", "green", "blue");
var numbers = new Array(1, 2, 3, 4);


// Good
var colors = [ "red", "green", "blue" ];
var numbers = [ 1, 2, 3, 4 ];

выравнивание кронштейна

  • Стандартный пример Пробелы до и после круглых скобок, отсутствие новой строки в начале фигурных скобок и новая строка в конце
  • Фигурные скобки обязательны, даже если содержимое представляет собой только одну строку, второй регистр справа никогда не допускается.
  • Фигурные скобки должны использоваться везде, где if for while do...while try...catch...finally
// Good
if (condition) {
    doSomething();
}

if (condition)
    doSomething();
    doSomethingElse();

пробел до и после if else

if (condition) {
    doSomething();
} else {
    doSomethingElse();
}

switch

  • Используйте формат справа, между переключателем и скобками есть пробел, регистр должен быть с отступом, а между разрывом и следующим регистром оставлена ​​пустая строка.
  • Фигурные скобки обязательны, даже если содержимое состоит только из одной строки.
  • Как и во втором случае справа, пропадание переключателя должно иметь особое примечание, и случай отсутствия дефолта также нуждается в особом примечании.
switch (condition) {
    case "first":
        // code
        break;

    case "third":
        // code
        break;

    default:
    // code
}


switch (condition) {

    // obvious fall through    // 这里为啥JSHint默认就会放过，因为 case "first" 内无内容
    case "first":
    case "second":
        // code
        break;

    case "third":
    // code

    /* falls through */ // 这里为啥要加这样的注释， 明确告知JSHint放过此处告警
    default:
    // code
}

switch(condition) {
    case "first":
        // code
        break;

    case "second":
        // code
        break;

    // no default
}

for

  • Обычный цикл for, оставьте пробел после точки с запятой, не оставляйте пробела с обеих сторон операторов в условии суждения и т. д. Если предусловий несколько, оставьте пробел после запятой
  • for-in должно иметь суждение hasOwnProperty, иначе JSLint или JSHint выдаст предупреждение
var values = [ 1, 2, 3, 4, 5, 6, 7 ],
    i, len;

for (i=0, len=values.length; i<len; i++) {
    process(values[i]);
}



var prop;

for (prop in object) {

    // 注意这里一定要有 hasOwnProperty 的判断， 否则 JSLint 或者 JSHint 都会有一个 warn ！
    if (object.hasOwnProperty(prop)) {
        console.log("Property name is " + prop);
        console.log("Property value is " + object[prop]);
    }
}

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

  • Все объявления переменных в функции помещаются в заголовок функции, только одна var (сообщается больше об ошибке JSLint), одна переменная в строке и комментарий в конце строки, комментарий, комментарий, дорогой
function doSomethingWithItems(items) {

    var value = 10,    // 注释啊，注释啊，亲
        result = value + 10,    // 注释啊，注释啊
        i,    // 注释啊，注释啊，亲
        len;    // 注释啊，注释啊，亲

    for (i=0, len=items.length; i < len; i++) {
        doSomething(items[i]);
    }
}

объявление функции

  • Обязательно объявите его перед использованием. Не используйте функцию подъема движка JavaScript. Если это правило нарушается, и JSLint, и JSHint сообщит о предупреждении.
  • Разница между объявлением функции и выражением функции в том, что должны быть пробелы до и после () выражения функции, в то время как объявление функции не требует пробелов, когда есть имя функции, и требует пробелов, когда имя функции отсутствует.
  • Пространства не требуются раньше, а после функции звонить скобки
  • Сейчас формулировка выполнения функции, внешний слой пакета должен быть кронштейн
  • "use strict" никогда не разрешается использовать глобально. Он должен быть помещен в первую строку функции. Вы можете использовать самовыполняющиеся функции для включения больших сегментов кода. Если "use strict" используется вне функции, оба JSLint и JSHint сообщит об ошибках.
function doSomething(item) {
    // do something
}

var doSomething = function (item) {
    // do something
}


// Good
doSomething(item);

// Bad: Looks like a block statement
doSomething (item);


// Good
var value = (function() {

    // function body
    return {
        message: "Hi"
    }
}());


// Good
(function() {
    "use strict";

    function doSomething() {
        // code
    }

    function doSomethingElse() {
        // code
    }

})();

Разнообразный

  • Полностью избегайте использования == !=, используйте строгие условия сравнения === !==
  • eval неспециализированный бизнес, инвалид! ! !
  • с неспециальными услугами, инвалидами! ! !

Конфигурация редактора

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

  • Замените вкладки двумя пробелами (мягкая вкладка означает пробелы для вкладок).
  • Конечные пробелы удаляются при сохранении.Зачем это делать?
  • Установите кодировку файла UTF-8.
  • Добавьте пустую строку в конец файла.Зачем это делать?

Обратитесь к документации, чтобы применить эти настройки к проекту..editorconfigдокумент. Например,в бутстрапе.editorconfigдокумент. пройти черезО EditorConfigУзнать больше.

Категории