摘要：這篇文章主要內容的來源是《javascript高級程序設計第三版》，因為第二遍讀完，按照書里面的規范，發覺自己在工作中沒有好好遵守。所以此文也是對自己書寫js的一種矯正。
1、可維護性
1.1
可理解性——其他人可以接手代碼並理解它的意圖和一般途徑，而無需原開發人員的完整解釋。
直觀性——代碼中的東西一看就能明白，不管其操作過程多么復雜。
可適應性——代碼以一種數據上的變化不要求完全重寫的方法撰寫。
可擴展性——在代碼架構上已考慮到在未來允許對核心功能進行擴展。
可調試性——當有地方出錯時，代碼可以給予你足夠的信息來盡可能直接地確定問題所在。
1.2 代碼約定：
變量和函數命名
命名的一般規則如下所示:
變量名應為名詞如 car 或 person。
函數名應該以動詞開始，如 getName()。返回布爾類型值的函數一般以 is 開頭，如isEnable()。
變量和函數都應使用合乎邏輯的名字，不要擔心長度。長度問題可以通過后處理和壓縮來緩解。
變量類型透明:
// 通過初始化來指定變量的類型 var found=false; //布爾型 var count=-1; //數字 var name=''; //字符串 var array=[]; //數組
1.3松散耦合：
1.3.1、解耦HTML/javascript
就是說一些事件不要在html元素里面加onclick等來執行，而是將HTML和javascript分離，通過外部文件和使用DOM附加行為來包含javascript
1.3.2、解耦CSS/javascript
就是說盡量是通過class名來控制樣式，而不是在js里面書寫樣式。這樣如果大量用js來改樣式，維護上來說將是一場噩夢。
例如：
// bad element.style.color="red"; //good element.className="edit";
1.3.3、解耦應用邏輯 / 事件處理程序
就是說 將應用邏輯 和事件處理程序相分離 ，這樣兩者分別處理各自的東西。如下：
//bad 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"; } } } // good function validateValue(value){ var value=5*parseInt(value); if(value>10){ document.getElementById("error-msg").style.display="block"; } } function handlekeyPress(event){ event=EventUtil.getEvent(event); if(event.keyCode==13){ var target=EventUtil.getTarget(event); validateValue(target.value) } }
1.4 編程實踐
1.4.1避免全局變量：
// bad 兩個全局變量，避免 var name="Nicholas"; function sayName(){ alert(name); } // good 一個全局變量，推薦 var MyApplication={ name:"Nicholas", sayName:function(){ alert(this.name); } }
或者
// 如果變量和函數不需要在“外面”引用，可以寫一個自執行函數 (function(){ var name = 'Nicholas'; function sayName(){ alert(name); } })();
1.4.2避免與null進行比較
// bad function sortArray(values){ if(values !=null){ values.sort(comparator); } } //good function sortArray(values){ if(values instanceof Array){ values.sort(comparator); } }
2、性能
2.1注意作用域,使用全局查找要比局部查找開銷大很多
// bad
//包含了三個對於全局document對象的引用。如果很多次，影響性能
function updateUI(){
var imgs=document.getElementsByTagName('img');
for(var i=0,len=imgs.length;i<len;i++){
imgs[i].title=document.title+"image"+i;
}
var msg=document.getElementById('msg');
mgs.innerHTML="Update complete .";
}
// good
//將document對象存在本地的doc中，然后在余下的代碼中替換原來的document,只需要一次全局查找
function updateUI(){
var doc=document;
var imgs=doc.getElementsByTagName('img');
for(var i=0,len=imgs.length;i<len;i++){
imgs[i].title=doc.title+"image"+i;
}
var msg=doc.getElementById('msg');
mgs.innerHTML="Update complete .";
}
2.2 選擇正確的方法：
2.2.1. 避免不必要的屬性查找
計算機算法的復雜度使用O來表示，其中最簡單，最快捷的是O(1)。看下圖
使用變量和數組要比訪問對象上的屬性更有效率前者是O(1)的操作，后者是一個 O(n)操作，
因為對象上的任何屬性查找都要訪問變量或者數組花費更長時間，因為必須在原型鏈中對擁有該名稱的屬性進行一次搜索。簡而言之，屬性查找越多，執行時間就越長。
例如：
//快 var value = 5; var sum = 10 + value; alert(sum); // 快 var values = [5, 10]; var sum = values[0] + values[1]; alert(sum); //較慢 var values = { first: 5, second: 10}; var sum = values.first + values.second; alert(sum);
2.2.2 Switch 語句較快
如果有一系列復雜的 if-else 語句，可以轉換成單個 switch 語句則可以得到更快的代碼。 還可以通過將 case 語句按照最可能的到最不可能的順序進行組織， 來進一步優化 switch 語句
2.2.3 最小化語句數
有個地方很多開發人員都容易創建很多語句，那就是多個變量的聲明。很容易看到代碼中由多個
var 語句來聲明多個變量
然而，在 JavaScript 中所有的
變量都可以使用單個 var 語句來聲明。
但是個人傾向於第一種寫法。
//4 個語句 —— 很浪費 var count = 5; var color = "blue"; var values = [1,2,3]; var now = new Date(); //一個語句 var count = 5, color = "blue", values = [1,2,3], now = new Date(); //但是為了更好的維護，還是第一種寫法比較好。而且不會那么容易出錯。 //所以支持第一種寫法
使用數組和對象字面量
// bad //用 4 個語句創建和初始化數組——浪費 var values = new Array(); values[0] = 123; values[1] = 456; values[2] = 789; //用 4 個語句創建和初始化對象——浪費 var person = new Object(); person.name = "Nicholas"; person.age = 29; person.sayName = function(){ alert(this.name); }; // good //只用一條語句創建和初始化數組 var values = [123, 456, 789]; //只用一條語句創建和初始化對象 var person = { name : "Nicholas", age : 29, sayName : function(){ alert(this.name); } };
2.2.4 在For語句之外聲明變量
// bad // 每次迭代都需要檢查數組的長度，並且每次都要遍歷DOM樹找到container元素—效率低 for(var i = 0; i < someArray.length; i++) { var container = document.getElementById('container'); container.innerHtml += 'number: ' + i; console.log(i); } // good var container = document.getElementById('container'); for(var i = 0, len = someArray.length; i < len; i++) { container.innerHtml += 'number: ' + i; console.log(i); }
2.2.5 構建字符串的最快方式
// 這個方法比使用for更快 var arr = ['item 1', 'item 2', 'item 3', ...]; var list = '<ul><li>' + arr.join('</li><li>') + '</li></ul>';
2.3 壓縮
2.3.1 文件壓縮
原則：
刪除額外的空白（包括換行） ；
刪除所有注釋；
縮短變量名。
JavaScript 有不少壓縮工具可用其中最優秀的（有爭議的）是 YUI 壓縮器 http://yuilibrary.com/
檢測js代碼是否有錯的工具：JSLint www.jslint.com
總結下來，發覺自己平時沒有好好遵守這些規范，慢慢糾正