大佬教程收集整理的这篇文章主要介绍了前端编码规范,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
<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 && 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,请注明来意。