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) 的使用應該都是有考慮過的,話雖如此,其實也只有一種情形會使用到 == 就是。