掌握 WordPress JavaScript 编码标准：开发人员综合指南

无论您是开发主题、插件还是为核心做出贡献，WordPress 中的 JavaScript 编码标准对于保持一致性、可读性和高质量代码至关重要。这些标准可确保您的 JavaScript 与 PHP、HTML 和 CSS 无缝集成，并促进不同团队之间的协作。让我们深入研究这些标准，用实际示例对其进行分解，以使所有开发人员都可以使用它们。

概述：基于 jQuery 的基础构建

WordPress JavaScript 编码标准源自jQuery JavaScript 样式指南，最初于 2012 年推出。虽然最初针对 jQuery 项目，但它的成功导致框架之外的广泛采用。然而，WordPress 对这些标准有自己的看法，与原始的 jQuery 指南略有不同。

主要区别包括：

1. 字符串的单引号：WordPress 更喜欢用单引号来声明字符串。
2. Case 语句缩进：在 WordPress 中，case 语句在 switch 块内缩进。
3. 一致的函数缩进：函数内的所有内容都是缩进的，包括文件范围的闭包包装器。
4. 放宽行长度限制：虽然 jQuery 强制执行每行 100 个字符的限制，但 WordPress 鼓励这样做，但并不严格执行。

WordPress JavaScript 标准涵盖的核心领域

1.代码格式和缩进

正确的格式和缩进对于可读和可维护的代码至关重要。 WordPress 标准强调：

• 缩进：使用制表符而不是空格进行缩进。每个逻辑块都应该缩进以便于阅读。选项卡有助于保持一致性，特别是当不同的开发人员在同一代码库上工作时。

( function ( $ ) {
    // Block expressions are indented
    function doSomething() {
        // Function code is also indented
        console.log( 'Doing something' );
    }
} )( jQuery );

在上面的示例中，函数 doSomething() 及其内容都缩进以表明它们是 IIFE 的一部分。

在上面的示例中，函数 doSomething() 及其内容都缩进以表明它们是 IIFE 的一部分。

var html = '<p>The sum of ' + a + ' and ' + b + ' is ' + ( a + b ) + '</p>';

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

在这里，链中的每个方法都以新行开始，使操作序列更具可读性。

2. 对象和数组间距

对象和数组：一致的间距对于视觉清晰度至关重要，尤其是在处理复杂的数据结构时。请遵循以下间距准则：

// Correct way to declare objects
var obj = {
    name: 'John',
    age: 27,
    height: 179
};

// Incorrect way to declare objects (do not condense properties)
var obj = { name: 'John', age: 27, height: 179 };

// Arrays should also follow consistent spacing
var array = [ 1, 2, 3 ];

对象和数组中的正确间距可确保数据结构在视觉上清晰可见，这在调试或检查代码时很有帮助。

 3.分号

始终使用分号来终止语句。省略分号可能会导致 JavaScript 自动分号插入 (ASI) 期间出现意外问题。

var array = [ 1, 2 ];
console.log( 'Hello, world!' );

尽管 JavaScript 有时可以推断分号，但最佳实践是显式包含分号以避免歧义，尤其是在组合多个代码片段或为团队项目做出贡献时。

4. 变量声明： const 、 let和var

• 对于值不会改变的变量使用const 。这有助于防止意外重新分配，并使其他开发人员清楚您的意图。
• 对于值可能在给定范围内发生变化的变量使用let 。这确保了变量是块作用域的，从而防止与提升相关的问题。
• **除非必要，否则避免使用 ** var ，因为它具有函数作用域，这可能会因提升而导致意外行为。

const userName = 'Alice'; // Use const for fixed values
let userAge = 30; // Use let for values that may change

适当地使用const和let有助于提高代码安全性，并更容易推断变量的生命周期。

 5. 命名约定

一致的命名约定使代码更具可读性和可维护性：

• CamelCase ：使用驼峰式命名变量和函数名称。例如， userId或fetchUserData 。
• 类：使用大驼峰命名法(PascalCase) 作为类名。
• 常量：使用SCREAMING_SNAKE_CASE作为常量。

const MAX_CONNECTIONS = 5;
class UserProfile {
    constructor( name ) {
        this.name = name;
    }
}

变量和函数的驼峰命名法有助于将它们与类和常量区分开来，从而有助于提高代码清晰度。

 6. 平等检查

始终使用严格的相等/不等式（===******** 和 !==）检查，而不是抽象的检查（== 和 !=）。这有助于避免可能导致错误的意外类型的强制。

if ( name === 'John' ) {
    // Strict equality check
    console.log( 'Hello, John!' );
}

if ( result !== false ) {
    // Strict inequality check
    console.log( 'Result is not false' );
}

严格相等可确保比较类型和值，从而使您的代码更具可预测性。

 7. 字符串处理

对字符串使用单引号，除非字符串包含单引号，在这种情况下使用双引号以避免转义。

var greeting = 'Hello world!';
var statement = "It's a nice day.";

此规则可确保整个代码库的一致性，使开发人员更容易遵循相同的实践。

 8. Switch 语句

Switch 语句应该对每种情况都有一个中断（默认情况除外），以防止出现错误。此外，缩进 case 语句应位于开关内的一个选项卡中。

switch ( event.keyCode ) {
    case $.ui.keyCode.ENTER:
    case $.ui.keyCode.SPACE:
        executeFunction();
        break;
    case $.ui.keyCode.ESCAPE:
        cancelFunction();
        break;
    default:
        defaultFunction();
}

当遇到多种情况时，正确的缩进和使用中断可以防止意外的行为。

WordPress JavaScript 开发的最佳实践

1.避免全局变量

全局变量可能会导致命名空间污染以及与其他脚本的冲突。相反，请将代码封装在立即调用函数表达式 (IIFE)中以创建本地作用域。

( function() {
    const localVar = 'Scoped to this function';
    // Code here is protected from the global scope
} )();

封装代码可以降低冲突的风险，尤其是在具有多个第三方库的环境中工作时。

2. 文档和评论

WordPress 遵循JSDoc 3 标准来记录 JavaScript 代码。文档对于理解复杂方法、类和函数的功能至关重要。

• 单行注释：使用//进行简要说明，特别是在描述特定代码行时。
• 多行注释：使用/* */进行更详细的解释或描述代码块。

/**
 * Adds two numbers together.
 *
 * @param {number} a - The first number.
 * @param {number} b - The second number.
 * @return {number} Sum of a and b.
 */
function add( a, b ) {
    return a + b;
}

使用 JSDoc 记录代码允许工具自动生成文档，并帮助开发人员了解您的代码，而无需深入了解实现。

 3. 错误处理

使用try…catch块来优雅地处理潜在的错误。错误处理可确保意外问题不会导致整个应用程序失败。

try {
    const data = JSON.parse( jsonString );
} catch ( error ) {
    console.error( 'Invalid JSON:', error );
}

正确的错误处理可以提高代码的弹性，使其更易于调试和维护。

JavaScript 编码标准的实践

确保您的 JavaScript 代码符合 WordPress 标准