請訪問 iCoding Blog 主站
JavaScript 越來越火紅，但如果你並不是 JavaScript 的使用者，那你一定常常覺得這是個難懂的東西。這篇文章結合了網路上一些 JavaScript 教材來提供一些實務上對偶爾需要寫一些JavaScript 的人可以有些幫助。
希望這一篇文章可以讓業餘的程式設計師可以寫出更有效率，更好維護的 JavaScript。 如果你是一個 JavaScript/Front-end 開發者，那這邊文章不適合你。如果你不是，那這邊文章就是寫給你的 :)
註：由於 jQuery 被廣泛的使用並且可以降低跨瀏覽器開發的差異，所以這篇文章會有一部分提及 jQuery。
1. 了解變數 scope 以及初始化
大部分有其他程式語言背景的工程師一開始都覺得 JavaScript 的變數 scope 很難理解。JavaScript 的變數 scope 看起來很難處理只是因為它跟一般語言的 scope 不同。 但只需要記得兩個原則：
- 唯一的變數 scope 就是你所在的函式。
當然還有全域的 scope，但並沒有區塊的 scope。
- 每一個函式都有一個 scope chain，而這個 chain 中會指向上一層函式的 scope。
如果一個變數或是函式被存取但是在當下的 scope 中找不到，這時候就會嘗試往上一層的 scope 去找一直到有一個對應個宣告被找到為止。如果是嘗試賦予一個變數的值，但往上找卻找不到對應宣告的時候，那麼就會直接在全域 scope 設定一個這個變數名字的屬性。 (這邊可以參考之前一篇提升 JavaScript 的效能)
那麼現在來看一下函式是如何被初始化：
- 先宣告函式參數，並設定參數的值
- 所有函式內部的函式被宣告
- 所有在這函式 scope 中有宣告的變數被生成 (所以即使變數被宣告在最後一行，但卻可已在函式中的任何地方被存取)
- 賦予變數值
2. 避免寫與 HTML 混在一起(inline)的 JavaScript
這一點很簡單，但因為這實在很常發生，所以我把它包含在這。行為分離 (Behavioral Separation) 對前端開發者而言是一個基本原則，而這也應該是所有寫 JavaScrpt 的人該信奉的原則。 JavaScript 應該是屬於行為層所以不應該與 HTML 內容層混在一起。因此你不開寫這樣的 code：
<button id="my_btn" onclick="doThis();">Submit</button>
把 JavaScript 跟 HTML 混在一起這樣寫會導致 JavaScript 異常的難以維護。一個新的開發者或需要更長的時間來找出散亂在 HTML 中的 script 並且很難將整個功能的情境拼湊出來。
如果一個頁面需要做頁面事件相關的處理，那麼可能需要一個初始畫的函式在頁面最後被呼叫。這麼一來就只需要看一下這個初始化函式就可以知道整個頁面的動作以及事件的 binding。這邊是一個實例：
<button type="button" id="my_btn">Submit</button>
<!-- These scripts go before the </body> tag. -->
<script type="text/javascript" src="/s/init.js"></script>
<script type="text/javascript">
initializePage();
// pretend that these functions are in /s/init.js
function initializePage() {
document.getElementById("my_btn")
.addEventListener("click", doThis);
}
function doThis(e) {
// do cool stuff here
}
</script>
註：addEventListener() 在 IE9 之前並不支援，建議使用 jQuery 可以處理跨瀏覽器的 event binding。
3. 找到對的 Event 去做 binding
在 bind 任何事件處理之前，先想一想你想要處理的是什麼事情。我看過太多在表單的提送按鈕上 bind "click" 事件處理的案例，但實際上卻不是真的要處理 click ，而是要處理表單送出的事件。那麼這時候你應該 bind 的應該是表單的 "submit"，因為 enter 也會引發表單送出。
4. 使用快速的 selectors
如果你不是使用 jQuery 的話。常見的選取 DOM elements 的方法有： getElementById，getElementsByClassName， getElementsByTagName，querySelector 以及querySelectorAll。如果你只是處理很小部份的 DOM elements，那麼你用什麼方法其實沒有那麼重要，隨便你要使用 querySelector 或是 querySelectorAll。但如果你要處理的 DOM element 個數很大的話，記得使用比較快的方式（通常是最老的那個方法）。我建議使用 getElementById，所有的瀏覽器都支援而且是目前最快的方式。
如果你用 jQuery 的話，最好還是使用 IDs 或是 classes 可以得到比較好的效能。
5. 非必要的時候不要去動 Doc
這應該是關於最佳化 JavaScript 效能最重要的技巧：沒事不要去動 document ，除非你百分之百確定你必須這麼做。這通常是大量使用 JavaScript 的網站的瓶頸。
盡量嘗試把 elements 的 reference 記下來，避免下次還要重新 query document 一次。
最後一個：等值檢查與真值
當處理等值測試的時候，你必須瞭解語言是如何測試變數，並且知道如何利用語言特性。JavaScript 除了有一般的等值運算元 (==, !=)之外還有必較嚴格的等值運算元 (===, !==)。 用一些實例來看看有什麼差異：
- "5" == 5 but "5" !== 5
- 0 == false but 0 !== false
- null == undefined but null !== undefined
換句話說，=== 與 != 在比較的時候不會作自動的真值推導以及型別轉換，必須在兩邊的原始型別相同並且值也相同的情況下才為真。
結論
即使你偶爾才寫 JavaScript，能夠讓寫出來的 code 不會成為維護上的負擔並且執行的必較好應該還是一件比較好的事。希望這些技巧可以幫助你瞭解其他人寫的 JavaScript，也可以讓你在需要 debug 的時候是有一些基礎準備的。你可能不一定要成為黑帶 JavaScript 忍者，但至少必須對你寫的 code 有信心。
