讀書筆記：編寫可維護的javascript
阿新 • • 發佈：2019-02-15
- 使用for-in迴圈的時候，要使用hasOwnProperty方法進行過濾，除非你想查詢原型鏈上的繼承屬性
- 不應當使用for-in迴圈進行陣列遍歷，而只應該對object的屬性進行遍歷
- 每行表示式的結尾要使用分號(;),為了使壓縮包能正常工作，還應該為每個js檔案的開頭加上分號，形如這樣的匿名函式定義;(function(){...}());
- 變數初始化應該賦值null, 因為typeof這種操作符，對於未初始化的變數返回的是object，而未宣告的變數返回undefine
- null==undefined的結果是true,而null===undefined的結果是false，因此我們應該使用===,!==
- 不要直接在object構造物件上附加屬性，而要通過json格式的表示法來初始化一個物件
- 函式體中所有變數的宣告會被解析器提前到第一句執行語句前，因為js引擎執行函式時會首先掃描作用域內的所有的變數，無論它放在函式體何處
- 雖然所有的宣告會被提前，而且函式宣告優先順序高於同名的變數宣告，但只要變數在宣告的同時進行了初始化，那函式宣告就無法再覆蓋了
- 函式宣告不應放在程式碼塊中間或後面，尤其是判斷條件的裡面，不同的瀏覽器對此的解釋是不同的，但把匿名函式賦值給表示式的宣告方式不適用此規則
- 不要使用eval，也不要在Function,setTimeout,setInterval等函式中傳入字串
- 不要在css中嵌入javascript表示式，這會導致瀏覽器的重複計算，從而使得系統的整體效能下降，而且這種把js滲入到css中的做法不值得提倡
- 不要在javascript中操作物件的css樣式。相比上一條，這一條更容易犯錯，因為我們經常會在Dom元素中修改style屬性
- 將css與js分離，同時又能保持相互之間的聯絡的祕訣就是js只負責操作css的className，而把className的樣式定義放在css中
- 不要在html中直接嵌入javascript程式碼片段，而要把javascript程式碼放入單獨的js檔案中，使用<script>引用外部檔案的方式
- 不要在javascript中直接嵌入html程式碼，使用javascript模板引擎，然後通過變數進行渲染會更好一點
- handlebars是一款優秀的javascript模板引擎，它能幫你實現模板+變數=動態html，在ember等前端框架中也有使用
- 處理javascript全域性變數衝突問題的方法有兩種
- 一是使用單全域性變數
- 即一個應用系統的所有內部變數置於某一個全域性變數之下，而這個全域性變數要位於javascript引擎的上下文環境中
- javascript的內建物件，比如Array，Date等，你可以把它們看成是一個單全域性變數，因為這些變數幾乎在每個應用中都可能使用
- 單全域性變數的應用要涉及到名稱空間的劃分和模組的載入
- 對於模組載入，可以使用使用AMD（非同步模組定義）,它提供了全域性函式define用於載入依賴模組
- 想要使用AMD，需要有與之相容的模組載入器，比如RequireJS，http://www.requirejs.org/
- requireJS提供了一個require全域性函式，用來載入模組和執行載入成功後的方法回撥
- 二是使用零全域性變數
- 零全域性變數的使用，主要是通過匿名函式的即時呼叫來實現
- 雖然零全域性變數不會造成全域性汙染，但通常使用的場景有限
- 一般用於頁面初始載入，或者需要某段一次性執行的程式碼，而且它與其它程式碼無互動，也不對外輸出介面
- 一是使用單全域性變數
- 處理事件時，要將事件處理邏輯和應用邏輯分離，event物件永遠只被事件處理邏輯所持有，應用邏輯不要直接訪問event物件
- 採用typeof運算子檢測基本型別，用instanceof檢測引用型別，用===檢測null
- 檢測函式：typeof myFunc === "function"
- 檢測陣列：Array.isArray(myArray)
- 檢測屬性：myAttr in myObject, Object.hasOwnProperty
- 由於js解析器不會保護任何程式碼包括執行環境，所以應用開發人員不應該修改除自己程式碼以外的其它任何程式碼，這包括js的原生型別，DOM，BOM以及第三方類庫，如jQuery等
- Ant也可以用作javascript的構建工具