掌握 WordPress 中的 JavaScript：最佳實務指南 - OpenByt - 您免費 WordPress 知識的終極來源

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

WordPress 中的 JavaScript 編碼標準對於維持一致性、可讀性和高品質的程式碼至關重要，不論您是在開發主題、外掛，或是為核心程式貢獻心力。這些標準確保您的 JavaScript 能與 PHP、HTML 和 CSS 無縫整合，並促進不同團隊之間的合作。讓我們深入瞭解這些標準，以實際範例將其分解，讓所有開發人員都能理解。

概述：建立在 jQuery 的基礎上

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.物件與陣列間距

物件與陣列:一致的間距是視覺清晰度的關鍵，尤其是在處理複雜的資料結構時。請遵循以下間距指引：

// 宣告物件的正確方法
var obj = {
    name: 'John
    age: 27、
    height: 179
};

// 不正確的物件宣告方式 (不要濃縮屬性)
var obj = { name: 'John', age: 27, height: 179 }；

// 陣列也應該遵循一致的間距
var array = [ 1, 2, 3 ]；

物件和陣列中正確的間距可確保您的資料結構在視覺上鮮明，這在除錯或檢閱程式碼時很有幫助。

3.分號

總是使用分號來結束語句。在 JavaScript 自動插入分號 (ASI) 的過程中，省略分號可能會導致意想不到的問題。

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

即使 JavaScript 有時候會推斷出分號，但最好的做法還是明確地包含分號，以避免歧義，尤其是在結合多個程式碼片段或為團隊專案貢獻時。

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 標準

WordPress JavaScript 標準涵蓋的核心領域

1.避免使用全局變數

JavaScript 編碼標準實務

相關文章

回應