前端js一些規範

記住，你今天不是給本身寫代碼，而是爲明天的後來人寫代碼。

前端代碼須要遵照如下幾點方面進行開發。

      1 可維護性 任何接手工做的前端，保證能在短期內可以對項目有必定的認識，可以儘快的投入開發工做。
      2 可測試性 頁面的js代碼須要本身寫寫測試代用例進行測試，確保質量。
      3 高性能：保證代碼的性能，不能出現佔用cpu太高的狀況
      4 低體積：不要重複代碼，若是原有類似的功能，進行代碼重構，避免代碼直接複製而致使之後維護比較難的狀況。

須要遵照一些下面的規則：

      代碼的可讀性：採用一致的寫法。命名規範化。代碼結構良好，註釋清楚。每次寫完代碼須要對代碼進行下格式化。
      不重複：不復制，不重複代碼，有類似功能對代碼進行重構，並通知原做者。重構時每次須要註釋寫明：重構緣由，重構做者，日期，以及代碼的測試文件
      代碼高內聚，低耦合：在js文件中儘可能少使用元素的id，class尋找元素，方便之後對html進行重構。

對於jsLint的使用要求：
處理級別：(待補充)

代碼是否使用strict mode，何時使用（待補充）

代碼可讀性說明：

代碼縮進：使用tab進行縮進
語句結尾：使用分號進行語句結尾
行長度：一行不要超過80個字
空行的使用：通常來講代碼要像一個文章，有段落性，有條理性，而不是一大段文字的組合。建議使用空格的地方包括有：
     1 在方法之間
     2 在方法中的局部變量和第一條語句之間。
     3 在多行或單行註釋之間
     4 在方法內的邏輯片斷之間插入空行，提升可讀性。

命名

由於js是弱類型語言，因此須要在聲明變量名稱時候進行變量類型前綴說明。譬如使用string 就以s開頭 var sName = "fly",arr以a開頭 var aNumbers = [1,2,3];

　　一、駱駝命名法。從第二個字符串開始，每一個字符都大寫 aVeryLongVaribleName
　　二、js裏面的僞常量，所有用大寫，加下劃線組成。好比：MAX_VALUE=10 //定義一個10的常量
　　三、構造函數，用new產生的構造函數，首字母大寫。好比new Person（）
　　四、函數的命名
　　　　can has is get set

數字

顯示建立對象和數組
　　一、避免使用new Function（）來建立對象，而使用{}直接量來定義對象
　　二、避免使用new Array（）來建立數組，而使用[]來定義數組
　　三、由此，能夠推出，避免使用new String（）來建立字符，用「」來直接建立（這點你們比較清楚）

註釋的使用
　　這一要求算是最基本的，這有利於在方法調用處看到方法的具體傳參提示，也能夠利用配套文檔工具生成html或其它格式的開發文檔供其餘團隊成員閱讀，你能夠嘗試使用jsdoc-toolkit。若是你自動生成的API是出自一個開放平臺，就像facebook.com應用，那麼你的文檔是給天下全部開發者看的。另外編寫完整註釋，也更方便團隊成員閱讀你的代碼，經過你的參數描述，團隊成員能夠很容易知道你編寫的方法傳參與實現細節。固然也方便往後代碼維護，這樣即便再大的項目，過了很長時間後，回去改點東西也就不至於本身都忘記了當時本身寫的代碼是怎麼一回事了。

單行註釋

多行註釋

　　什麼時候添加註釋：當代碼不是很明瞭的時候添加註釋。而當代碼很明瞭的時候添加註釋就不必了。

　　當使用文檔註釋時候，應確保對以下內容添加註釋描述。

全部的方法
　　全部的構造函數
　　全部包含文檔化方法的對象


語句的可讀性

　　花括號的使用：花括號的對齊方式，將大括號放置在快語句中第一句代碼的末尾。
　　switch語句的 default語句 若是沒有須要處理的，就直接進行省略
　　for循環語句中，不要把獲取數組長度的方法放到 條件裏邊，譬如 for(var i = 0 ;i < arr.length;i++) 而寫成 for(var i = 0, l = arr.length; i < l; i++ )


函數聲明
　　推薦函數的使用老是放到函數聲明之後。這樣查找起來比較方便。
　　對於當即調用的函數，爲了讓當即執行的函數可以被一眼看出來，須要將函數用一對圓括號包起來。

嚴格模式 strict mode
　　"use strict";須要最好不要放到全局中，若是但願在多個文件中應用嚴格模式而沒必要寫不少行「use strict」，則使用當即調用的方式。



編程實踐

·UI層的鬆耦合
　　將javascript從css中抽離 在css中使用表達式（IE9現已不支持,低版本IE系列仍是支持的）
　　將css從javascript中抽離 若是須要修改樣式，則經過修改class 進行改變
　　將javascript從html中抽離
　　　　1 不在元素中添加事件處理
　　　　2 不在頁面中直接書寫javascript執行代碼（一種例外就是當後臺直接傳值到頁面上時，而js沒法解析時候則不得不寫在頁面上了）
　　將html從javascript中抽離
　　使用模板,譬如mustache

避免使用全局變量
　　1 全局變量帶來的問題
　　命名衝突
　　代碼的脆弱性
例如：
　　var color = "#fff";
　　function sayColor(){
　　　　alert(color);
　　}

　　當color不存在，未聲明時候則直接會報錯，而若是寫成

　　fuction sayColor(color){
　　　　alert(color);
　　}

　　測試困難
　　　　確保函數不會對全局變量有依賴，將加強代碼的可測試性。

　　意外的全局變量，當在函數中有變量的聲明時候未使用var聲明時候則變爲了全局變量

　　單全局變量方式

　　命名空間
　　　　var YUI = {};
　　　　YUI.a = {}
　　　　YUI.b = {}

　　模塊
　　　　define("modeules",function(){

　　　　})

零全局變量

　　var f = (function(){
　　　　//執行代碼
　　})()

避免"空比較"

將配置數據從代碼中分離出來
抽離配置數據 保存配置數據到一個單獨的文件中


拋出自定義錯誤


權衡代碼的簡潔性和可讀性

拋出自定義錯誤
在javaScript中拋出錯誤

若是沒有經過try-catch語句進行捕獲，拋出任何值都將引起一個錯誤。針對全部瀏覽器，惟一不出差錯的系那是自定義的錯誤消息的方式就是用一個Error對象。

 

拋出錯誤的好處：
　　拋出本身的錯誤可使用確切的文本供瀏覽器上顯示。除了行和列的號碼，還能夠包含任何你須要的有助於調試的信息。
　　推薦老是在錯誤消息中包含函數名稱以及函數失敗的緣由。

譬如：

　　function getDivs(element){
　　　　if(element && element.getElementsByTagname){
　　　　　　return element.getElementsByTagName("div");
　　　　}else{
　　　　　　throw new Error("getDivs():Argument must be a DOM element.")
　　　　}
　　}

什麼時候拋出錯誤：
經驗法則：
　　一旦修復了一個很難調試的錯誤，嘗試增長一兩個自定義錯誤。當再次發生錯誤時，這將有助於更容易的理解和解決問題。
　　若是正在編寫代碼，思考一下："我但願某些事情不會發生，若是發生，個人代碼會一團糟"。這時，若是"某些事情"發生，就拋出一個錯誤。
　　若是正在編寫的代碼別人也會使用，思考下他們使用的方式，在特定的狀況下拋出錯誤。

牢記，咱們的目的不是防止錯誤，而是在錯又發生時可以更加容易的調試。


try-catch:
　　javascript提供了try-catch語句，它能在瀏覽器處理拋出的錯誤以前來解析它。可能引起錯誤的代碼放在try塊中，處理錯誤的代碼放在catch塊中。

使用throw仍是try-catch(待補充)

　　在JavaScript中throw error是一門藝術。在代碼中找到適當的throw error的地點會花費一些時間。不過一旦你找到了這些地點，你的調試時間就會大大下降，而你對代碼的滿意度會得到提高。

      參考書籍 ： 編寫可維護的javascript