Пишите поддерживаемый JavaScript

внешний интерфейс JavaScript Vue.js CSS

80% стоимости жизненного цикла программного обеспечения тратится на сопровождение, и почти все сопровождающие не являются непосредственными разработчиками кода. Как сделать код, который вы пишете, более эффективным для прочтения другими? Конечно, некоторые спецификации вводятся при написании кода. Итак, на какие стили программирования стоит обратить внимание в Javascript? В этом посте будут обобщены идеи из статьи «Написание поддерживаемого JavaScript».

Стиль отступа

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

конец заявления

Рекомендуется не опускать точку с запятой. Многим нравится писать js-код, основанный на автоматической вставке точки с запятой, то есть без точки с запятой после оператора. Но в большинстве случаев такие операторы, как return, не работают. Есть и другие подобные грамматики.Я не буду здесь подробно останавливаться на механизме автоматической вставки точки с запятой.Заинтересованные детские ботинки могут перейти наПодробное объяснение механизма JavaScript ASI.

длина линии

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

новая линия

Длина кода превышает 80 колонок, также важны разрывы строк. В код с переносом строки рекомендуется добавлять два отступа. Например:

callFunction(element1, element2, element3, element4,
        element5);

Пустые строки

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

  • между методами
  • между локальной переменной в методе и первым оператором
  • перед аннотацией
  • Вставляйте пустые строки между логическими фрагментами внутри методов, чтобы улучшить читаемость

имя

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

  • CamelCase
  • переменное существительное
  • функциональный глагол + существительное
  • Частным свойствам или методам объекта предшествует _
  • Используйте все заглавные буквы для констант и подчеркивания для разделения слов.
  • Конструкторы пишутся с заглавной буквы и начинаются с не-глагола.

Примечания

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

  • Одна строка для объяснения следующей строки кода
if (condition) {
    
    // 如果代码执行到这里，代表通过了condition的校验
    next();
}

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

  • В той же строке, что и код, поясняющий предыдущий код
var result = something + somethingElse;    // somethingElse will never be null

Обратите внимание, что комментарии и код напрямую добавляют по крайней мере один отступ.

  • Несколько строк, используемых для комментирования блока кода
// if (condition) {
//     doSomething();
//     doSomethingElse();
// }

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

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

if (condition) {

    /*
     * 如果代码执行到这里
     * 说明balabala
     */
     doSomething();
}

Обратите внимание на отступы, разрывы строк, пробелы и пустые строки.

Объявление с использованием аннотаций

Примечания используются в основном для маркировки. В основном это следующие:

  • СДЕЛАТЬ 说明代码还未完成，说明接下来要做的事情。
  • ВЗЛОМ 表明代码实现走了一个捷径。应当包含为何使用hack的原因。同时也表明也许会有更好的解决办法。
  • ИСПРАВЬ МЕНЯ Это означает, что в коде есть ошибка, которую нужно исправить как можно скорее.
  • РАССМОТРЕНИЕ 说明代码任何可能的改动都需要评审。

Переменные, функции и операторы

  • объявление переменной Как правило, существует два вида привычек объявления переменных: один — это «ближайший» принцип, который помещается в место, наиболее близкое к использованию, второй — вверху, как первый оператор в функции. Лично рекомендую последнее, что согласуется с привычкой разбора кода движком JavaScript.

  • объявление функции 函数声明也会被JS引擎提前，建议在函数调用之前声明函数。另外，推荐函数内部的局部函数应当紧接着变量声明之后声明。

  • Немедленно вызываемая функция Немедленно выполните функцию, которая точно будет часто использоваться в разработке. Хороший способ написать это:

var value = (function() {

    // 函数体
    return {
        message: 'Hi'
    };
}());

Дайте понять, что это немедленная функция.

  • строгий режим ES5 вводит строгий режим, который анализирует и выполняет код js таким образом, чтобы уменьшить количество ошибок. Также очень просто анализировать код в строгом режиме, еслиuse strictПоместите это в код js. Когда парсер js увидит такую ​​строку, которая не присвоена переменной, он будет парсить код в строгом режиме. Один принцип: воздействовать как можно меньше на больше кода! Что это значит?use strictЕго можно разместить где угодно, глобально или локально.
// bad
"use strict";
function doSomething() {
    // 代码

}

// good
function doSomething() {
    "use strict";
    // 代码

}

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

(function() {
    "use strict";
    function doSomething() {
        // 代码
    }
    function doSomethingElse() {
        // 代码
    }
})();
  • равный Используйте ===, !== вместо ==, !=, чтобы избежать преобразования типов. Соответствующее содержание преобразования типов здесь описываться не будет, и вы сами в этом разберетесь.

Слабая связь слоя пользовательского интерфейса

Принцип слабой связанности: при изменении компонента вам не нужно максимально изменять код других компонентов.

  • Извлечь JavaScript из CSS избегать использованияCSS-выражения

  • Извлечь CSS из JavaScript Избегайте прямого изменения стиля дома и используйте имя класса для достижения желаемого эффекта.

// bad
element.style.cssText = "color: red; left: 10px";

// good
.reveal {
    color: red;
    left: 10px;
}

element.className += " reveal";
  • Извлечь JavaScript из HTML Избегайте написания обработчиков событий и логического кода непосредственно в HTML.

обработка событий

Два правила:

  • Изолировать программную логику Рекомендуется отделить логику приложения от всех обработчиков событий, например:
// bad
function handleClick(event) {
    var popup = document.getElementById("popup");
    popup.style.left = event.clientX + "px";
    popup.style.top = event.clientY + "px";
    popup.className = "reveal";
}

// good
function handleClick(event) {
    showPopup(event);
}

function showPopup(event) {
    popup.style.left = event.clientX + "px";
    popup.style.top = event.clientY + "px";
    popup.className = "reveal";
}
  • Не злоупотребляйте объектами событий Плохая практика — полностью передавать событие объекта события. Другие не знают, какие свойства или методы объекта события вы используете. Продолжая приведенный выше пример:
// bad
function handleClick(event) {
    showPopup(event);
}

function showPopup(event) {
    popup.style.left = event.clientX + "px";
    popup.style.top = event.clientY + "px";
    popup.className = "reveal";
}

// good
function handleClick(event) {
    showPopup(event.clientX, event.clientY);
}

function showPopup(x, y) {
    popup.style.left = x + "px";
    popup.style.top = y + "px";
    popup.className = "reveal";
}

Рекомендации по спецификации Vue можно найти налучшие практики vue, Давайте обсуждать и учиться вместе!

Категории