[JavaScript]撰寫可維護的程式碼

這篇文是來自JavaScript 設計模式第二章精要的心得,有很多ㄚ琪沒注意過的地方,ㄚ琪在此公開給各位瞧瞧。

減少全域變數

全域變數的問題

使用全域變數的問題是,『應用程式或網站的所有程式碼都共用它們,他們存在於相同的全域命名空間(namespace)之中,總是有可能發生命名衝突』。看到這ㄚ琪這才瞭解一直在寫爛的JavaScript程式碼,看來就覺得像是丁丁。另一個好理由是可移植性。

遺漏「var」的副作用

『隱含的全域變數和明確定義的全域變數之間有個微小的差別,就是能否用delete運算子將變數刪除:

  • 用var創造出的全域變數不可以刪除
  • 不使用var隱含創造出來的全域變數可以刪除』

 存取全域物件

單一var模式

『在函式最開頭使用單一個var述句是個非常有用的模式,具有下列優點:

  • 當你要尋找所有函式所需變數的時候,只需尋找單一個地方
  • 避免未宣告就使用變數所造成的邏輯錯誤
  • 幫助你記得宣告變數,於是可以盡少使用全域變數
  • 較少的程式碼』

Hoisting:分散的var造成的問題

『Javascript允許你在一個函式內有多個var敘述,並放在任何位置,而他們的行為跟在函式頂端就宣告一模一樣。這行為稱之為hoisting(提升)。如果你使用了一個變數,並在之後又宣告它的話,可能造成邏輯錯誤。』

for迴圈

『使用for迴圈可以重複(iterate)整個陣列或類似陣列的物件。…通常for迴圈的使用模式類似這樣:

// sub-optimal loop
for (var i = 0; i < myarray.length; i++) {
// do something with myarray[i]
}

這問題就是每次都要存取陣列長度,這會拖慢你的程式。哇,ㄚ琪平常很懶就是直接這樣用,沒想到是有缺陷的,天龍人當久了總是會這樣的,不被打一下可能都不會醒。

建議可以改成這樣:

for (var i = 0, max = myarray.length; i < max; i++) {
// do something with myarray[i]
}

據說在HTMLCollections上使用迴圈在任何的瀏覽器上可以快兩倍,在IE則是快190倍,吼吼。

for-in 迴圈

『for-in 迴圈應用來重複整個非陣列物件,它又稱為列舉(enumeration)。技術上,也可以用for-in迴圈來重複整個陣列,但不建議這樣做。

在列舉物件屬性時很重要的一件事是:使用hasOwnProperty()方法過濾掉來自原型(prototype)。』

不要擴充內建型別的原型

switch模式

避免隱含的型別轉換

避免使用eval()

使用parseInt()轉型成數值

編碼規範

縮排

大括號

左括號的位置

空格

命名慣例

讓建構式為首字母大寫

字詞的分隔方式:駝峰式命名法(Camel-CaseCamel Casecamel case)

其他命名方式

撰寫註解

撰寫API文件:使用JSDoc Toolkit(http://code.google.com/p/jsdoc-toolkit/)和YUIDoc (http://yuilibrary.com/projects/yuidoc)。

YUIDoc範例

一開始是為了幫助YUI (Yahoo! User Interface)文件化而開發。

寫得讓人看得懂

同儕審查

在推出產品最小化程式碼

執行JSLint

這本書真的可以成王道,推。

感謝你看到這裡,很快就可以離開了,但最好的獎勵行動就是按一下幫我分享或留言,感恩喔~

點我分享到Facebook

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *