JavaScript стал важным звеном в развитии WordPress-приложений (тем и плагинов), а также ядра WordPress. Для форматирования и стилизации кода JavaScript необходимы стандарты, чтобы сохранить ту же согласованность, которую стандарты кодирования WordPress обеспечивают для PHP, HTML и CSS кода.

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

Cтандарты кодирования JavaScript для WordPress развиты на основе jQuery JavaScript Style Guide. Наш стандарт отличается от руководства для jQuery в следующих моментах:

• WordPress использует одинарные кавычки для строк.
• Директивы case сдвигаются на отступ внутри блоков switch.
• Тело функции всегда оформляется отступом.
• Есть некоторые отличия в использовании пробелов для согласованности со стандартами кодирования PHP.
• 100-символьный лимит jQuery приветствуется, но не является строго обязательным.

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

Рефакторинг кода

"Рефакторинг кода не должен делаться только потому, что мы можем это сделать." - Ведущий Разработчик Andrew Nacin

Многие части JavaScript-кода WordPress не согласованы по стилю. WordPress работает над улучшением ситуации, с тем чтобы код становился чище и читабельнее.

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

Весь новый или обновленный JavaScript-код будет проверяться на соответствие стандартам и тестироваться JSHint.

Интервалы

Активно используйте пробелы в вашем коде. "Если сомневаетесь, ставьте пробел."

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

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

Стандарты JavaScript-кода в WordPress предполагают несколько более широкое использование пробелов, чем в стандартах jQuery. Эти изменения приняты для согласованности между PHP и JavaScript-кодом в WordPress.

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

Объекты

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

// Предпочтительно
var map = {
    ready: 9,
    when: 4,
    'you are': 15
};
 
// Приемлемо для небольших объектов
var map = { ready: 9, when: 4, 'you are': 15 };
 
// Плохо
var map = { ready: 9,
    when: 4, 'you are': 15 };

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

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

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

Исключения:

// Для обеспечения согласованности с PHP-стандартами не ставьте пробелов вокруг
// строковых литералов или целых чисел, используемых в качестве ключей в массивах
prop = object['default'];
firstArrayElement = arr[0];
 
// Функция, единственным аргументом которой является callback-функция, объект или массив
// По обе стороны аргумента пробелов быть не должно
foo(function() {
    // Do stuff
});
 
foo({
    a: "Альфа",
    b: 'бета'
});
 
foo([
    "Альфа",
    'бета'
]);
 
// Если первым аргументом функции является callback-функция, объект или массив,
// то перед первым аргументом не должно быть пробелов 
foo(function() {
    // Do stuff
}, options );
 
// Если последним аргументом функции является callback-функция, объект или массив,
// то после последнего аргумента не должно быть пробелов 
foo( data, function() {
    // Do stuff
});

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

var i;
 
if ( condition ) {
    doSomething( 'with a string' );
} else if ( otherCondition ) {
    otherThing({
        key: value,
        otherKey: otherValue
    });
} else {
    somethingElse( true );
}
 
// В отличие от jQuery в WordPress после оператора ! должен идти пробел. 
// Это сделано также для согласованности с PHP-стандартами.
while ( ! condition ) {
    iterating++;
}
 
for ( i = 0; i < 100; i++ ) {
    object[ array[ i ] ] = someFn( i );
    $( '.container' ).val( array[ i ] );
}
 
try {
    // Выражения
} catch ( e ) {
    // Выражения
}

Точки с запятой

Используйте их. Никогда не полагайтесь на автоматическую вставку (ASI).

Отступы и переносы строк

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

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

(function( $ ) {
    // Выражения с отступом
 
    function doSomething() {
        // Выражения с отступом
    }
})( jQuery );

Блоки и фигурные скобки

if, else, for, while, try - блоки должны всегда использовать фигурные скобки, и всегда располагаться на нескольких строках. Открывающая скобка должна быть в одной строке с определением функции, условием или началом цикла. Закрывающая скобка должна быть в строке, непосредственно следующей за последним оператором блока.

var a, b, c;
 
if ( myFunction() ) {
    // Выражения
} else if ( ( a && b )