jQuery Code Style : O3noBLOG

10月 17日

jQuery Code Style

隨著 jQuery 1.4.3 發佈，還有一份 jQuery Code Style 文件也一起公開了，相較於 Google 的 JavaScript Code Guide，我覺得 jQuery 的 code style 比較有趣可以講:P。

jQuery 在某個版本開始有注意 coding style ，而使用的檢查工具就是 JSLint ，不過直到這次新版才公開講，使用上其實有故意忽略了幾個錯誤訊息，其中特別有趣的是 "Expected an identifier and instead saw 'undefined' (a reserved word)." 這個。

在 JavaScript 中 undefined 不是保留關鍵字，而且它是全域的，所以任何 script 都可以把它覆寫掉，然後下面這樣判斷變數是否宣告過的方法就會爛掉了：

if (foo === undefined) {
    // ....blah....
}

有一個作法可以解決這問題，我以前也有提過，就是把自己的程式碼用一個 closure 包起來，然後故意少傳一個參數：

(function (document, undefined) {
    // ....blah....
})(document);

這樣 closure 內部的 undefined 就不用怕被其他地方的程式覆寫過了，不過 JSLint 會告訴你第一行的 undefined 不該使用來作為變數名稱，而應該要作為保留字，所以才會忽略這項錯誤訊息。

那既然 undefined 的問題解決了，在下面的 TYPE CHECKS 的 undefined 檢查中的全域變數還要用 typeof 來檢查呢？

typeof variable === "undefined"

那是因為只要一存取到沒定義的全域變數就會噴出錯誤訊息，所以必須要用 typeof 來判斷它的類別。

還有一個被忽略的錯誤訊息是 "Use '===' to compare with 'null' ，如果有看過一些關於 JavaScript 的 == (equal) 、 === (strict equal) 和 null 、 undefined 等行為的文章，就會知道它們的行為實在不好搞清楚，所以都會建議盡量使用 === 和 !== 取代 == 和 != ， JSLint 則是只有在空字串、0、null、undefined 等數值的比對上才會強迫你使用 === 和 !== ，不過 jQuery 的 lint 檢查卻故意忽略 null 的部份，主要是因為可以用下面的方法來判斷一個變數使否有值，或著是根本還未定義：

if (foo == null) {
    // ....blah....
}

這樣檢查的話，0 或是空字串是會當成有值，如果只是用驚嘆號做 true/false 判斷的話那就會誤判了。所以可以知道，jQuery 現在的程式碼裡面 == (equal) 和 === (strict equal) 的使用應該都是有考慮過的，話雖如此，其實也只有一種情形會使用到 == 就是。

單篇彙整