最近辭職了，准備北上。期待有個好結果~
本文以《Javascript高級程序設計》為基礎，結合自身經驗來總結下Javascript實際工作方面的知識。
一、可維護性
1、代碼約定
1.1: 可讀性
這里面主要包括 縮進和注釋
縮進:使用統一的縮進（推薦4個空格）
注釋:
在下面情況中，應該包含注釋
1、函數和方法都應該包含注釋，這里面包括函數的目的和可能使用的算法。如果還包括參數是什么，返回值是什么就更好。
2、對於完成單個任務的大段的代碼需要在前面放一個注釋來解釋代碼的作用。
3、如果使用了復雜的算法則需要注釋來解釋。
4、Hack代碼一定要寫注釋，否則別人會以為是沒用的代碼，然后刪除掉。
1.2: 變量和函數命名
首先要避免毫無意義的命名（例如a、x、doSomething這些），這里提供一些推薦的命名方法
1、變量名應該為名詞，例如car、person等。
2、函數名以動詞開始，如getName();返回boolean的函數一般以is開頭，如isPerson();
3、變量名應該使用合乎邏輯的名字，不必擔心長度，長度問題可以用壓縮來解決。
1.3: 變量類型透明
因為在Js里面，變量是松散類型的，很容易忘記變量的類型是什么。
建議初始化的時候給予一個初始值來表明變量類型。
2、松散耦合
2.1: 結構-表現-行為的分離。
具體來說就是避免在html中寫css和js（內聯style、事件屬性等）。
避免在css中使用表達式。
避免在js中動態創建大量html（使用模板），設置樣式（使用增加css類的方法）
2.2解耦事件和應用邏輯。
大家通常會在一個事件里面把邏輯全寫完，例如
element.onclick = function(){ // do something // some other code // some other code }
這里假設函數里面有大量的邏輯，這么寫也是很普遍的寫法，但這有兩個致命點
1，如果不觸發事件，如果執行邏輯？
2，如果另外一個事件也會執行相應的邏輯，那么是不是只能復制一遍里面的代碼了。
所以，一個更好的方法是把里面的大量邏輯封裝到一個方法中。
解耦事件和應用邏輯的原則：
1，不要將event對象傳遞給方法，只傳來自event對象的數據。
2，任何可以在應用層面的動作都應該可以在不執行事件的情況下進行。
3，任何事件處理程序都應該處理事件，然后將處理轉交給應用邏輯。
3: 編程實踐
3.1: 不要修改自己無法控制的對象。
可以使用下面方法為對象創建新的功能。
1、創建新的對象，為這個對象添加屬性和方法。
2、創建自定義類型，繼承需要修改的那個類型。在自定義類型上擴展方法。
3.2: 避免全局變量。
創建一個全局變量，其余變量都當作這個全局對象的屬性或方法。
單一全局變量引申出來便是命名空間的概念。
可以使用一個全局對象，之后所有對象都隸屬於它。通常可以用公司名來創建，例如：
var BAIDU = {}; BAIDU.util = {}; BAIDU.util.cookie = {...};//用於處理cookie相關
3.3: 使用常量把數據從業務邏輯中分離出來。
常見的比如 接口的url、表單的錯誤文字等。
分離之后為后續的修改或者國際化都提供了便捷。
以下幾種情況是很需要分離的
1、重復值 - 重復多次的值應該抽取出來，這樣后續修改起來方便，也避免了漏改的情況。
2、用戶界面字符串 - 為以后國際話做鋪墊。
3、URLs - url改變后可以快速修改
4、任何可能會改變的值 - 每次用到字面量的時候，問下自己這個值以后是否會改變，如果會，那么應該提出出來作為一個常量。
二、性能
1、注意作用域
在一個函數中將多次用到的全局變量保存為局部變量。
2、避免使用with語句
3、訪問數組比訪問對象快，減少查找對象屬性的次數。如果可以用數字位置和命名屬性訪問，那么用數字。例如:
var img = document.getElementsByTagName("img");
img[0] //使用這種方式訪問第一個img
4、避免顯示或者隱示的調用eval，比如說直接用eval或者在setTimeout中傳入字符串
5、使用原生的方法，比如求一個數的平方，那么用Math對象提供的方法更快。
6、switch比復雜的if-else要快，而且switch按照最可能和最不可能的順序排列可以進一步優化switch
7、使用單個的var來聲明所有變量可以加快速度。
8、var name = values[i]; i++; 可以優化成 var name = values[i++];
9、最大程度減少對DOM的操作。比如要插入很多條列表，可以先在js中拼裝好，然后插入一次。使用innerHTML比appendChild要快。
10、使用事件委托。
11、
減少對NodeList對象的訪問，因為每次訪問都會實時查詢。這里面可以引申出緩存jquery對象。例如
var images = document.getElementsByTagName("img");
for(var i = 0, len = images.length; i < len ; i++){}
這里使用len保存images.length，就避免了每次判斷的時候訪問images的length屬性。
然后這里使用了images保存document.getElementsByTagName("img");也避免了之后每次的查找。
三、部署
1、構建過程
開發時把js分成多個文件，以提高維護性。發布時通過構建工具，合並代碼。
2、驗證
構建工具中可以加入驗證工具，如jslint
3、壓縮
3.1 文件壓縮（減少代碼長度）
一般有這些操作，刪除空白、刪除注釋、縮短變量名
3.2 HTTP壓縮（減少傳送字節數）
一般通過設置web服務器用gzip壓縮。所有瀏覽器都可以解壓gizp的。
轉載本站文章請注明作者和出處
奇葩一朵朵 – http://www.cnblogs.com/season-huang/ ，請勿用於任何商業用途