Web前端   发布时间:2019-10-13  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了前端编码规范大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。

<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 &amp;&amp; foo();

}

// 推荐的写法
var call = function(name) {
var foo;

 if (name == "hotel") {
     foo = function() {
         console.log("hotel foo");
     }
 }

 foo &amp;&amp; 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">小结

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

大佬总结

以上是大佬教程为你收集整理的前端编码规范全部内容,希望文章能够帮你解决前端编码规范所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。
标签: