代碼約定
一嘀趟、可讀性
- 代碼縮進
- 包含注釋
二、變量和函數(shù)命名
- 變量名應為名詞如car或person
- 函數(shù)名應該以動詞開始涂邀，如getName()肩豁。返回布爾類型值的函數(shù)一般以is開頭，如isEnable()凉泄。
三躏尉、變量類型透明
1.通過初始化指定變量類型
var fonund = false; //布爾型
var count = -1; //數(shù)字
var name = ""; //字符串
var person = null; //對象
2.使用匈牙利標記法來指定變量類型
“o”代表對象，“s”代表字符串后众，“i”代表整數(shù)胀糜，“f”代表浮點數(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";
盡量通過修改類名來改變樣式，讓大部分樣式信息嚴格保留在CSS中。
//CSS對JavaScript的松散耦合
element.className = "edit";
三悄窃、解耦應用邏輯/事件處理程序
一個例子：
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";
}
}
}
當按下Enter鍵讥电，取得事件的目標并傳遞value屬性，這是一個應用邏輯轧抗。得到屬性之后通過判斷值來改變樣式則為事件處理恩敌。
可以重寫為：
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";
}
}
從事件處理程序中分離應用邏輯的好處：
- 可以更容易更改觸發(fā)特定過程的事件。如果最開始由鼠標點擊事件觸發(fā)過程鸦致，但現(xiàn)在按鍵也要進行同樣處理潮剪，這種更改就很容易。
- 可以在不附加到事件的情況下測試代碼分唾，使其更易創(chuàng)建單元測試或者是自動化應用流程抗碰。
編程實踐
一、尊重對象所有權
在企業(yè)環(huán)境中最重要的編程實踐就是尊重對象所有權绽乔，它的意思是你不能修改不屬于你的對象弧蝇。如果你不負責創(chuàng)建或維護某個對象、它的對象或者它的方法折砸，那么你就不能對它們進行修改看疗。
- 不要為實例或原型添加屬性；
- 不要為實例或原型添加方法睦授；
- 不要重定義已存在的方法两芳；
二、避免全局變量
//兩個全局變量——避免去枷！
var URL = "zhaoyuxiang.cn";
function sayURL(){
alert(URL);
}
這段代碼包含了兩個全局變量：變量URL和函數(shù)sayURL()怖辆。其實可以創(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進行修改竖螃，都要找到函數(shù)并在其中修改代碼。而每次修改應用邏輯的代碼逗余，都可能會引入錯誤特咆。可以通過將數(shù)據(jù)抽取出來變成單獨定義的常量的方式录粱，將應用邏輯與數(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ù)據(jù)在無須接觸使用它的函數(shù)的情況下進行變更荒叶。Constants對象甚至可以完全在單獨的文件進行定義，同時該文件可以由包含正確值的其他過程根據(jù)國際化設置來生成输虱。
需要注意的值的類型如下：
- 重復值——任何在多處用到的值都應抽取為一個常量。
- 用戶界面字符串——任何用于顯示給用戶的字符串脂凶，都應被抽取出來以方便國際化宪睹。
- URLs——資源位置很容易變更愁茁，所以推薦用一個公共地方存放所有的URL。
- 任意可能會更改的值——每當你在用到字面量值的時候亭病，你都要問一下自己這個值在未來是不是會變化鹅很。如果“是”，那么這個值就應該被提取出來作為一個常量罪帖。
（總結自《JavaScript高級程序設計》（第三版））
