JS前端編碼規範

轉自《前端編碼規範之JavaScript》,網址：http://www.cnblogs.com/hustskyking/p/javascript-spec.html

 

一個是保持代碼的整潔美觀，同時良好的代碼編寫格式和註釋方式可讓後來者很快地瞭解你代碼的大概思路，提升開發效率。

不規範寫法舉例

1. 句尾沒有分號

var isHotel = json.type == "hotel" ? true : false

2. 變量命名各類各樣

var is_hotel; var isHotel; var ishotel;

3. if 縮寫

if (isHotel) console.log(true) else console.log(false)

4. 使用 eval

var json = eval(jsonText);

5. 變量未定義處處都是

function() { var isHotel = 'true'; ....... var html = isHotel ? '<p>hotel</p>' : ""; }

6. 超長函數

function() { var isHotel = 'true'; //....... 此處省略500行 return false; }

7. ..........

 

書寫不規範的代碼讓咱們難以維護，有時候也讓咱們頭疼。

 

（禁止）、（必須）等字眼，在這裏只是表示強調，未嚴格要求。

前端規範之JavaScript

 1. tab鍵用（必須）用四個空格代替

這個緣由已經在前端編碼規範之CSS說過了，再也不贅述。

 

2. 每句代碼後（必須）加";"

 這個是要引發注意的，好比：

a = b        // 賦值 (function(){ //.... })()  // 自執行函數

 未加分號，結果被解析成

a = b(function(){//...})() //將b()()返回的結果賦值給a

 這是大相徑庭的兩個結果，因此對於這個問題必須引發重視！！！

 

3. 變量、常量、類的命名按（必須）如下規則執行：

　　1） 變量：必須採用駱駝峯的命名且首字母小寫

 // 正確的命名 var isHotel, isHotelBeijing, isHotelBeijingHandian; // 不推薦的命名 var is_Hotel, ishotelbeijing, IsHotelBeiJing;

　　2） 常量：必須採用全大寫的命名，且單詞以_分割，常量一般用於ajax請求url，和一些不會改變的數據

// 正確的命名 var HOTEL_GET_URL = 'http://map.baidu.com/detail', PLACE_TYPE = 'hotel';

　　3） 類：必須採用駱駝峯的命名且首字母大寫，如：

 // 正確的寫法 var FooAndToo = function(name) { this.name = name; }

 

4. 空格的使用

　　1）if中的空格，先上例子

 //正確的寫法 if (isOk) { console.log("ok"); } //不推薦的寫法 if(isOk){ console.log("ok"); }

• ()中的判斷條件先後都(必須)加空格
• ()裏的判斷先後(禁止)加空格，如：正確的寫法: if (isOk)；不推薦的寫法: if ( isOk )

　　2）switch中的空格, 先上例子

//正確的寫法 switch(name) { case "hotel": console.log(name); break; case "moive": console.log(name); break; default: // code  } //不推薦的寫法 switch (name) { // switch 後不該該有空格, 正確的寫法: switch(name) { // code case "hotel": console.log(name); break; // break; 應該和console.log對齊 case "movie": // 每一個case以前須要有換行  console.log(name); break; // break; 應該和console.log對齊 default: // code }

 　　3）for中的空格，先上例子

 // 正確的寫法 var names = ["hotel", "movie"], i, len; for (i=0, len=names.length; i < len; i++) { // code  } // 不推薦的寫法 var names = ["hotel", "movie"], i, len; for(i = 0, len = names.length;i < len;i++) { // for後應該有空格，每一個`;`號後須要有空格，變量的賦值不該該有空格 // code }

• for後（必須）加空格
• 每一個;後（必須）加空格
• ()中禁止用var聲明變量; 且變量的賦值 = 先後（禁止）加空格

　　4）function 中的空格, 先上例子

 // 正確的寫法 function call(name) { } var cell = function () { }; // 不推薦的寫法 var call = function(name){ // code }

• 參數的反括號後（必須）加空格
• function 後（必須）加空格

　　5）var 中空格及定義，先上例子

 // 一個推薦的var寫法組 function(res) { var code = 1 + 1, json = JSON.parse(res), type, html; // code }

• 聲明變量 = 先後（必須）添加空格
• 每一個變量的賦值聲明以,結束後（必須）換行進行下一個變量賦值聲明
• （推薦）將全部不須要進行賦值的變量聲明放置最後一行，且變量之間不須要換行
• （推薦）當一組變量聲明完成後，空一行後編寫其他代碼

 

5. 在同一個函數內部，局部變量的聲明必須置於頂端

由於即便放到中間，js解析器也會提高至頂部（hosting）

 // 正確的書寫 var clear = function(el) { var id = el.id, name = el.getAttribute("data-name"); ......... return true; } // 不推薦的書寫 var clear = function(el) { var id = el.id; ...... var name = el.getAttribute("data-name"); ......... return true; }

 推薦閱讀：JavaScript-Scoping-and-Hoisting

 

6. 塊內函數必須用局部變量聲明

// 錯誤的寫法 var call = function(name) { if (name == "hotel") { function foo() { console.log("hotel foo"); } } foo && foo(); } // 推薦的寫法 var call = function(name) { var foo; if (name == "hotel") { foo = function() { console.log("hotel foo"); } } foo && foo(); }

引發的bug：第一種寫法foo的聲明被提早了; 調用call時：第一種寫法會調用foo函數，第二種寫法不會調用foo函數

注：不一樣瀏覽器解析不一樣，具體請移步湯姆大叔深刻解析Javascript函數篇

 

7. （禁止）使用eval，採起$.parseJSON

 三個緣由：

• 有注入風險，尤爲是ajax返回數據
• 不方便debug
• 效率低，eval是一個執行效率很低的函數

建議：

　　使用new Function來代替eval的使用，最好就別用。

 

8. 除了三目運算，if,else等（禁止）簡寫

 // 正確的書寫 if (true) { alert(name); } console.log(name); // 不推薦的書寫 if (true) alert(name); console.log(name); // 不推薦的書寫 if (true) alert(name); console.log(name)

 

9. （推薦）在須要以{}閉合的代碼段前增長換行，如：for if

 // 沒有換行，小的代碼段沒法區分 if (wl && wl.length) { for (i = 0, l = wl.length; i < l; ++i) { p = wl[i]; type = Y.Lang.type(r[p]); if (s.hasOwnProperty(p)) { if (merge && type == 'object') { Y.mix(r[p], s[p]); } else if (ov || !(p in r)) { r[p] = s[p]; } } } } // 有了換行，邏輯清楚多了 if (wl && wl.length) { for (i = 0, l = wl.length; i < l; ++i) { p = wl[i]; type = Y.Lang.type(r[p]); if (s.hasOwnProperty(p)) { // 處理merge邏輯 if (merge && type == 'object') { Y.mix(r[p], s[p]); } else if (ov || !(p in r)) { r[p] = s[p]; } } } }

換行能夠是空行，也能夠是註釋

 

10. （推薦）使用Function進行類的定義，(不推薦)繼承，如需繼承採用成熟的類庫實現繼承

// 類的實現 function Person(name) { this.name = name; } Person.prototype.sayName = function() { alert(this.name); }; var me = new Person("Nicholas"); // 將this放到局部變量self function Persion(name, sex) { var self = this; self.name = name; self.sex = sex; }

 平時我們寫代碼，基本都是小程序，真心用不上什麼繼承，並且繼承並非JS的擅長的語言特性，儘可能少用。若是非要使用的話，注意一點：

function A(){ //... } function B(){ //... } B.prototype = new A(); B.prototype.constructor = B; //原則上，記得把這句話加上

 繼承從原則上來說，別改變他的構造函數，不然這個繼承就顯得很彆扭了~ 

 

11. (推薦)使用局部變量緩存反覆查找的對象(包括但不限於全局變量、dom查詢結果、做用域鏈較深的對象)

 // 緩存對象 var getComment = function() { var dom = $("#common-container"), // 緩存dom appendTo = $.appendTo, // 緩存全局變量 data = this.json.data; // 緩存做用域鏈較深的對象  }

  

12. 當須要緩存this時必須使用self變量進行緩存

// 緩存this function Row(name) { var self = this; self.name = name; $(".row").click(function() { self.getName(); }); }

 self是一個保留字，不過用它也不要緊。在這裏，看我的愛好吧，能夠用_this, that, me等這些詞，都行，可是團隊開發的時候統一下比較好。

 

13. （不推薦）超長函數, 當函數超過100行，就要想一想是否能將函數拆爲兩個或多個函數