JS规范2
百度SS Javascript编码规范
1、变量、方法命名必须匹配正则:/^[$_a-zA-Z]\w*$/
/**
* 虽然Javascript引擎支持多种格式命名的变量,
* 比如下面这样的变量,Javascript引擎依然能正常解析
* 但是,禁止这样定义!
*/
var \u0041 = "A"; //最终会被解析为:var A = "A";
var 中国 = "中国"; //以中文命名的变量
2、变量命名不能用关键字、保留字
/**
* Javascript关键字列表
*/
[
"break", "case", "catch", "const", "continue",
"default", "delete", "do", "else", "finally",
"for", "function", "if", "in", "instanceof",
"new", "return", "switch", "throw", "try",
"typeof", "var", "void", "while", "with",
"false", "true", "null", "undefined"
] /**
* Javascript保留字列表
*/
[
"abstract", "boolean", "byte", "char", "class",
"debugger", "double", "enum", "export", "extends",
"final", "float", "goto", "implements", "import",
"int", "interface", "long", "native", "package",
"private", "protected", "public", "short", "static",
"super", "synchronized", "throws", "transient", "volatile"
]
3、正则的修饰符只能是[i、g、m]组合
/**
* 下面的这个正则表达式修饰符不合法,只能有igm组成,或者无
*/
var reg = /\d/abcdigm; //修饰符“abcdigm”不合法 //应该改为:
var reg = /\d/igm;
4、数组字面量和json(object字面量)的最后一个item后,不能有多余的逗号“,”
/**
* 下面这个数组定义是不合法的,
* 数组最后一项“3”后多了一个逗号“,”
* 在IE下会报错
*/
var arr = [1,2,3,]; //数组最后一项“3”后多了一个逗号“,” //应该改为:
var arr = [1,2,3]; /**
* 下面这个json定义是不合法的,
* json字面量的最后一个key,不能有多余的逗号“,”
* 在IE下会报错
*/
var obj = {
a : "a",
b : "b", //这是json字面量的最后一个key,不能有多余的逗号“,”
}; //应该改为:
var obj = {
a : "a",
b : "b"
};
5、json字面量的key不能是javascript关键字或保留字
/**
* 下面的json定义是不合法的,因为采用了javascript关键字作为key
* 这在IE下会报错,YUI压缩时也会报错
*/
var obj = {
var : 1 //这在IE下会报错
}; //改成如下格式可以被正确解析,但依然不推荐这样做
var obj = {
"var" : 1
};
//因为在IE下,如果通过如下方式获取该值,依然会报错
var value = obj.var; //error!
//改为下面形式可以正确解析
var value = obj["var"];
6、从json(object字面量)中获取value时,如果key为关键字或保留字,禁止用“obj.key”的方式
/**
* 如果有json对象为:obj = {float:1},
* 在代码中要获取obj对象的float字段内容,不能通过obj.float的方式获取,
* 这在YUI压缩的时候会报错
*/
var obj = {
float : 1
};
var value = obj.float; //这在YUI压缩时直接报错 //如果真有这样的case,应该改成这样:
var obj = {
"float" : 1
};
var value = obj["float"]; //PS:虽然上面的方式可以正确的通过编译,在各种浏览器中叶能正确的解析,但是依然不推荐使用!
//json参考文档:http://www.json.org/
7、禁止在代码中出现仅IE支持的注释
/**
* 仅IE支持的javascript条件注释,是以"/ * @"开始,以"@ * /"结束的,
* 比如下面的注释,在代码中严格禁止
*/ /*@cc_on alert(4 - @*/ 3 /*@)@*/
//上面的这段注释,在IE浏览器中,将会被解释为:alert(4 - 3),最终alert(1)
//而在其他浏览器中,会得到:3
8、function的定义方式
/**
* 只允许出现如下三种形式的function的定义
*/
//方式一:
function funcName(){
//TODO
} //方法二:
var funcName = function(){
//TODO
}; //注意,这里必须加分号“;”具体原因请看第13条关于分号“;”的解释 //方式三:(同二)
ClassA.xxx = function(){
//TODO
}; /**
* 下面这样的定义方式是禁止的
*/
var funcName = function funcName2(){
//TODO
};
//上面这样的定义,仅IE中会认为funcName和funcName2都存在,
//FireFox、Chrome中仅你能解释funcName,而funcName2不存在 /**
* 在IE里,var foo = function foo2(){}
* foo2能被外部访问是IE的bug,且foo !== foo2,在IE6/7/8/9中的确不建议这么使用它。
* 但是ES5中取消了arguments.callee,当使用use strict模式,这就意味着任何需要使用递归的地方都需要这么定义才能保证函数的安全性
*/
9、禁止在行尾用“\”来拼接字符串
/**
* 在行尾通过“\”的方式拼接字符串,在YUI压缩的时候,
* 下一行开头的一片空白会被解析为正常的字符,而造成无法被压缩的现象!
* 另外,下一行的空白字符在非IE浏览器中,会被当成TextNode而占位解析!
* 影响页面布局
*/
var str = '<div>\
<div class="header"></div>\
<div class="body"></div>\
<div class="footer"></div>\
</div>'; //一种比上面稍微好点儿的办法,是多个字符串“+”连接
//但是这种方法会创建多个字符串常量,每次执行“+”操作都会创建新的常量
//从而影响性能
//uglifyjs会将多个字符串常量的加法优化成一个字符串常量
var str = '<div>' +
'<div class="header"></div>' +
'<div class="body"></div>' +
'<div class="footer"></div>' +
'</div>'; //最好的大字符串拼接方法,是通过数组join方式
var str = [
'<div>' ,
'<div class="header"></div>' ,
'<div class="body"></div>' ,
'<div class="footer"></div>' ,
'</div>'
].join(""); /*
* 关于字符串拼接,High performance Javascript 第五章已经对join和+情况作了对比说明。
* join只在ie7或以下会更快,所以这个优化也许应该根据浏览器使用统计来定吧
* 另可参见http://jsperf.com/string-concatenation-plus-vs-join
*/
10、禁止在代码中使用标签(label)
/**
* 标签一般配合goto,break,continue进行使用!
* 但是使用标签,会让程序的逻辑变得混乱,所以程序中极端不推荐!
* 比如下面的这段代码:
*/
label_1 : for(var i = 0;i < 3;i++){ //这里声明了label_1标签
//TODO...
label_2 : for(var j = 0;j < 3;j++){ //这里声明了lable_2标签
if(i * j > 6) {
break label_2;
}else if(i * j > 4){
continue label_1;
}else{
alert(i * j);
}
}
}
11、代码中避免使用void、eval、with
/**
* void表示某个方法或表达式无返回值!
* 虽然javascript引擎能正常解析,但是完全不推荐这样使用!
* 比如下面的这几个例子:
*/
//这里表示方法无返回值
var funcName = void function(){
//TODO...
}; //这里表示表达式无返回值
var returnValue = void ( 2 > 1);
var array = void [1,2,3]; //还有别的使用场景,不再穷举!不推荐使用! /**
* eval方法,是把一个字符串当作一个js表达式一样去执行它。
* 在IE中,可以通过下面的方式获取一个DOM节点。
* 但程序中不推荐使用eval
*/
var dom = eval("DomId"); /**
* with语句:为一个或一组语句指定默认对象,通常用来缩短特定情形下必须写的代码量。
* 程序中不推荐使用with块
*/
12、禁止在return、continue、break、throw语句后写无法被执行到的代码
/**
* return、continue、break、throw这些语句都会作为一个程序块的最后一句代码来执行。
* 比如,下面这样的代码都是禁止出现的!
*/
for(var i = 0;i < 10;i++){
if(i % 2 === 0){
continue;
alert(i); //这句代码永远都不可能被执行到!
}else if(i % 3 === 0){
break;
alert(i); //这句代码永远都不可能被执行到!
}else if(i % 5 === 0){
throw new Error("error!");
alert(i); //这句代码永远都不可能被执行到!
}
alert(i * 2);
}
13、正确断句,正确使用分号
/**
* javascript引擎会自动的在语句结束的地方插入分号,然而,ECMAScript中也明确的解释到:
* 空语句,变量语句,表达式语句,do-while 语句,continue 语句,
* break 语句,return 语句,以及 throw 语句,这些确定的ECMAScript语句必须以分号结束。
*
* 看下面的例子,return后自动被插入分号造成的问题:
*/
function funcName(){
var i = 1,j = 2;
return //这个地方会被自动插入分号
(
i + j
);
}
alert(funcName()); //结果为“undefined” //修改的办法可以是这样:
function funcName(){
var i = 1,j = 2;
return (
i + j
);
} /**
* 通过var定义function,function必须以“};”结束,否则,如果在function的定义之后紧跟着一个闭包,
* 就会出现很严重的后果。
* 比如下面的例子:
*/
var funcName = function(){
//TODO
} //这里是不可能被自动插入分号的
(function(){ //当上面的function结束标准"}"遇到了这里的"(",就会视为要执行这个function
//TODO 1
})()
//上面的例子最终会被等价的解释为:
var funcName = (function(){
//TODO 1
})(function(){
//TODO 2
})()
//这样,程序加载就会出现异常情况!!!
14、关于闭包
/**
* 使用闭包时:
* 1、要注意局部变量的释放,避免循环引用造成内存泄露!
* 2、闭包后,注意分号的使用!
*/
//下面的这段闭包的代码,就是由于没有添加适当的分号,而造成严重后果!
(function (){
var a;
})() //同第13条,这里也不会自动插入分号
(function (){
var b;
})() //应该改成这样:
(function (){
var a;
})(); //增加分号
(function (){
var b;
})()
15、绕开浏览器差异,正确使用多行注释
/**
* 下面是一段非常正常的代码,在所有的浏览器中,result的结果均为:1
*/
var result = (function(x){
return (x > 1) ?
1 : 0;
})(2); /**
* 但是项目维护的过程中,不能像下面这样做,
* 否则各个浏览器处理兼容性不一致,会得到不一样的值
*/
var result = (function(x){
return /*(x > 1) ?
1 : 0*/ x;
})(2);
/**
* WEB标准规定,对于多行注释中存在行终结符的情况,都是一致的,
* 要求这个多行注释不是简单的被忽略,而是要被替换为一个行终结符插入到流中。
* 所以上面的代码在遵守规范的浏览器中,最终将被解释为:
*/
var result = (function(x){
return ; x;
})(2);
16、this指针的使用
/**
* 如果存在标签:<input type="button" value="Hello zxlie!" id="MyButton" >
* 试图通过下面的方式,给MyButton添加click事件,是不正确的!
*/
var EventHandler = (function () {
this.info = "This is from event handler!";
this.clickHandler = function() {
alert(this.info );
};
return {
clickHandler : clickHandler
};
})();
document.getElementById("MyButton").onclick = EventHandler.clickHandler;
/**
* 会发现,每次点击这个按钮,得到的都是:undefined
* 问题的根源,就是错误的使用了this指针,this指针具体指到什么对象,取决于调用者:caller
* 应该像下面这样修改:
*/
var EventHandler = (function () {
var self = this;
self.info = "This is from event handler!";
self.clickHandler = function() {
alert(self.info ); //主要是这里的self,不能用this
};
return {
clickHandler : clickHandler
};
})();
document.getElementById("MyButton").onclick = EventHandler.clickHandler;
17、switch块中只可以包含多个case分支,但是最后只能有一个default分支
/**
* 如果在switch块中可以不定义default分支,
* 但如果定义了多个default分支,YUI压缩的过程中,就会报错!
*/
18、提测以及上线之前去掉代码中的console等调试语句
/**
* console对象主要用来在开发过程中进行程序调试,
* 该语句在IE7及其以下版本无法被识别。
* 所以提测和上线之前务必去掉这样的语句
*/
JS规范2的更多相关文章
- 前端开发规范:命名规范、html 规范、css 规范、js 规范
上周小组的培训内容是代码可读性艺术,主要分享如何命名.如何优化代码排版,如何写好的注释.我们都知道写出优雅的代码是成为大牛的必经之路. 下面感谢一位前端开发小伙伴总结的前端开发规范,通过学习相关开发规 ...
- js规范
js规范 Array 和 Object 直接量 为了避免这些歧义, 我们应该使用更易读的直接量来声明. var a = [x1, x2, x3]; var a2 = [x1, x2]; var a3 ...
- 【重点突破】—— Easy Mock的使用及Mock.js规范
前言:在线使用Easy Mock可视化工具,可以提供快速生成“模拟数据”的持久化服务: Mock.js是一个JS插件,指定了一套规范,而Easy Mock工具就遵循这些规范. 一.Easy Mock ...
- 前端开发规范之命名规范、html规范、css规范、js规范
在学习编程的时候,每次看到那些整齐规范的代码,心里顿时对这个程序员表示点点好感,有时,比如看到自己和朋友写的代码时,那阅读起来就是苦不堪言,所以,一些基本的开发规范是必须的,是为了自己方便阅读代码,也 ...
- 互联网部-供应商团队js规范
文件命名 页面.js文件命名:采用中划线连接方式,比如说: error-report.html js文件夹命名:scripts 公共js命名:common.js 文件结构组织 每个页面中中独有的js文 ...
- angular.js规范写法
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- js 规范
1.原型链的弊端是不支持多重继承.记住,原型链会用另一类型的对象重写类的 prototype 属性 2.注意:调用 ClassA 的构造函数,没有给它传递参数.这在原型链中是标准做法.要确保构造函数没 ...
- js规范思维导图(仅限于自己)
- 模块化规范Common.js,AMD,CMD
随着网站规模的不断扩大,嵌入网页中的javascript代码越来越大,开发过程中存在大量问题,如:协同开发,代码复用,大量文件引入,命名冲突,文件依赖. 模块化编程称为迫切的需求. 所谓的模块,就是实 ...
随机推荐
- Linux硬链接和软连接详解
硬链接: 硬链接是通过索引节点inode来进行链接的(关于inode,http://www.cnblogs.com/ZGreMount/p/7653307.html).在Linux(ext2,ext3 ...
- Bootstrap列表与代码样式(附源码)--Bootstrap
给大家分享下Bootstrap框架中列表与代码样式相关的知识 1.列表 (1)无序列表 <ul> <li>CN217编程</li> </ul> 注意:u ...
- substance在java swing中使用注意事项
package org.dgw.uidemo; import java.awt.EventQueue; import javax.swing.JFrame; import javax.swing.UI ...
- Jfinal配置不得不注意的问题
问题摘要 使用jfinal mvc开发的时候,输出配置环境一定要注意,因为jfinal项目的依赖与log4j,等全部是在此目录下. 使用eclipse做演示一般有两种情况 1. WebContent\ ...
- 推荐系统架构-(附ppt&代码)
Part1.乐视网视频推荐系统 推荐系统:和传统的推荐系统架构无异(基础建模+规则) 数据模块特点:用户反馈服务数据->kv 缓存->log存储 行为日志->解析/聚合->se ...
- Fiddler使用总结(一)
与后端数据通信是前端日常开发的重要一环,在与后端接口联调的时候往往需要通过查看后端返回的数据进行调试.如果在PC端,Chrome自带的DevTools就已经足够用了,Network面板可以记录所有网络 ...
- CountDownLatch、CyclicBarrier和 Semaphore比较
1)CountDownLatch和CyclicBarrier都能够实现线程之间的等待,只不过它们侧重点不同: CountDownLatch一般用于某个线程A等待若干个其他线程执行完任务之后,它才执行: ...
- Windows下使用nginx搭建反向代理服务器
反向代理(Reverse Proxy)方式是指以代理服务器来接受internet上的连接请求,然后将请求转发给内部网络上的服务器,并将从服务器上得到的结果返回给internet上请求连接的客户端,此时 ...
- label联动checkbox
label联动checkbox时,若label包含在checkbox外层时label不需for属性,设置label的display属性为block时可以使整个div联动.
- Linux下Crontab定时任务的使用教程 以及 无法执行定时任务的解决方案
前言 本文学习思路:Linux的corntab定时任务的使用教程 --> 定时任务无效的解决方案 Linux的corntab定时任务的使用教程 1. 首先,输入命令 打开crontab定时 ...