点赞在看，养成习惯 23323Слово ------- Расчетное время чтения:59минута

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

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

1. Общие правила письма

1. Основные принципы: разделение структуры, стиля и поведения

Старайтесь, чтобы документы и шаблоны содержали только структуру HTML, стили размещались в таблицах стилей css, а поведения помещались в скрипты js.
Разметка должна быть хорошо структурирована и семантически корректна.
Предполагается, что Javascript будет играть роль в постепенном улучшении пользовательского опыта.

2. Именование файлов/ресурсов

В веб-проектах используйте дефисы (-) для разделения имен файлов, чтобы улучшить читаемость. Например: order-detail-view.js. Убедитесь, что вы не начинаете с заглавной буквы и не используете верблюжий регистр.

3. Опустите протокольную часть URL-адреса ресурса внешней ссылки.

Не указывайте протокол http/https в URL-адресах ресурсов внешних ссылок (изображений и других медиа-ресурсов), сделайте URL-адрес относительным адресом и избегайте проблемы смешанного содержимого.

4. Делайте заметки

При написании комментариев обратите внимание: пишите функцию кода и не забывайте писать комментарии в важных местах. Нет необходимости полностью описывать каждый код, это добавит веса коду HTML и CSS. Это зависит от сложности проекта.

4.1 Описание однострочного комментария:

Однострочный комментарий начинается с двух косых черт и заканчивается концом строки.

 // 调用了一个函数
setTitle();
var maxCount = 10; // 设置最大量

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

/*
* 代码执行到这里后会调用setTitle()函数
* setTitle()：设置title的值
*/

4.3 Функциональные комментарии

/**
* 以星号开头，紧跟一个空格，第一行为函数说明 
* @param {类型} 参数 单独类型的参数
* @param {[类型|类型|类型]} 参数 多种类型的参数
* @param {类型} [可选参数] 参数 可选参数用[]包起来
* @return {类型} 说明
* @author 作者 创建时间 修改时间（短日期）改别人代码要留名
* @example 举例（如果需要）
*/

4.4 Комментарии к заголовку файла

Рекомендуется: заголовок файла VScode автоматически генерирует комментарии. Плагин: koroFileHeader.

4.5 Условные комментарии

<!--[if IE 9]>
    .... some HTML here ....
<![endif]-->

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

1. Общие соглашения

Этикетка

Самозакрывающиеся теги, без закрытия (например:img input br hrЖдать );
Необязательный закрывающий тег, который необходимо закрыть (например:</li>или</body>);
Минимизируйте количество меток;

пример:

Класс и идентификатор

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

<!-- Not recommended -->
<div class="item-hook left contentWrapper"></div>

<!-- Recommended -->
<div id="item-hook" class="sidebar content-wrapper"></div>

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

id
class
name
data-xxx
src, for, type, href
title, alt
aria-xxx, role

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

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

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

вложенный

<a>Вложенность не допускается<div>Этот тип ограничения относится к ограничению семантической вложенности, а ограничение, отличное от него, является ограничением строгой вложенности, например<a>Вложенность не допускается<a>. Строго вложенные ограничения разрешены не во всех браузерах; в то время как семантические вложенные ограничения в основном отказоустойчивы для браузеров, сгенерированные деревья документов могут отличаться друг от друга.Ограничения семантической вложенности

<li>используется для<ul>или<ol>Вниз;
<dd>, <dt>используется для<dl>Вниз;
<thead>,<tbody>, <tfoot>, <tr>, <td>используется для<table>Вниз;

Строго вложенные ограничения

inline-Levelэлементы, которые могут содержать только текст или другиеinline-Levelэлемент;
<a>Интерактивные элементы не могут быть вложены внутрь<a>,<button>,<select>Ждать;
<p>Элементы уровня блока не могут быть вложены внутрь<div>、<h1>~<h6>、<p>、<ul>/<ol>/<li>、<dl>/<dt>/<dd>、<form>Ждать. Логическое свойство В спецификации HTML5disabled、checked、selectedи другим свойствам не нужно устанавливать значение.

<input type="text" disabled>

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

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

2. Основной текст

Используйте тип документа HTML5 без учета регистра.

<!DOCTYPE html>

Объявляет кодировку символов, используемую документом

<meta charset="utf-8">

Установите приоритет последней версии IE и Chrome

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

пример:

3. SEO-оптимизация

описание страницы
Каждая веб-страница должна иметь тег описания длиной не более 150 символов, точно отражающий содержание веб-страницы. Документация

<meta name="description" content="不超过150个字符">  <!-- 页面描述 -->

ключевые слова страницы

<meta name="keywords" content="">  <!-- 页面关键词 -->

определить заголовок страницы

<title>标题</title>

Определить автора веб-страницы

<meta name="author" content="name, email@gmail.com">  <!-- 网页作者 -->

Определяет метод индексации поисковых систем. Robotterms представляет собой группу значений, разделенных запятыми ",". Обычно это следующие значения: none, noindex, nofollow, all, index и follow. Документация

<meta name="robots" content="index,follow">  <!-- 搜索引擎抓取 -->

4. Дополнительные этикетки

Добавьте область просмотра для мобильных устройств

<meta name ="viewport" content ="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no"> <!-- `width=device-width` 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边 http://bigc.at/ios-webapp-viewport-meta.orz -->

параметр содержания:

ширина ширина окна просмотра (значение/ширина устройства)
высота вьюпорта высота (значение/высота устройства)
начальное масштабирование
максимальный масштаб максимальный коэффициент масштабирования
Минимальный масштаб минимального коэффициента масштабирования
user-scalable, разрешать ли масштабирование пользователем (да/нет)

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

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />

идентификация номера телефона

iOS Safari (Android или другие браузеры этого не делают) автоматически распознает номера, похожие на номера телефонов, и обрабатывает их как ссылки на номера телефонов, например:

7 цифр, например: 1234567
Номер со скобками и знаком плюс, например: (+86)123456789
Номер двойной соединительной линии, например: 00-00-00111
11 цифр, например: 13800138000

Идентификация адресов электронной почты

На Android (iOS не будет) браузер автоматически распознает строку, похожую на адрес электронной почты, независимо от того, добавите ли вы ссылку электронной почты или нет, при длительном нажатии на эту строку появится всплывающее окно с предложением отправить электронное письмо. .

iOS-устройство

Название после добавления на главный экран

- Включить ли полноэкранный режим WebApp - Установить цвет фона строки состояния - Укажите стиль верхней строки состояния сафари для iOS.

Android-устройство

Метатег theme-color добавляется в Android Lollipop для управления цветом вкладки.

<meta name="theme-color" content="#db5945">

Отключить автоматические подсказки перевода в Chrome

<meta name="google" value="notranslate">

5. Таблица стилей, загрузка скрипта

Ссылки на таблицы стилей CSS указываются внутри тега head, а ссылки на сценарии js указываются перед закрывающим тегом body.

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

1. Общие соглашения

Принцип аннотации

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

название

Переменная, используя верблюжий чехол.

let loadingModules = {};

частные свойства, переменныеиметодНачните с подчеркивания _.

let _privateMethod = {};

постоянный, используйте все заглавные буквы.

let MAXCOUNT = 10;

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

let TargetState = {
    READING: 1,
    READED: 2,
    APPLIED: 3,
    READY: 4
};

booleanПеременные типа начинаются с is или has.

let isReady = false;
let hasMoreCommands = false;

Бинарные и тернарные операторы

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

let x = a ? b : c;
let y = a ?
    longButSimpleOperandB : longButSimpleOperandC;
let z = a ?
        moreComplicatedB :
        moreComplicatedC;

То же самое касается операторов:

let x = foo.bar().
    doSomething().
    doSomethingElse();

Условный (тернарный) оператор ( ? : )

Тернарный оператор используется для замены условного оператора if.

// Not recommended
if (val != 0) {
  return foo();
} else {
  return bar();
}
// Recommended
return val ? foo() : bar();

&& и ||

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

претензия

Объявления var поднимаются наверх области видимости, но их назначения не поднимаются. let и const имеют понятие временных мертвых зон (TDZ). Это очень важно, чтобы понять, почему type больше не является безопасным.

Имя переменной выражения анонимной функции поднимается, а содержимое функции — нет.

function example() { 
  console.log(anonymous); // => undefined

  anonymous(); // => TypeError anonymous is not a function

  var anonymous = function() {
    console.log('anonymous function expression');
  };
}

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

Поднимаются как имя объявления функции, так и тело функции.

function example() {
  superPower(); // => Flying

  function superPower() { 
    console.log('Flying');
  }
}

Строго типизированный дизайн

объяснять:

Если свойство предназначено для логического типа, не используйте 1 или 0 в качестве его значения. Для идентификации атрибутов, таких как строгие требования к размеру кода, он может с самого начала иметь номер типа и использовать 0 в качестве отрицательного значения.
Значение, взятое из DOM, обычно имеет тип string.Если есть объект или функция, которые получают тип числа, сделайте преобразование заранее, вместо того, чтобы ожидать, что объект и функция могут обрабатывать несколько типов значений.

2. Функциональный дизайн

Основные принципы проектирования функций: низкая связанность, высокая связность. (Предположим, что программа имеет 50 функций; как только вы изменяете одну функцию, необходимо изменить остальные 49 функций, что является следствием высокой связанности.)

длина функции

[Рекомендация] Длина функции должна контролироваться в пределах 50 строк. Смешивание слишком большого количества логических блоков в большой функции может легко привести к трудностям в обслуживании. Хорошо понятая функция должна завершать единую логическую единицу. Сложные операции должны быть дополнительно извлечены, а процесс должен быть отражен через вызовы функций. Исключения допускаются для неделимой логики, такой как определенные алгоритмы.

пример:

Параметрический дизайн

[Рекомендация] Параметры функции должны контролироваться в пределах 6. объяснять:

За исключением параметров переменной длины, рекомендуется управлять параметрами с различным логическим значением функции в пределах 6. Слишком большое количество параметров усложнит обслуживание.
В некоторых случаях, например, при использовании AMD Loader требует загрузки нескольких модулей, егоcallbackПараметры могут быть больше, поэтому обязательного ограничения на количество параметров функции нет.

[Рекомендация] Передайте входные параметры, не являющиеся данными, через параметр options. объяснять:

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

Следующая функция:

можно преобразовать в следующую подпись:

Этот режим имеет несколько существенных преимуществ:

Логические элементы конфигурации имеют имена, которые упрощают понимание логического смысла их выражений из вызывающего кода.
При росте пункта конфигурации нет необходимости бесконечно увеличивать количество параметров, он не появитсяremoveElement(element, true, false, false, 3)Такой непонятный код вызова.
Когда некоторые параметры конфигурации являются необязательными, очень сложно справиться с логикой перегрузки в виде нескольких параметров, и с помощью объекта параметров нужно только определить, существует ли свойство, что упрощает реализацию. стрелочная функция
Используйте нотацию стрелочной функции, когда вы должны использовать выражение функции (или передать анонимную функцию). Зачем? Поскольку стрелочная функция создает новую среду выполнения, она обычно может удовлетворить ваши потребности, и такой способ написания является более кратким. ( Ссылаться наArrow functions - JavaScript | MDN)

почему нет? Если у вас есть довольно сложная функция, вы можете перенести логику в объявление функции.

// Not recommended
[1, 2, 3].map(function (x) {
  const y = x + 1;
  return x * y;
});
// Recommended
[1, 2, 3].map((x) => {
  const y = x + 1;
  return x * y;
});

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

Зачем? Синтаксический сахар. Очень хорошо читается в цепочках вызовов. почему нет? Когда вы собираетесь вернуть объект.

// Recommended
[1, 2, 3].map(x => x * x);
// Recommended
[1, 2, 3].reduce((total, n) => {
  return total + n;
}, 0);

функции и переменные

Внутри той же функции объявление локальных переменных должно располагаться вверху. Потому что даже если поставить в середину, парсер js будет продвигаться в топ (хостинг)

// Recommended
var clear = function(el) {
    var id = el.id,
        name = el.getAttribute("data-name");
    .........
    return true;
}

// Not recommended
var clear = function(el) {
    var id = el.id;
    ......
    var name = el.getAttribute("data-name");
    .........
    return true;
}

Внутриблочные функции должны быть объявлены с локальными переменными.

// Not recommended
 var call = function(name) {
     if (name == "hotel") {
         function foo() {
             console.log("hotel foo");
         }
     }

     foo && foo();
 }

// Recommended
 var call = function(name) {
     var foo;

     if (name == "hotel") {
         foo = function() {
             console.log("hotel foo");
         }
     }

     foo && foo();
 }

Вызванный баг: Объявление первого метода записи foo расширено, при вызове call: первый метод записи вызовет функцию foo, а второй метод записи не вызовет функцию foo

пустая функция

[Рекомендация] В случаях с высокими требованиями к производительности рекомендуется иметь пустую функциональную константу для многократного использования и совместного использования.

Пример:

3. Объектно-ориентированный

[Обязательно] Схема наследования класса, конструктор нужно модифицировать при реализации.

объяснять:

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

Пример:

члены классаПубличные свойства и методы: такие же, как имена переменных и функций. Частные свойства и методы: с префиксом _ (подчеркивание), за которым следует тот же метод именования, что и для общедоступных свойств и методов.

Пример

function Student(name) {
    var _name = name; // 私有成员

    // 公共方法
    this.getName = function () {
        return _name;
    }

    // 公共方式
    this.setName = function (value) {
        _name = value;
    }}var st = new Student('tom');
st.setName('jerry');
console.log(st.getName()); // => jerry：输出_name私有变量的值

Использование распространяется на наследование.

Объяснение: extends — это встроенный прототип метода наследования, который не нарушает работу instanceof.

// Not recommended
const inherits = require('inherits');function PeekableQueue(contents) {
  Queue.apply(this, contents);
}inherits(PeekableQueue, Queue);PeekableQueue.prototype.peek = function() {
  return this._queue[0];
}
// Recommended
class PeekableQueue extends Queue {
  peek() {
    return this._queue[0];
  }
}

[Рекомендация] Свойства объявляются в конструкторе, а методы — в прототипе.

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

function TextNode(value, engine) {
    this.value = value;
    this.engine = engine;
}
TextNode.prototype.clone = function () {
    return this;
};

[Обязательно] Имя пользовательского события должно быть написано строчными буквами.

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

[Обязательно] Пользовательские события могут иметь только один параметр события.Если событие должно передать больше информации, объект события должен быть тщательно разработан.

объяснять:

Преимущества объекта события:

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

[Рекомендация] Избегайте изменения объектов, передаваемых извне.

объяснять:

Из-за динамической природы языка сценариев JavaScript, когда объект не был запечатан или заморожен, он может произвольно добавлять, удалять и изменять значения свойств. Но произвольное изменение неуправляемых им объектов может легко вызвать проблемы в коде при непредсказуемых обстоятельствах. Следовательно, хорошо спроектированные компоненты и функции должны избегать модификаций объектов, передаваемых извне. Метод selectNode кода ниже изменяет объект источника данных, переданный извне. Если источник данных используется в других ситуациях (например, в другом экземпляре дерева), это вызовет путаницу в состоянии.

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

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

4. Оптимизация производительности

Избегайте ненужных манипуляций с DOM

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

длина массива кеша

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

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

var arr = new Array(1000),
    len, i;// Recommended - size is calculated only 1 time and then stored
for (i = 0, len = arr.length; i < len; i++) {

}
// Not recommended - size needs to be recalculated 1000 times
for (i = 0; i < arr.length; i++) {

}

Возможности для оптимизации JavaScript

Пишите поддерживаемый код
Одномерный режим
Подъем: поместите все объявления переменных в начало функции (переменные, объявленные в конце, также будут рассматриваться JS как определенные в заголовке, что вызовет проблемы)
Не расширяйте встроенные прототипы (добавление свойств и методов к встроенным прототипам, таким как Object(), Function(), — это ловкий прием, но он нарушает удобство сопровождения)
Не используйте неявные преобразования типов
не используйте eval()
Числовое преобразование с помощью parseInt()
(каноническая) позиция открывающей фигурной скобки
Капитализация конструктора
писать заметки
не используйте пустоту
Не используйте оператор with
Не используйте оператор continue
Старайтесь не использовать побитовые операции

Оптимизируйте выполнение JavaScript

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

Скрипты, которые изменяют внешний вид страницы, определенно должны выполняться в первую очередь. Это включает в себя любые настройки шрифтов, макеты блоков или исправления png для IE6.
инициализация содержимого страницы
Инициализация заголовка страницы, верхней навигации и нижнего колонтитула
обработчик события привязки
Анализ веб-трафика, Doubleclick и другие сторонние скрипты

Загружать сторонний контент асинхронно

Если вы не можете гарантировать, что встраивание стороннего контента, такого как видео на Youtube или кнопка «Нравится/твитнуть», будет работать, вам необходимо рассмотреть возможность загрузки кода асинхронно, чтобы избежать блокировки загрузки всей страницы.

5. Отладка

Причуды браузера неизбежно создают проблемы. Есть несколько инструментов, которые могут помочь оптимизировать работоспособность кода и скорость загрузки. Рекомендуется сначала разрабатывать в Google Chrome и Firefox, затем использовать Safari и Opera и, наконец, выполнить дополнительную тонкую настройку для IE с использованием условного суждения. Ниже перечислены некоторые полезные отладчики и профилировщики скорости:

Google Chrome: Developer Tools
Firefox: Firebug, Page Speed, YSlow
Safari: Web Inspector
Opera: Dragonfly
Internet Explorer 6-7: Developer Toolbar
Internet Explorer 8-10: Developer Tools

4. Спецификации CSS

1. Общие соглашения

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

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

Positioning
Box model
Typographic
Visual
Misc

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

Полный список свойств и их порядок см. в разделе Порядок свойств Bootstrap для Stylelint.

.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;
}

порядок стилей ссылок

a:link -> a:visited -> a:hover -> a:active（LoVeHAte）

название

составные элементы

Имя должно состоять из слов, дефисов① или цифр;
Запрещен пиньинь (кроме условностей, таких как: youku, baidu), особенно сокращенный пиньинь и смесь пиньинь и английского языка. Не рекомендуется:

.xiangqing { sRules; }
.news_list { sRules; }
.zhuti { sRules; }

рекомендовать:

.detail { sRules; }
.news-list { sRules; }
.topic { sRules; }

①Используйте символ подчеркивания «-» в качестве связующего символа вместо символа подчеркивания «_». Оба метода имеют много сторонников, но «-» может избавить вас от однократного нажатия клавиши Shift и больше соответствует собственному синтаксису CSS, поэтому просто выберите тот, который в настоящее время широко используется.

лексическая спецификация

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

left, right, center, red, black

рекомендовать:

nav, aside, news, type, search

Спецификация сокращения

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

Не рекомендуется:

navigation   =>  navi 
header       =>  head
description  =>  des

рекомендовать:

navigation   =>  nav 
header       =>  hd
description  =>  desc

спецификация префикса

префикс	инструкция	Пример
g-	Глобальный общий стиль именования, префикс g называется глобальным, после изменения он повлияет на стиль всего сайта.	g-mod
m-	наименование модуля	m-detail
ui-	именование компонентов	ui-selector
js-	Все имена используются для чистого взаимодействия без каких-либо правил стиля. JSer имеет разрешения на полное определение	js-switch

Селектор должен начинаться с префикса

Не рекомендуется:

.info { sRules; }
.current { sRules; }
.news { sRules; }

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

рекомендовать:

.m-detail .info { sRules; }
.m-detail .current { sRules; }
.m-detail .news { sRules; }

Все селекторы должны начинаться с g-, m-, ui- и других селекторов с префиксом, что означает, что все правила должны действовать в относительной области действия, максимально уменьшая глобальное загрязнение. js — имя класса этого уровня полностью настраивается JSer, но правила именования также могут быть сохранены в соответствии с рефакторингом, например, нельзя использовать пиньинь и тому подобное.

уровень веса селектора

a = стиль встроенного стиля. b = количество селекторов ID. c = количество классов, псевдоклассов и селекторов атрибутов. d = количество селекторов типов и селекторов псевдоэлементов.

Селектор	Класс (а,б,в,г)
стиль=””	1,0,0,0
#wrapper #content {}	0,2,0,0
#content .dateposted {}	0,1,1,0
div#content {}	0,1,0,1
#content p {}	0,1,0,1
#content {}	0,1,0,0
p.comment .dateposted {}	0,0,2,1
div.comment p {}	0,0,1,2
.comment p {}	0,0,1,1
p.comment {}	0,0,1,1
.comment {}	0,0,1,0
div p {}	0,0,0,2
p {}	0,0,0,1

аббревиатура/опущение/аббревиатура

Используйте сокращения при написании значений атрибутов

Многие свойства CSS поддерживают аббревиатуры (например, шрифт ). Используйте аббревиатуры как можно чаще или даже установите только одно значение. Использование сокращений может повысить эффективность и облегчить понимание вашего кода.

Опустить единицу после 0

После 0 не следует добавлять единицы измерения, если в этом нет необходимости.

padding: 0;
margin: 0;

Опустить 0 перед десятичной точкой в начале 0

Десятичное число со значением или длиной от -1 до 1. 0 перед десятичным числом можно игнорировать.

font-size: .8em;

Опускать кавычки за пределами URI

Не используйте ( "" , " ) в url().

@import url(//www.google.com/css/go.css);

По возможности используйте 3 символа в шестнадцатеричном формате

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

/* Not recommended */

color: #eebbcc;

/* Recommended*/
color: #ebc;

2. Меньше и дерзче

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

// Not recommended
.element {
  margin: 10px 0 @variable*2 10px;
}
// Recommended
.element {
  margin: 10px 0 (@variable * 2) 10px;
}

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

Дальнейшее чтение:Nesting in Sass and Less

организация кодаКод организован в следующем порядке:

@import
объявление переменной
объявление стиля

@import "mixins/size.less";

@default-text-color: #333;

.page {
  width: 960px;
  margin: 0 auto;
}

Миксин

При определении миксина, если имя миксина не является className, который необходимо использовать, необходимо добавить круглые скобки, иначе он будет выведен в CSS, даже если он не вызывается.
Если миксин является миксином, который сам не выводит содержимое, вам нужно добавить круглые скобки после миксина (даже если параметры не переданы), чтобы отличить, является ли это className или нет.

модульный

Каждый модуль должен быть независимым файлом стиля с тем же именем файла, что и имя модуля;
Селекторы в стиле модуля должны начинаться с имени модуля для соглашений об области видимости;

Любой селектор с более чем 3-мя уровнями, нужно подумать, нужен ли он, есть ли однозначно более короткий метод написания, который может только поразить

3. Спецификация хака

Максимально сведите к минимуму использование и зависимость от Hack.Если использование Hack слишком сложно в проекте, обслуживание проекта станет огромной проблемой;
Используйте другие решения вместо хакерских идей;
Если взлом является обязательным, выберите что-то стабильное, широко используемое и простое для понимания.

.test {
    color: #000;       /* For all */
    color: #111\9;     /* For all IE */
    color: #222\0;     /* For IE8 and later, Opera without Webkit */
    color: #333\9\0;   /* For IE8 and later */
    color: #444\0/;    /* For IE8 and later */
    color: #666;      /* For IE7 and earlier */
    color: #777;      /* For IE6 and earlier */
}

Примечание. Для строгих и долгосрочных проектов условные комментарии можно использовать как зарезервированные Hack for IE или используемые в настоящее время.

Синтаксис условного комментария IE:

<!--[if <keywords>? IE <version>?]>
<link rel="stylesheet" href="*.css" />
<![endif]-->

Описание синтаксиса:

<keywords>
if条件共包含6种选择方式：是否、大于、大于或等于、小于、小于或等于、非指定版本
是否：指定是否IE或IE某个版本。关键字：空
大于：选择大于指定版本的IE版本。关键字：gt（greater than）
大于或等于：选择大于或等于指定版本的IE版本。关键字：gte（greater than or equal）
小于：选择小于指定版本的IE版本。关键字：lt（less than）
小于或等于：选择小于或等于指定版本的IE版本。关键字：lte（less than or equal）
非指定版本：选择除指定版本外的所有IE版本。关键字：!

<version>
目前的常用IE版本为6.0及以上，推荐酌情忽略低版本，把精力花在为使用高级浏览器的用户提供更好的体验上，另从IE10开始已无此特性

4. Анимации и переходы

При использовании переходов следует указывать свойство перехода.

Пример:

/* good */
.box {
    transition: color 1s, border-color 1s;
}
/* bad */
.box {
    transition: all 1s;
}

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

transform: translate(npx, npx);
transform: scale(n);
transform: rotate(ndeg);
непрозрачность: 0..1; Как правило, вы можете использовать translate вместо left в качестве свойства анимации.

Пример: как правило, в Chrome свойства CSS 3D или перспективы преобразования и анимация CSS для непрозрачности создают новый слой.При оптимизации прохода рендеринга с аппаратным ускорением после того, как графический процессор завершит преобразование 3D и другие операции, слой будет выполнен составным. операции (Compesite Layers), чтобы избежать перерисовки и перекомпоновки больших областей в браузере.

/* good */
.box {
    transition: transform 1s;
}.box:hover {
    transform: translate(20px); /* move right for 20px */
}
/* bad */
.box {
    left: 0;
    transition: left 1s;
}.box:hover {
    left: 20px; /* move right for 20px */
}

Основные понятия анимации:

Кадр: в процессе анимации каждое неподвижное изображение представляет собой «кадр»;
Частота кадров: количество неподвижных изображений, воспроизводимых в секунду, в единицахfps(Frame per second);
Длительность кадра: время задержки каждого неподвижного изображения, обычно в мс (миллисекундах);
Пропуск кадров (пропущенные кадры/пропущенные кадры): в анимации с фиксированной частотой кадров продолжительность определенного кадра намного больше, чем средняя продолжительность кадра, что приводит к сжатию и потере последующих кадров.

Общая частота обновления рендеринга браузера составляет60 fps, поэтому на веб-странице, если частота кадров достигает50-60 fpsАнимация будет достаточно плавной и комфортной.

Если вы используете анимацию на основе JavaScript, используйтеrequestAnimationFrame. Избегать использованияsetTimeout, setInterval.
избежать через что-то вродеjQuery animate()-styleИзмените стиль каждого кадра и используйте CSS для объявления анимации для лучшей оптимизации браузера.
использоватьtranslateзаменятьabsoluteПозиционирование улучшит частоту кадров, а анимация станет более плавной.

5. Оптимизация производительности

Тщательно выбирайте стили с высоким потреблением

Дорогостоящие свойства требуют от браузера большого количества вычислений перед отрисовкой:

box-shadows
border-radius
transparency
transforms
CSS-фильтры (убийство производительности)

Правильное использование свойств отображения

Свойство Display повлияет на отрисовку страницы, используйте его разумно.

отображение: ширина, высота, поля, отступы и поплавок больше не должны использоваться после встроенного;
float не следует использовать после display: inline-block;
вертикальное выравнивание не следует использовать после display: block;
Вы не должны использовать margin или float после display: table-*;

Улучшить производительность селектора CSS

Селекторы CSS сопоставляются справа налево. Пока есть другие селекторы слева от текущего селектора, система стилей продолжает двигаться влево, пока не найдет селектор, соответствующий правилу, или не выйдет, потому что он не соответствует. Крайний правый селектор называется ключевым селектором.

Эффективность выполнения селекторов CSS отсортирована по возрастанию:

1. селектор идентификатора (#myid)
2. Селектор класса (.myclassname)
3. Селектор тегов (div, h1, p)
4. Смежный селектор (h1+p)
5. Детский селектор (ul
6. Селектор потомка (li a)
7. Селектор подстановочных знаков (*)
8. Селектор атрибутов (a[rel="external"])
9. Селекторы псевдоклассов (a:hover, li:nth-child)

Избегайте использования универсальных селекторов

/* Not recommended */
.content * {color: red;}

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

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

/* Not recommended */
button#backButton {…}
/* Recommended */
#newMenuIcon {…}

Избегайте ограничения селекторов классов с помощью тегов

/* Not recommended */
treecell.indented {…}
/* Recommended */
.treecell-indented {…}
/* Much to recommended */
.hierarchy-deep {…}

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

Используйте замену селектора класса, чтобы уменьшить количество запросов css

/* Not recommended */
treeitem[mailfolder="true"] > treerow > treecell {…}
/* Recommended */
.treecell-mailfolder {…}

Избегайте дочерних селекторов

/* Not recommended */
treehead treerow treecell {…}
/* Recommended */
treehead > treerow > treecell {…}
/* Much to recommended */
.treecell-header {…}

использовать наследование

/* Not recommended */
#bookmarkMenuItem > .menu-left { list-style-image: url(blah) }
/* Recommended */
#bookmarkMenuItem { list-style-image: url(blah) }

Пятое: описание правил Vue

Подробную инструкцию можно посмотретьОфициальное руководство по стилю Vue

1. Спецификация сборки каталога

── project-name
   ├── public                    项目公共目录
   │   ├── favicon.ico               Favourite 图标
   │   └── index.html                页面入口 HTML 模板
   ├── src                       项目源码目录
   │   ├── main.js                   入口js文件
   │   ├── App.vue                   根组件
   │   ├── api                       把所有请求数据的接口，按照模块在单独的JS文件中
   │   │   ├── home.js                   首页接口
   │   │   ├── detail.js                 详情页接口，等等
   │   │   ···
   │   ├── assets                    静态资源目录，公共的静态资源，图片，字体等
   │   │   ├── fonts                     字体资源
   │   │   ├── images                    图片资源
   │   │   ···
   │   ├── common                    公共脚本，样式，配置，等动态信息
   │   │   ├── js                        公共脚本
   │   │   │   │── utlis.js                  公共 JS 工具函数
   │   │   │   │── config.js                 公共配置
   │   │   │   ···
   │   │   ├── style                 公共样式，可以是各种预处理语言
   │   │   │   │── index.css                样式主文件
   │   │   │   │── reset.css                重置样式
   │   │   │   ···
   │   │   ···
   │   ├── components                公共组件目录
   │   │   ├── confirm                   弹框组件
   │   │   │   └── index.vue
   │   │   ├── scroll                    局部内容滚动组件
   │   │   │   └── index.vue
   │   │   ···
   │   ├── http                      封装的 HTTP 请求方法
   │   │   ├── axios.js                  Axios 的封装
   │   │   ├── jsonp.js                  JSONP 的封装
   │   │   ···
   │   ├── store                     数据中心
   │   │   ├── state.js                  state 数据源，数据定义
   │   │   ├── mutations.js              同步修改 state 数据的方法定义
   │   │   ├── mutation-types.js         定义 Mutations 的类型
   │   │   ├── actions.js                异步修改 state 数据的方法定义
   │   │   ├── getters.js                获取数据的方法定义
   │   │   └── index.js                  数据中心入口文件
   │   ├── routes                    前端路由
   │   │   └── index.js
   │   └── views                     页面目录，所有业务逻辑的页面都应该放这里
   │       ├── home                      应用首页
   │       │   └── index.vue
   │       ···
   ├── .env.development              Vue 开发环境的配置
   ├── .env.production               Vue 生成环境的配置
   ├── .eslintrc.js                  Eslint 配置文件
   ├── .gitignore                    Git 忽略文件
   ├── package.json                  包依赖文件
   ├── package-lock.json             依赖包版本管理文件
   ├── README.md                     项目介绍
   ├── vue.config.js                 vue/cli 项目脚手架配置
   ···

2.src описание файла

Метод запроса модуля src/api. Вы должны обратиться к структуре прямых подпапок в src/views для сопоставления.
Статические файлы активов для проекта src/assets. Хотя они и являются статическими файлами (изображения, шрифты и т.д.), они все же лучше обрабатываются вебпаком, потому что некоторые файлы меньшего размера будут упакованы в файлы, уменьшая запросы и сжимая сторонние пакеты. Файл этого модуля, если его нужно расширить, слово как имя папки! Будь проще.
src/common Общие динамические сценарии и стили. На практике стили могут быть написаны на различных языках препроцессинга, организуйте структуру каталогов самостоятельно.
src/components общедоступные компоненты. Разместите абстрагированные базовые и бизнес-компоненты в своем проекте. Вы должны создать отдельную папку для каждого компонента, чтобы изолировать компоненты, и иметь файл по умолчанию: файл index.vue, чтобы сохранить несколько букв при импорте компонентов. Файл в компоненте по умолчанию является наименьшей единицей и не должен иметь поведения, такого как зависимости от других компонентов или манипулирования состоянием.
src/http в основном касается инкапсуляции метода запроса. Не рекомендуется изменять его в процессе разработки, потому что это повлияет на общую ситуацию.
центр обработки данных src/store. Эта часть содержит большое количество материалов и является независимой. Подробности см. в разделе Центр обработки данных.
Маршрутизация страницы src/router. По умолчанию все карты маршрутов записываются в файл, если вам нужна модульность маршрута, организуйте ее самостоятельно.
src/views Страницы для всей бизнес-логики.

3. Вариант порядка компонентов/экземпляров

name
components / directives / filters
extends / mixins
model / props / propsData
data / computed
часы / крючки жизненного цикла
methods

<script> 
  export default {
    name: 'ExampleName',  // 这个名字推荐：大写字母开头驼峰法命名。
    props: {},            // Props 定义。
    components: {},       // 组件定义。
    directives: {},       // 指令定义。
    mixins: [],           // 混入 Mixin 定义。
    data () {              // Data 定义。
      return {
        dataProps: ''     // Data 属性的每一个变量都需要在后面写注释说明用途
      }
    },
    computed: {},         // 计算属性定义。
    created () {},         // 生命钩子函数，按照他们调用的顺序。
    mounted () {},         // 挂载到元素。
    activated () {},       // 使用 keep-alive 包裹的组件激活触发的钩子函数。
    deactivated () {},     // 使用 keep-alive 包裹的组件离开时触发的钩子函数。
    watch: {},            // 属性变化监听器。
    methods: {            // 组件方法定义。
      publicbFunction () {}  // 公共方法的定义，可以提供外面使用
      _privateFunction () {} // 私有方法，下划线定义，仅供组件内使用。
    }
  }
</script>

4. Последовательность свойств элемента

is
v-for / v-if / v-else-if / v-else / v-show / v-cloak
v-pre / v-once
id
ref / key / slot
v-model
v-on
v-html / v-text

5. Контроль событий

Не используйте this.parent / this.root для управления, это затруднит отслеживание процесса, вместо этого вы можете использовать центр событий.
При каждом добавлении события в центр событий необходимо указывать имя события/исходного файла/файла направления потока и функцию события.
При удалении события необходимо удалить соответствующую заметку о событии в центре событий.
В компоненте есть собственные события привязки, обратите внимание на его удаление перед отменой компонента.

Описание правила Six.React

Подробные правила см. в официальной документации React.

"react/display-name": [1, { // 指定组件的 `displayName` 
  ignoreTranspilerName: false, // `true` 忽略编译器设置的组件称,
}],
"react/forbid-prop-types": [1, { // 给组件传入不相关的 `props`
    forbid: ["any"],
}],
"react/jsx-boolean-value": 2, // `true` 值简写 <A show />,
"react/jsx-closing-bracket-location": [2, 'line-aligned'], // 组件多个 `props` 格式缩进,
"react/jsx-clos,ing-tag-location": 2, // 关闭标签位置与开始标签平齐或者同行,
"react/jsx-curly-newline": {
  multiline: 'consistent', // 多行强制两个花括号内都直接有一个换行符,
  singleline: 'consistent', // 单行没有换行符
},
"react/jsx-curly-spacing": 2, // 对象`props` 空格缩进 => name={ test},
"react/jsx-equals-spacing": [2, "always"], // `props` 等号之间没有空格
"react/jsx-indent-props": [2, 'tab'], // 组件前两个空格缩进
"react/jsx-key": 2, // 渲染列表必须带 `key`
"react/jsx-max-props-per-line": [2, { // 单行行最多的 `props` 数量
  when: 'multiline'
}],
"react/jsx-no-bind": [1, {  // 不用 `bind` 绑定事件
  ignoreDOMComponents: true, // 原生 `DOM` 不做限制
  allowArrowFunctions: true, // 允许少量的箭头函数
}],
"react/jsx-no-duplicate-props": 2, // 不允许 `props` 属性重复定义 => <Hello name="John" name="John" />
"react/jsx-no-undef": 2, // 未定义就使用的组件变量
"react/jsx-props-no-multi-spaces": 2, // 多个 `props` 之间只有一个格
"react/jsx-one-expression-per-line": 2, // 单行只有一个表达式
"react/jsx-pascal-case": 2, // 组件名大驼峰规范 => 错误范例: <TEST_COMPONENT />
"react/jsx-sort-props": [2, {
  callbacksLast: true, // `callback` 放最后面
  shorthandFirst: true, // 简写 `props` 放最前面
}],
"react/jsx-tag-spacing": 2, // 封闭括号相关的空格
"react/jsx-uses-react": 1, // 引入 `react` 包之后却没有使用它(声明组件)
"react/jsx-uses-vars": 1, // 组件变量声明之后但是未使用
"react/jsx-wrap-multilines": 2, // `DOM` 块最好用括号以表达清晰
"react/no-danger": 2, // 不允许 `dangerouslySetInnerHTML` 这个 `props`
"react/no-multi-comp": 1, // 每个 `jsx` 文件只能声明一个组件
"react/no-unknown-property": 2, // 未知的 `DOM` 属性
"react/no-array-index-key": 2, // 数组的 `key` 不能用 `index`
"react/no-children-prop": 2,  // 不能将 `children` 作为 `props`

Эпилог

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

Обратите внимание на публичный аккаунт,учимся вместе: