前端编码规范

<h3 id="p-1">不规范写法举例

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.?..........

书写不规范的代码让我们难以维护，有时候也让我们头疼。

（禁止）、（必须）等字眼，在这里只是表示强调，未严格要求。

<h3 id="p-2">前端规范之JavaScript

1. 每句代码后（必须）加";"

?这个是要引起注意的，比如：

a = b        // 赋值
(function(){
    //....
})()         // 自执行函数

?未加分号，结果被解析成

a = b(function(){//...})()  //将b()()返回的结果赋值给a

?这是截然不同的两个结果，所以对于这个问题必须引起重视！！！

2.?变量、常量、类的命名按（必须）以下规则执行：

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

3.?在同一个函数内部，局部变量的声明必须置于顶端

因为即使放到中间，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;
}

?推荐阅读：

4.?块内函数必须用局部变量声明

// 错误的写法
 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函数

注：不同浏览器解析不同，具体请移步汤姆大叔

5.?if,else等（禁止）简写

 // 正确的书写
 if (true) {
     alert(name);
 }
 console.log(name);
 // 不推荐的书写
 if (true)
     alert(name);
 console.log(name);
 // 不推荐的书写
 if (true)
 alert(name);
 console.log(name)

6.?（推荐）在需要以{}闭合的代码段前增加换行，如：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 &amp;&amp; type == 'object') {
             Y.mix(r[p],s[p]);
         } else if (ov || !(p in r)) {
             r[p] = s[p];
         }
     }
 }
}

换行可以是空行，也可以是注释 ?

7.?（不推荐）超长函数,当函数超过100行，就要想想是否能将函数拆为两个或多个函数

?

<h3 id="p-3">小结

　　平时写代码的时候注意格式，不仅仅方便了自己，也让其他阅读者看得舒服。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!