前端编码规范——Javascript

分享一些Javascript书写规范

1.tab键用（必须）用四个空格代替

2.每句代码后（必须）加”;”

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;
 }

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();
 }

7.（推荐）在需要以{}闭合的代码段前增加换行，如：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];
             }
         }
     }
 }