WordPress 中的 JavaScript 编码标准

WordPress 编码标准还为主题和插件的 JavaScript 代码的格式和样式提供了指导。此外，这些标准还有助于促进代码与核心 PHP、HTML 和 CSS 代码的一致性。

WordPress JavaScript 编码标准建立在jQuery JavaScript 样式指南的基础上，这个指南于 2012 年推出，是一套全面的编码规范，可增强代码的一致性和可读性。最初，该指南专门针对jQuery项目，但它的成功促使jQuery框架以外的项目也广泛采用该指南。

虽然 jQuery 指南告知了 WordPress 标准，但 WordPress 开发存在一些显着差异：

• WordPress 使用单引号来声明字符串。
• case 语句在 switch 块内缩进。
• 函数内容一致缩进，包括全文件闭包包装器。
• 为了与 PHP WordPress 标准保持一致，一些空白规则有所不同，例如制表符或缩进的使用。
• jQuery 的 100 个字符的硬性限制虽然受到鼓励，但并未严格执行。

WordPress JavaScript 编码标准涵盖以下领域：

• 代码重构。
• 代码间距，包括对象声明、数组和函数调用：

// Object declarations
// DO
var obj = {
    name: 'John',
    age: 27,
    height: 179
}
// DON'T
var obj = {
    name: 'John',  age: 27,
    height: 179
}
// Arrays and function calls
// Include extra spaces around elements and arguments.
array = [ 1, 2 ];
foo( arg1, arg2 );
// Object declarations
// DO
var obj = {
    name: 'John',
    age: 27,
    height: 179
}

// DON'T
var obj = {
    name: 'John',  age: 27,
    height: 179
}

// Arrays and function calls
// Include extra spaces around elements and arguments.
array = [ 1, 2 ];
foo( arg1, arg2 );
// Object declarations
// DO
var obj = {
    name: 'John',
    age: 27,
    height: 179
}

// DON'T
var obj = {
    name: 'John',  age: 27,
    height: 179
}

// Arrays and function calls
// Include extra spaces around elements and arguments.
array = [ 1, 2 ];
foo( arg1, arg2 );

分号的使用：

// Always use semicolons
array = [ 1, 2 ];
// Always use semicolons
array = [ 1, 2 ];
// Always use semicolons
array = [ 1, 2 ];

缩进和换行，包括块和大括号、多行语句和链式方法调用：

// Use tabs for indentation
( function ( $ ) {
    // Expressions indented
    function doSomething() {
        // Expressions indented
    }
} )( jQuery );
// if, else, for, while, and try blocks should span multiple lines
if ( condition ) {
    // Expressions
} else if ( ( condition && condition ) || condition ) {
    // Expressions
} else {
    // Expressions
}
// Line breaks must occur after an operator if the statement
// is too long to fit on one line.
var html = '<p>The sum of ' + a + ' and ' + b + ' plus ' + c +
    ' is ' + ( a + b + c ) + '</p>';
/* If a chain of method calls is too long to fit on a single line, 
   use one call per line. The first call should be on a separate line from
   the object on which the methods are called. */
elements
    .addClass( 'foo' )
    .children()
        .html( 'hello' )
    .end()
    .appendTo( 'body' );
// Use tabs for indentation
( function ( $ ) {
    // Expressions indented
    function doSomething() {
        // Expressions indented
    }
} )( jQuery );

// if, else, for, while, and try blocks should span multiple lines
if ( condition ) {
    // Expressions
} else if ( ( condition && condition ) || condition ) {
    // Expressions
} else {
    // Expressions
}

// Line breaks must occur after an operator if the statement
// is too long to fit on one line.
var html = '<p>The sum of ' + a + ' and ' + b + ' plus ' + c +
    ' is ' + ( a + b + c ) + '</p>';
/* If a chain of method calls is too long to fit on a single line, 
   use one call per line. The first call should be on a separate line from
   the object on which the methods are called. */
elements
    .addClass( 'foo' )
    .children()
        .html( 'hello' )
    .end()
    .appendTo( 'body' );
// Use tabs for indentation
( function ( $ ) {
    // Expressions indented
    function doSomething() {
        // Expressions indented
    }
} )( jQuery );

// if, else, for, while, and try blocks should span multiple lines
if ( condition ) {
    // Expressions
} else if ( ( condition && condition ) || condition ) {
    // Expressions
} else {
    // Expressions
}

// Line breaks must occur after an operator if the statement
// is too long to fit on one line.
var html = '<p>The sum of ' + a + ' and ' + b + ' plus ' + c +
    ' is ' + ( a + b + c ) + '</p>';
/* If a chain of method calls is too long to fit on a single line, 
   use one call per line. The first call should be on a separate line from
   the object on which the methods are called. */
elements
    .addClass( 'foo' )
    .children()
        .html( 'hello' )
    .end()
    .appendTo( 'body' );

• 赋值和全局变量，包括使用 和 声明变量const、使用 、全局变量和公共库let声明变量。var
• 命名约定，如缩写和首字母缩略词、类定义和常量：

// Abbreviations must be written in camelCase.
// All letters of acronyms should be capitalized.
const userId = 1;
const currentDOMDocument = window.document;
// Class definition must use UpperCamelCaseConvention.
class Human {
    ...
}
// Constants should use SCREAMING_SNAKE_CASE convention.
const SESSION_DURATION = 60
// Abbreviations must be written in camelCase.
// All letters of acronyms should be capitalized.
const userId = 1;
const currentDOMDocument = window.document;

// Class definition must use UpperCamelCaseConvention.
class Human {
    ...
}

// Constants should use SCREAMING_SNAKE_CASE convention.
const SESSION_DURATION = 60
// Abbreviations must be written in camelCase.
// All letters of acronyms should be capitalized.
const userId = 1;
const currentDOMDocument = window.document;

// Class definition must use UpperCamelCaseConvention.
class Human {
    ...
}

// Constants should use SCREAMING_SNAKE_CASE convention.
const SESSION_DURATION = 60

Equality:

// Use strict equality/inequality checks (=== and !==)
// instead of abstract checks (== and !=).
if ( name === "John" ) {
    ...
}
if ( result !== false ) {
    ...
}
// Also, with negation:
if !( result === false ) {
    ...
}
// Use strict equality/inequality checks (=== and !==)
// instead of abstract checks (== and !=).
if ( name === "John" ) {
    ...
}
if ( result !== false ) {
    ...
}

// Also, with negation:
if !( result === false ) {
    ...
}
// Use strict equality/inequality checks (=== and !==)
// instead of abstract checks (== and !=).
if ( name === "John" ) {
    ...
}
if ( result !== false ) {
    ...
}

// Also, with negation:
if !( result === false ) {
    ...
}

字符串：

// Use single-quotes for string literals.
    var myString = 'Hello world!'
// Use single-quotes for string literals.
    var myString = 'Hello world!'
// Use single-quotes for string literals.
    var myString = 'Hello world!'

切换语句：

// Use a break for each case other than default.
// Indent case statements one tab within the switch.
switch ( event.keyCode ) {
    // ENTER and SPACE both trigger x()
    case $.ui.keyCode.ENTER:
    case $.ui.keyCode.SPACE:
        x();
        break;
    case $.ui.keyCode.ESCAPE:
        y();
        break;
    default:
        z();
}
// Use a break for each case other than default.
// Indent case statements one tab within the switch.
switch ( event.keyCode ) {
    // ENTER and SPACE both trigger x()
    case $.ui.keyCode.ENTER:
    case $.ui.keyCode.SPACE:
        x();
        break;
    case $.ui.keyCode.ESCAPE:
        y();
        break;
    default:
        z();
}
// Use a break for each case other than default.
// Indent case statements one tab within the switch.
switch ( event.keyCode ) {
    // ENTER and SPACE both trigger x()
    case $.ui.keyCode.ENTER:
    case $.ui.keyCode.SPACE:
        x();
        break;
    case $.ui.keyCode.ESCAPE:
        y();
        break;
    default:
        z();
}

此外，WordPress 编码标准概述了编写 JavaScript 代码的几种最佳实践。

与 PHP 一样，WordPress为 JavaScript 代码提供内联文档标准。这些内联标准要么是格式化的文档块，要么是内联注释，遵循内联 JavaScript 文档的JSDoc 3 标准。内联标准涵盖函数、类方法、对象、闭包、对象属性、事件和文件头。

总结

编码标准是高效协同软件开发的支柱。它们能确保代码的一致性和可读性，简化编码过程，提高可维护性，促进团队合作。对于 WordPress 开发人员来说，遵守编码标准对于创建强大和可扩展的网站至关重要。