[原]《Web前端開發修鍊之道》-讀書筆記JavaScript部分

JavaScript的分層概念

為了使代碼更清晰，減少冗餘，提高代碼重用率，和css分層一樣：

base層：最低端，給common層和page層提供介面的，兩個職責：1：不同瀏覽器之間js的差異提供統一介面；2：擴充js語言底層提供的介面。

common層：提供可複用的組件，和頁面內具體功能無關。common層的功能是給page層用的。

page層：最頂端，該層主要是完成各個頁面內的功能需求。

良好的編程習慣命名空間和匿名函數的使用

避免JS衝突，避免全域變數泛濫，劃分模組。

產生命名空間是一個很常用的功能，可以將其封裝為一個函數。

var GLOBAL = {};GLOBAL.namespace = function(str) {　　var arr = str.split("."), o=GLOBAL;　　for(var i = (arr[0]=="GLOBAL") ? 1 : 0;  i<arr.length;  i++){　　　　o[arr[i]] = o[arr[i]] || {};　　　　o = o[arr[i]];　　}}    //調用GLOBAL.namespace("A.DOG");GLOABL.A.DOG.name = "wangcai";

給程式一個入口

特別重要的一點，直接關係到代碼的可讀性。

CSS放在頭部，JS放在尾部

大家都知道，再囉嗦一遍，瀏覽器載入網頁，載入到JS時，由於指令碼比較多，而html代碼還沒有載入，這是頁面會顯示空白，指令碼阻塞了html的載入，等到毫不容易載入完成了，有時候會發現這些網頁元素沒有樣式，所以一個好的習慣是，CSS放在頁頭，JS放在頁尾（先載入css,再載入html,再載入js.） 這樣就能適時的將介面呈現給使用者，減少頁面空白的時間。

添加註釋

形成有規律的代碼注釋風格，對代碼的維護和修改有很大的協助。

• 公用組件、外掛程式注釋，需要在檔案頭部加註釋

/**

* 檔案用途說明

* 作者日期

* 製作日期

**/

• 大的模組注釋方法

//========================

// 代碼用途

//========================

• 小注釋

//代碼說明

注釋獨佔一行，不要再代碼後同一行內加註釋

編程適用技巧

• 保持彈性，適應變化
• 可複用性，避免產生副作用
• 通過傳參實現定製，用hash散列對象傳參
• 控制this關鍵字的指向
• 預留回調借口
• DRY原則，don’t repeat yourself，相同的代碼唯寫一次，然後再多處引用，提高重用率，減少代碼量，提高代碼的可維護性。
  

系列知識連結

[原]《Web前端開發修鍊之道》-讀書筆記CSS部分

[原]《Web前端開發修鍊之道》-讀書筆記HTML部分

[原]JavaScript必備知識系列