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行，就要想一想是否能将函数拆为两个或多个函数