Правильные практики JS / forpes.ru

Главная
Правильные практики JS

Правильные практики JS

23.04.2021 12:22

goseay2 0 52 Источник

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

Длина строки

Отступ с помощью табуляций.
Нет пробелов в конце строк.
Длина строк должна быть не больше 80 знаков, и не должна превышать 100 (табуляция считается за 4 пробела).
При переносе строк, отступ не обязательно должен быть равен 2, если вам надо, например, перенести на следующую строку аргументы функции, то выровнить их можно по тому месте где стоит первый аргумент.
if/else/for/while/try всегда имеют фигурные скобки и всегда являются многострочными.
Унарные операторы (в т.ч. !, ++) должны выделяться пробелами.
Все , и ; не должны выделяться пробелами.
Все ; использующиеся в качестве окончания оператора должны быть в конце строки.
Все : после имени свойства в объекте должны выделяться одним пробелом с правой стороны.
Тернарный оператор ? и : должен иметь пробелы с обеих сторон.
Нет пробелов в пустых конструкторах (в т.ч., {}, [], fn())
Новая строка в конце каждого файла.
Пробел между аргументами и выражением

 for ( i = 0; i < length; i++ ) {

Плохой код:

// Bad
if(condition) doSomething();
while(!condition) iterating++;
for(var i=0;i<100;i++) {
    // ...
}

Хороший код:

var i = 0;
if ( condition ) {
    doSomething();
} else if ( otherCondition ) {
    somethingElse();
} else {
    otherThing();
}
while ( !condition ) {
    iterating++;
}
for ( ; i < 100; i++ ) {
    object[ array[ i ] ] = someFn( i );
}
try {
    // Expressions
} catch ( e ) {
    // Expressions
}

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

Используйте точку с запятой. Не следует полагаться на ASI (Automatic SemicolonInsertion).

// Пример однострочного комментария:
// We need an explicit "bar", because later in the code foo is checked.
var foo = "bar";
// Пример многострочного комментария:
/*
Four score and seven—pause—minutes ago...
*/
// Строчные комментарии допустимы когда не используется один из параметров:
function foo( types, selector, data, fn, /* INTERNAL / one ) {
    // Do stuff
}

Не пишите API документацию в комментариях. API документация должна находится в отдельном репозитории.

Кавычки

var double = "I am wrapped in double quotes";

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

var html = "<div id='my-id'></div>";

Скобки

Ставьте открывающую скобку на той же строке:

function thisIsBlock() {

Скобки следует использовать всегда, даже в ситуации, когда их можно опустить.

Декларирование переменных

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

// Bad
var foo = true;
var bar = false;
var a;
var b;
var c;

// Good
var a, b, c,
    foo = true,
    bar = false;

Глобальные переменные

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

Имена переменных и функций

Использовать верблюжий стиль (camelCase), где первая буква пишется в нижнем регистре. Описывать переменные как можно подробнее. Исключения составляют лишь итераторы, например, индекс обозначать i. Конструкторы не должны начинаться с прописной буквы. Первое слово с маленькой буквы, все последующие с большой

var foo = "";
var fooName = "";

Многострочные операции

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

// Bad
var html = "The sum of " + a + " and " + b + " plus " + c
    + " is " + (a + b + c);

// Good
var html = "The sum of " + a + " and " + b + " plus " + c +
    " is " + (a + b + c);

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

var firstCondition( foo ) && secondCondition( bar ) ?
    doStuff( foo, bar ) :
    doOtherStuff( foo, bar );

Если проверка слишком длинная и не помещается в одну линию, следует последовательно выделить проверку в отдельные блоки:

    if ( fistCondition() && secondCondition() &&
            thirdCondition() ) {
        doStuff();
    }

Массивы и вызов функций

Всегда добавляйте пробелы вокруг элементов и аргументов:

array = [ "" ];
array = [ a, b ];
foo( arg );
foo( "string", object );
foo( options, object[ property ] );
foo( node, "property", 2 );

Исключение:

// Function with a callback, object, or array as the sole argument:
// No space on either side of the argument
foo({
    a: "alpha",
    b: "beta"
});
// Function with a callback, object, or array as the first argument:
// No space before the first argument
foo(function() {
    // Do stuff
}, options );
// Function with a callback, object, or array as the last argument:
// No space after after the last argument
foo( data, function() {
    // Do stuff
});

Цепной вызов функций

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

elements
    .addClass( "foo" )
    .children()
        .html( "hello" )
    .end()
    .appendTo( "body" );

Объекты и классы

Объектная декларация может описываться одной строкой, если она коротка (не забывать про лимит ширины). В противном случае, следует писать по одному свойству на каждой строке. Имена свойств нужны заключать в кавычки, если они используют зарезервированные слова или включают спецзнаки:

// Bad
var map = { ready: 9,
    when: 4, "you are": 15 };
// Good
var map = { ready: 9, when: 4, "you are": 15 };
// Good as well
var map = {
    ready: 9,
    when: 4,
    "you are": 15
};

Используйте JSHint

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

{
  "camelcase" : true,
  "indent": 2,
  "undef": true,
  "quotmark": "single",
  "maxlen": 80,
  "trailing": true,
  "curly": true
}

Во все файлы, которые обрабатываются браузером добавляем:

/* jshint browser:true, jquery:true */

Во все типы JS файлов, так же лучше добавить:

"use strict";

Это повлияет и на JSHint и на обработчика JavaScript в целом, который станет менее терпимым к ошибкам, но будет работать быстрее.

Node правила

.nodeName должен всегда использовать поддерживаемые .tagName. .nodeType должен всегда использовать определять классификацию node (не .nodeName).

Проверки

Строгое равенство (===) предпочтительней абстрактной (==). Исключая проверки на undefined и null.

// Check for both undefined and null values, for some important reason.
undefOrNull == null;

String: typeof object === "string"
Number: typeof object === "number"
Boolean: typeof object === "boolean"
Object: typeof object === "object"
Plain Object: jQuery.isPlainObject( object )
Function: jQuery.isFunction( object )
Array: jQuery.isArray( object )
Element: object.nodeType
null: object === null
null или undefined: object == null
undefined:
- Глобальные переменные: typeof variable === "undefined"
- Локальные переменные: variable === undefined
- Свойства: object.prop === undefined