掌握 WordPress 中的 JavaScript：最佳實務指南

開啟

3 個月前

掌握 WordPress JavaScript 編碼標準：開發人員綜合指南

JavaScript coding standards in WordPress are crucial for maintaining consistency, readability, and high-quality code, whether you are developing themes, plugins, or contributing to the core. These standards ensure that your JavaScript integrates seamlessly with PHP, HTML, and CSS and facilitate collaboration across diverse teams. Let’s dive into these standards, breaking them down with practical examples to make them accessible for all developers.

Overview: Building on jQuery’s Foundation

WordPress JavaScript 編碼標準源自於 jQuery JavaScript 風格指南，最初於 2012 年推出。雖然最初是針對 jQuery 專案，但它的成功讓框架以外的專案也廣泛採用。然而，WordPress 對這些標準也有自己的看法，與原始的 jQuery 指南略有不同。

主要差異包括

字符串的單引號:WordPress 偏好使用單引號來表示字串聲明。
案例說明縮排:在 WordPress 中，case 語句會在 switch 區塊中縮排。
一致的功能縮排:函數內的所有內容都會縮排，包括檔案範圍內的封閉包裝程式。
放寬線長限制:jQuery 強制每行限制 100 個字元，WordPress 則鼓勵但不嚴格執行。

WordPress JavaScript 標準涵蓋的核心領域

1.程式碼格式與縮排

正確的格式和縮排對於可讀性和可維護性的程式碼是非常重要的。WordPress 標準強調：

壓痕:使用標籤而不是空格作為縮排。每個邏輯區塊都應該縮排，以方便閱讀。制表符有助於保持一致性，尤其是當不同的開發人員在處理相同的程式碼時。

( function ( $ ) {
    // 區塊表達式縮排
    function doSomething() {
        // 函式代碼也縮排
        console.log( 'Doing something' )；
    }
} )( jQuery )；

在上面的範例中，函數 doSomething() 及其內容以縮排方式顯示它們是 IIFE 的一部分。

在上面的範例中，函數 doSomething() 及其內容以縮排方式顯示它們是 IIFE 的一部分。

var html = '<p>' + a + 「 和 」 + b + 「 的總和是 」 + ( a + b ) + '</p>';

元素
    .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.分號

總是使用分號 to terminate statements. Omitting semicolons can lead to unexpected issues during JavaScript’s automatic semicolon insertion (ASI).

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

Even though JavaScript can sometimes infer semicolons, it’s best practice to include them explicitly to avoid ambiguities, especially when combining multiple code snippets or contributing to team projects.

4.變數宣告： const, 任以及 變異

使用 const 值不會改變的變數。這有助於防止意外的重新指定，並讓其他開發人員清楚了解您的意圖。
使用任適用於其值可能會在指定範圍內改變的變數。這可確保變數為區塊作用域，防止與懸掛相關的問題。
**避免 **變異除非必要，因為它具有函數範圍，可能會因為吊掛而導致非預期的行為。

const userName = 'Alice'; // 對固定值使用 const
let userAge = 30; // 對可能改變的值使用 let

使用 const 和 任 這有助於改善程式碼的安全性，並讓變數的生命週期更容易推理。

5.命名慣例

一致的命名慣例可讓程式碼更具可讀性和可維護性：

駱駝殼:使用 camelCase 用於變數和函數名稱。例如 使用者 ID 或 取得使用者資料.
班級:使用大寫 (PascalCase) 表示類別名稱。
常數:使用 尖叫蛇箱 為常數。

const MAX_CONNECTIONS = 5；
類別 UserProfile {
    constructor( name ) {
        this.name = name；
    }
}

變數和函數的 CamelCase 有助於將它們與類別和常量區分開來，使代碼更清晰。

6.平等檢查

總是使用 嚴格相等/不相等 (===******** and !==) 檢查，而不是抽象檢查 (== 和 !=)。這有助於避免可能導致錯誤的意外強制類型。

if ( name === 'John' ) {
    // 嚴格相等檢查
    console.log( 'Hello, John!' )；
}

if ( result !== false ) { // 嚴格的不等號檢查。
    // 嚴格不等式檢查
    console.log( 'Result is not false' )；
}

嚴格相等可確保類型和值都會被比較，讓您的程式碼更具可預測性。

7.字串處理

使用 單引號 用於字串，除非字串包含單引號，在這種情況下使用雙引號以避免轉義。

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

此規則可確保整個程式碼庫的一致性，讓開發人員更容易遵循相同的作法。

8.切換語句

切換語句應該有一個打破每種情況（默認除外），以防止墮落錯誤。此外、 縮排 case 語句 應該在開關內的一個索引標籤中。

switch ( event.keyCode ) {
    case $.ui.keyCode.ENTER：
    case $.ui.keyCode.SPACE：
        executeFunction()；
        break；
    case $.ui.keyCode.ESCAPE：
        cancelFunction()；
        break；
    預設：
        defaultFunction()；
}

適當的縮排和使用分隔符可避免在符合多種情況時發生非預期的行為。

WordPress JavaScript 開發的最佳實務

1.避免使用全局變數

全局變數會導致 命名空間污染 以及與其他腳本衝突。反之，請將您的程式碼封裝在 立即啟用函式表達 (IIFE) 來建立局部範圍。

( function() {
    const localVar = 'Scoped to this function'；
    // 此處的程式碼受全域保護
} )();

封裝程式碼可降低衝突的風險，尤其是在使用多個第三方程式庫的環境中工作時。

2.文件與評論

WordPress 遵循 JSDoc 3 標準 來記錄 JavaScript 程式碼。文件對於理解複雜的方法、類別和函式的功能至關重要。

單行註解:使用 // 進行簡短說明，尤其是在描述特定的程式碼行時。
多行註解:使用 /* */ 以獲得更詳細的解釋或描述程式碼區塊。

/**
 * 將兩個數字相加。
 *
 * @param {number} a - 第一個數字。
 * @param {number} b - 第二個數字。
 * @return {number} a 和 b 的總和。
 */
function add( a, b ) {
    return a + b；
}

使用 JSDoc 記錄程式碼可讓工具自動產生文件，並協助開發人員瞭解您的程式碼，而無需深入實作。

3.錯誤處理

使用 try…catch 區塊來優雅地處理潛在的錯誤。錯誤處理可確保意外問題不會導致整個應用程式失敗。

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

適當的錯誤處理可提高程式碼的彈性，使其更容易除錯和維護。

JavaScript 編碼標準實務

確保您的 JavaScript 程式碼符合 WordPress 標準