對於開發人員來說，編寫高質量的程式碼是有很重要的意義的，特別是在團隊協作裡。本篇博文從前端開發的角度，總結出編寫高質量前端程式碼的一些經驗。前端開發涉及的主要語言包括html,css,js等。這裡主要針對JS來介紹。

編碼思維

1. 邏輯思維

當接到某個任務的時候，不要急於開始動手，而是先靜下心來思考，理清這個任務要實現的功能，這個功能用在什麼場景下，將來是否會複用，如果將來會變化，可能會怎樣變化。要怎麼設計利於功能的擴充套件和優化，可能會出現哪些問題，如何規避問題。這些都是在前期動筆前需要思考清楚的，不然到後面開發的時候可能會不停的修改，最終效率越來越低。一個功能有著良好的執行邏輯，才不會容易出錯。當然如果時間不允許，或是隻上一次就廢棄的功能，此時效率可能會優先考慮。

通常專業的設計師，在設計網頁的時候會使頁面保持相同的風格，相似的模組同質性很高，這些在我們開發的時候，對複用性較高的程式碼定義成公共的模組或元件。甚至我們在接到設計稿的時候，對於差異較大但是功能類似的頁面提出疑問，提醒視覺保持統一。

有良好的邏輯思維能力和豐富的工作經驗能使我們想的更深更遠。對寫程式碼保持強烈的熱情跟好奇心，多看多讀，有些程式碼晦澀難懂，比如複雜的演算法或是新的概念，沒關係，第一次看了瞭解，第二次看了就熟悉，第三次可能就精通了，堅持學習和吸收新的知識，有助於我們更好的瞭解需要開發的功能，磨練自己的邏輯思維，增加解決問題的辦法。

2. 優化思維

對於自己寫過的程式碼持懷疑態度，追求完美的程式碼。何為完美，每個人的標準不一樣。對於自己寫過的程式碼，寫完後想想整個的流程，是否還有值得優化的地方。儘量用最簡潔的程式碼來實現，比如用三元運算子代替if語句，重複的程式碼提取成方法，重用的功能寫成一個元件等等。對於寫的不好的程式碼要有重構的勇氣和信心。

在開發的過程中，還時時需要考慮頁面的效能，選擇效能最好的解決方案。比如JS少用全域性變數，用完後及時銷燬，合理使用閉包，避免頻繁操作DOM節點，大量的計算等，HTML程式碼的SEO優化，樣式的合理組織等，開發完後通過firebug或chrome自帶的除錯工具檢視頁面載入的速度，資源大小等，然後有針對性的優化。

3. 設計思維

作為一名前端開發，懂點設計的基礎是很有必要的。前端的設計是指一個畫面或元素，如何在不同的瀏覽器，不同的裝置上被建立，顯示，或刪除。我們除了直接跟設計師打交道外，還直接面向用戶，做好響應式的設計與開發，從使用者的角度出發，客觀的評價設計稿所傳達的資訊，是否體驗最優，就是我們前端的設計思維。設計的思維，會直接影響我們寫程式碼的結構。

JS程式碼規範

2.1變數

使用合理易於理解的英文變數名稱，變數命名的風格統一，比如都用駝峰命名法，區域性變數名儘量簡短。NEJ裡的規範，區域性變用介面內區域性變數或者傳遞的引數用_來量表示，如_type,_index等。物件外可訪問的介面或者屬性，用_$開頭，_$$表示類物件等。

宣告變數必須加上 var 關鍵字.當你沒有寫 var, 變數就會暴露在全域性上下文中, 這樣很可能會和現有變數衝突。變數需先聲明後使用，防止變數提升。

另外常量名字都用大寫。

2.2方法

JS面向物件開發中公有介面命名首字母為大寫，私有介面命名首字母小寫。事件的命名用動詞+名詞+動詞的方式，方法名具有語義化，儘量完整。如：onExchange,doExchange,cbExchange等。邏輯操作符 || 和 && 可被用來返回布林值，簡化程式碼。

3.程式碼註釋

程式碼加上合理的註釋，提高可讀性。例如對於某個功能的簡介，或者變數的特殊含義和用處。每個JS檔案頭部說明下作者，日期，檔案介紹等。

/**
* KJ-13989 組團買好貨
* author liuhuanchao
* 2015-12-09
*/

/**
 * 介面函式的說明
 * 引數說明
 */
/**
  * 空閒控制 返回函式連續呼叫時，空閒時間必須大於或等於 wait，func 才會執行
  *
  * @param {function} func    傳入函式
  * @param {number}  wait    表示時間視窗的間隔
  * @param {boolean} immediate  設定為ture時，呼叫觸發於開始邊界而不是結束邊界
  * @return {function}       返回客戶呼叫函式
  */

當你寫註釋時一定要注意：不要寫你的程式碼都幹了些什麼，而要寫你的程式碼為什麼要這麼寫，背後的考量是什麼。對於檔案的修改，也可以在註釋里加上相關的任務號。

4.語句結束時新增分號

記得語句結束時使用分號。如果僅依靠語句間的隱式分隔, 有時會很麻煩。而且新增分號也利於程式碼的理解。

5.不要在塊內宣告一個函式，使用函式表示式來定義函式

不要寫成:

if (x) {
  function foo() {}
}

if (x) {
  var foo = function() {}
}

(function(){
    //do some thing
})()

var configInfos ={
        remindType:${remindType!2},
        totalPoint:${pointTotalCount!0},
        isSigned:"${isSigned?string('yes','no')}"
    }

而後通過configInfos.remindType獲取到remindType值。這樣可以減少全域性變數的個數，避免變數衝突。

7.使用單引號定義字串。

ftl檔案中用雙引號，JS中用單引號。

8.使用簡化的編碼方式。

如物件和陣列的宣告，三元操作符等。

var a = [],obj={};

9.避免使用with語句。

該語句在設計上就有缺陷，在ES5和ES6上也存在潛在相容問題。對效能也有很大影響。

10.避免使用eval。

存在潛在安全問題，在需要使用eval的場景中應當儘量使用其它方法代替。

11.事件處理和業務邏輯分離，資料和程式碼邏輯分離。

現在使用的RegularJs框架正是實現了資料與程式碼邏輯的分離。

12.結構樣式與邏輯分離

CSS樣式分離，將多個樣式放置在class中後控制class的增刪，通過掛靠樣式名來改變樣式。避免在JS中對元素操作大量的style來改變樣式。

_e._$addClassName(this.__passWord,'u-ipt-login-active');

13.合理定義互動元素的樣式名

在JS中，可以通過獲取元素的className,id,或元素名來操作DOM節點。如果是頁面上固定的節點，則可以通過給元素掛靠'ztag','j-flag'等樣式名。這些名字不需要帶任何樣式。避免用大量的id來獲取元素。如果是通過判斷來顯示的元素，則可以通過ID來獲取。

pro.__getNodes = function(){
        var _node = _e._$getByClassName(document.body,'ztag'),i=0;
        this.__aboutWrap = _node[i++];
        this.__goodsDescWrap = _node[i++];
        this.__fixedBtn = _node[i++];
        this.__payBtn = _node[i++];
    };

14.程式碼格式化

15.理解 JavaScript 的定義域和定義域提升，提前宣告變數

在 JavaScript 中變數和方法定義會自動提升到執行之前。JavaScript 只有 function 級的定義域，而無其他很多程式語言中的塊定義域，所以使得你在某一function 內的某語句和迴圈體中定義了一個變數，此變數可作用於整個 function 內，而不僅僅是在此語句或迴圈體中，因為它們的宣告被 JavaScript 自動提升了。所以一般在函式開頭先宣告好變數。避免變數在定義前被使用，導致報錯。

16.合理使用AJAX技術

明確AJAX技術的使用場景，在AJAX過程中做好使用者的互動，如禁用按鈕避免重複觸發、顯示載入進度條等。

17.記憶體回收

全域性物件或物件的屬性使用完後，將值設為null或undefined，或者某個例項化的元件，使用後及時解除引用(recycle或destroy方法)，解除已經不需要的事件監聽(delEvent)，不要在函式內返回外部不需要的物件等。這些操作利於瀏覽器的回收程式執行時能回收其佔用的記憶體。

18.使用高效能的變數或屬性值的讀取方式

for(var i=0,len=number.length;i<len;i++){}

變數涉及作用域鏈查詢的過程，屬性涉及原型鏈查詢的過程，定義成區域性變數可以節約查詢的時間。

19.高效的DOM操作

20.增加容錯處理

例如給變數或屬性設定預設值，對某段程式碼使用try,catch操作。

21.程式碼注意安全性

常見的Web前端攻擊方式有XSS Cross Site Scripting 跨站點指令碼攻擊，CSRF Cross Site Request Forgery 跨站請求偽造，介面操作劫持等。我們需要注意的是不輕信任何使用者輸入的內容，針對使用者輸入的內容進行HTML編碼、JavaScript編碼、CSS編碼、URL編碼等。對使用者表單提交的資料做完整的驗證。

22.移動端開發注意點

使用流式佈局。使用合適的圖片顯示相容方案。使用移動平臺特有事件處理如手勢操作。增加連結按鈕的可操作區域，如安卓開發規範中保證這些控制元件的高度至少有48px間隔至少有32px等。

23.程式碼檢查,code review

24.ftl裡程式碼優化

ftl裡避免在JS中填充大量的資料，尤其是像列表資料，不利於優化。如果確實需要，在JS獲得資料後刪除該節點。

其他注意點

1.提前設計

提前規劃設計好，從全域性角度規劃程式碼的結構。保證程式碼精簡，寫完某個功能後重新思考下整個流程，是否可以優化，方向有沒有寫錯。

我記得剛開始寫程式碼的時候，某個功能寫到某一步的時候，發現寫不下去了，這個時候只能重新換個思路，推倒之前的程式碼重新寫。這就是沒有提前規劃好思路，急於下筆，導致浪費了很多時間。

2.前端程式碼重構注意事項

拿到設計稿後，規劃好結構，先寫完html程式碼，最後再補充完整的樣式，這樣效率最高。邊寫邊調是很浪費時間的。