編寫可維護的JAVASCRIPT 讀書筆記
- 縮進層級：4個空格字符為一個縮進層級
- 行的長度：單行不超過80個字符
- 換行：在運算符后換行（避免自動插入分號而造成的錯誤），第二行追加兩個縮進
- 變量命名：駝峰法、命名前綴應當是名詞
- 函數(shù)命名：駝峰法奄妨、命名前綴應當是動詞
- 常量命名：全大寫字母和下劃線
- 構(gòu)造函數(shù)：首字母大寫
- 創(chuàng)建對象：使用對象直接量
- 創(chuàng)建數(shù)組：使用數(shù)組直接量
注釋
- 注釋之前總有一個空行薇溃，且縮進層級和下一行代碼保持一致
- 注釋和代碼之間至少有一個縮進
- 多行注釋
/*
* 注釋注釋
* 注釋注釋
*/
var count = 28;
- for in 循環(huán)用來遍歷對象屬性聚假，會遍歷原型上的屬性般甲，用hasOwnProperty()來過濾出實例屬性
- 函數(shù)聲明不應當出現(xiàn)在語句塊之內(nèi)
嚴格模式
- 最好不要在全局作用域中使用‘use strict’
- 如果希望在多個文件中應用嚴格模式而不必寫很多‘use strict’夹抗，可以使用立即執(zhí)行函數(shù)
(function() {
'use strict';
function doSomething() {
}
function doSomethingElse() {
}
})();
將css從javascript中抽離
// 不好的寫法
// 當出現(xiàn)樣式問題杰标，會通常查找css而非js
element.style.color = "red";
// 解決方法： 操作css的classname
element.className += 'newClass';
事件處理
function handleClick(event) {
var popup = document.getElementById('popup');
popup.style.left = event.clientX + 'px';
popup.style.top = event.clientY + 'px';
popup.className = 'reveal';
}
// 封裝過的事件監(jiān)聽函數(shù)
addListener(element, 'click', handleClick);
這段代碼第一個問題是事件處理程序包含了應用邏輯兵怯。
應用邏輯是和應用相關(guān)的功能性代碼，而不是和用戶行為相關(guān)的腔剂。
將應用邏輯從所有事件處理程序中抽離出來的做法是一種最佳實踐媒区。
這樣多個事件的處理程序執(zhí)行了同樣的邏輯，而你的代碼缺不用拷貝多份
將應用邏輯放置于事件處理程序中的另一個缺點是和測試有關(guān)的掸犬。
測試時需要直接觸發(fā)功能代碼袜漩，而不必通過模擬元素的點擊來觸發(fā)。
var MyApplication = {
handleClick: function (event) {
this.showPopup(event);
},
showPopup: function (event) {
var popup = document.getElementById('popup');
popup.style.left = event.clientX + 'px';
popup.style.top = event.clientY + 'px';
popup.className = 'reveal';
}
}
// 封裝過的事件監(jiān)聽函數(shù)
addListener(element, 'click', function(event) {
MyApplication.handleClick(event);
});
上述代碼還存在一個問題湾碎，即event對象被無節(jié)制地分發(fā)宙攻。
- 沒有表明哪兒些數(shù)據(jù)是必要的。好的API一定是對于期望和依賴都是透明的介褥。
- 測試這個方法時座掘，你必須重新創(chuàng)建一個event對象并將它作為參數(shù)傳入。
最佳辦法是讓事件處理程序使用event對象來處理事件柔滔，
然后拿到所有需要的數(shù)據(jù)傳給應用邏輯溢陪。
var MyApplication = {
handleClick: function (event) {
// 當處理事件時，最好讓事件處理程序成為接觸到event對象的唯一函數(shù)廊遍。
event.stopPropagation(); // 阻止事件冒泡
this.showPopup(event.clientX, event.clientY);
},
showPopup: function (x, y) {
var popup = document.getElementById('popup');
popup.style.left = x + 'px';
popup.style.top = y + 'px';
popup.className = 'reveal';
}
}
// 封裝過的事件監(jiān)聽函數(shù)
addListener(element, 'click', function(event) {
MyApplication.handleClick(event);
});
在測試或代碼的任意位置都可以很輕易地直接調(diào)用這段邏輯：
MyApplication.showPopup(10, 10);
