代碼約定
一、可讀性
- 代碼縮進(jìn)
- 包含注釋
二、變量和函數(shù)命名
- 變量名應(yīng)為名詞如car或person
- 函數(shù)名應(yīng)該以動詞開始，如getName()。返回布爾類型值的函數(shù)一般以is開頭，如isEnable()。
三、變量類型透明
1.通過初始化指定變量類型
var fonund = false; //布爾型
var count = -1; //數(shù)字
var name = ""; //字符串
var person = null; //對象
2.使用匈牙利標(biāo)記法來指定變量類型
“o”代表對象，“s”代表字符串，“i”代表整數(shù)，“f”代表浮點(diǎn)數(shù)，“b”代表布爾型。
var bFound; //布爾型
var iConunt; //整數(shù)
var sName; //字符串
var oPerson; //對象
松散耦合
一、解耦HTML/JavaScript
- 避免使用包含內(nèi)聯(lián)代碼的<script>元素或者是使用HTML屬性來分配事件處理程序。
- 避免在JavaScript中創(chuàng)建大量HTML。
二、解耦CSS/JavaScript
//CSS對JavaScript的緊密耦合
element.style.color = "red";
element.style.background = "blue";
盡量通過修改類名來改變樣式，讓大部分樣式信息嚴(yán)格保留在CSS中。
//CSS對JavaScript的松散耦合
element.className = "edit";
三、解耦應(yīng)用邏輯/事件處理程序
一個例子：
function handleKeyPress(event){
event = EventUtil.getEvent(event);
if(event.keyCode == 13){
var target = EventUtil.getTarget(event);
var value = 5 * parseInt(target.value);
if(value > 10){
document.getElementById("error-msg").style.display = "block";
}
}
}
當(dāng)按下Enter鍵，取得事件的目標(biāo)并傳遞value屬性，這是一個應(yīng)用邏輯。得到屬性之后通過判斷值來改變樣式則為事件處理。
可以重寫為：
function handleKeyPress(event){
event = EventUtil.getEvent(event);
if(event.keyCode == 13){
var target = EventUtil.getTarget(event);
validateValue(target.value);
}
}
function validateValue(value){
var value = 5 * parseInt(target.value);
if(value > 10){
document.getElementById("error-msg").style.display = "block";
}
}
從事件處理程序中分離應(yīng)用邏輯的好處：
- 可以更容易更改觸發(fā)特定過程的事件。如果最開始由鼠標(biāo)點(diǎn)擊事件觸發(fā)過程，但現(xiàn)在按鍵也要進(jìn)行同樣處理，這種更改就很容易。
- 可以在不附加到事件的情況下測試代碼，使其更易創(chuàng)建單元測試或者是自動化應(yīng)用流程。
編程實(shí)踐
一、尊重對象所有權(quán)
在企業(yè)環(huán)境中最重要的編程實(shí)踐就是尊重對象所有權(quán)，它的意思是你不能修改不屬于你的對象。如果你不負(fù)責(zé)創(chuàng)建或維護(hù)某個對象、它的對象或者它的方法，那么你就不能對它們進(jìn)行修改。
- 不要為實(shí)例或原型添加屬性；
- 不要為實(shí)例或原型添加方法；
- 不要重定義已存在的方法；
二、避免全局變量
//兩個全局變量——避免！
var URL = "zhaoyuxiang.cn";
function sayURL(){
alert(URL);
}
這段代碼包含了兩個全局變量：變量URL和函數(shù)sayURL()。其實(shí)可以創(chuàng)建一個包含兩者的對象。
//一個全局變量——推薦
var MyApplication = {
URL: "zhaoyuxiang.cn",
sayURL: function(){
alert(this.URL);
}
};
三、使用常量
一個例子：
function validate(value){
if(!value){
alert("Invalid value!");
location.href = "zhaoyuxiang.cn";
}
}
如果日后需要對URL進(jìn)行修改，都要找到函數(shù)并在其中修改代碼。而每次修改應(yīng)用邏輯的代碼，都可能會引入錯誤。可以通過將數(shù)據(jù)抽取出來變成單獨(dú)定義的常量的方式，將應(yīng)用邏輯與數(shù)據(jù)修改隔離開來。
var Constants = {
INVALID_VALUE_MSG: "Invalid value!",
INVALID_VALUE_URL: "zhaoyuxiang.cn"
};
function validate(value){
if(!value){
alert(Constants.INVALID_VALUE_MSG);
location.href = Constants.INVALID_VALUE_URL;
}
}
消息和URL都被定義于Constants對象中，然后函數(shù)引用這些值。這些設(shè)置允許數(shù)據(jù)在無須接觸使用它的函數(shù)的情況下進(jìn)行變更。Constants對象甚至可以完全在單獨(dú)的文件進(jìn)行定義，同時該文件可以由包含正確值的其他過程根據(jù)國際化設(shè)置來生成。
需要注意的值的類型如下：
- 重復(fù)值——任何在多處用到的值都應(yīng)抽取為一個常量。
- 用戶界面字符串——任何用于顯示給用戶的字符串，都應(yīng)被抽取出來以方便國際化。
- URLs——資源位置很容易變更，所以推薦用一個公共地方存放所有的URL。
- 任意可能會更改的值——每當(dāng)你在用到字面量值的時候，你都要問一下自己這個值在未來是不是會變化。如果“是”，那么這個值就應(yīng)該被提取出來作為一個常量。
（總結(jié)自《JavaScript高級程序設(shè)計》（第三版））
