15条JavaScript最佳实践小结


Posted in Javascript onAugust 09, 2013

本文档整理大部分公认的、或者少有争议的JavaScript良好书写规范(Best Practice)。一些显而易见的常识就不再论述(比如要用对象支持识别判断,而不是浏览器识别判断;比如不要嵌套太深)。条目顺序按重要级粗略的从高到低排列。
把外部JavaScript文件放在HTML底部
我们的目标是相同的:为用户尽可能快地显示内容。当载入一个脚本文件的时候,HTML会停止解析,直到脚本载入完毕。因此,用户可能会长时间对着一个空白的屏幕,看上去什么都没有发生。如果你的JavaScript代码只是增加一些功能(比如按钮的点击动作),那么尽管大胆地把文件引用放在HTML底部吧(就在</body>之前),你会看到明显的速度提升。如果是用于其他目的的脚本文件,则需要慎重地考虑。但无论如何,这毫无疑问是一个非常值得考虑的地方。
优化循环
循环遍历一个数组

//这段糟糕的代码会在每次进入循环的时候都计算一次数组的长度 
var names = ['George','Ringo','Paul','John']; 
for(var i=0;i<names.length;i++){ 
doSomeThingWith(names[i]); 
}

//这样的话,就只会计算一次了 
var names = ['George','Ringo','Paul','John']; 
var all = names.length; 
for(var i=0;i<all;i++){ 
doSomeThingWith(names[i]); 
}

//这样就更加简短了 
var names = ['George','Ringo','Paul','John']; 
for(var i=0,j=names.length;i<j;i++){ 
doSomeThingWith(names[i]); 
}

//这段代码的糟糕之处在于,它把变量声明放在循环体内了,每次循环都会创建变量 
for(var i = 0; i < someArray.length; i++) { 
var container = document.getElementById('container'); 
container.innerHtml += 'my number: ' + i; 
console.log(i); 
}

//在循环体外声明变量,变量只会创建一次 
var container = document.getElementById('container'); 
for(var i = 0, len = someArray.length; i < len; i++) { 
container.innerHtml += 'my number: ' + i; 
console.log(i); 
}

用尽量简短的代码
如果可以增加可读性的话,那么使用代码的简短格式是有意义的,下面是一份不完全的列表:
//对于条件判断只有两次的,这是一种冗长的写法 
var direction; 
if(x > 100){ 
direction = 1; 
} else { 
direction = -1; 
}

//更好的代码 
var direction = (x > 100) ? 1 : -1;

//判断一个 变量是否定义,如果否,就赋予一个值,糟糕的代码 
if(v){ 
var x = v; 
} else { 
var x = 10; 
}

//更好的代码 
var x = v || 10;

//重复了变量名很多次 
var cow = new Object(); 
cow.colour = 'brown'; 
cow.commonQuestion = 'What now?'; 
cow.moo = function(){ 
console.log('moo'); 
} 
cow.feet = 4; 
cow.accordingToLarson = 'will take over the world';

//更好的写法是这样 
var cow = { 
colour:'brown', 
commonQuestion:'What now?', 
moo:function(){ 
console.log('moo); 
}, 
feet:4, 
accordingToLarson:'will take over the world' 
};

//重复了很多次数组名 
var aweSomeBands = new Array(); 
aweSomeBands[0] = 'Bad Religion'; 
aweSomeBands[1] = 'Dropkick Murphys'; 
aweSomeBands[2] = 'Flogging Molly'; 
aweSomeBands[3] = 'Red Hot Chili Peppers'; 
aweSomeBands[4] = 'Pornophonique';

//更好的代码 
var aweSomeBands = [ 
'Bad Religion', 
'Dropkick Murphys', 
'Flogging Molly', 
'Red Hot Chili Peppers', 
'Pornophonique' 
];

单引号和双引号
为了避免混乱,我们建议在HTML中使用双引号,在JavaScript中使用单引号。
//html 
<img src="picture.gif" />

//JavaScript 
<script type="text/javascript"> 
document.write('<p>'); 
</script>

//一段混用的jQuery代码 
$('h1').after('<div id="content"><h2>目录</h2><ol></ol></div>');

避免混入其他技术
CSS:假设我们的页面上有必须填入的输入框(拥有class“mandatory”),如果它没有被输入数据,周围就会加上红色边框。
//一段混合了其他技术的代码会这样做: 
var f = document.getElementById('mainform'); 
var inputs = f.getElementsByTagName('input'); 
for(var i=0,j=inputs.length;i<j;i++){ 
if(inputs[i].className === 'mandatory' && 
inputs[i].value === ''){ 
inputs[i].style.borderColor = '#f00'; 
inputs[i].style.borderStyle = 'solid'; 
inputs[i].style.borderWidth = '1px'; 
} 
}

//一段良好的代码会这么做:将风格化的事情交给CSS吧 
var f = document.getElementById('mainform'); 
var inputs = f.getElementsByTagName('input'); 
for(var i=0,j=inputs.length;i<j;i++){ 
if(inputs[i].className === 'mandatory' && 
inputs[i].value === ''){ 
inputs[i].className += ' error'; 
} 
}

HTML:假设我们有内多HTML内容需要用JavaScript来载入,那么使用Ajax载入单独的文件,而不是通过JavaScript处理DOM,后者会让代码难以处理,并且出现难以维护的兼容性问题。
验证JavaScript代码
浏览器处理JavaScript代码可能会非常宽容,但我建议你不要依赖浏览器的解析能力,因此养成了懒散的编码习惯。
最简单的检测你的代码质量的方法是通过一个在线JavaScript验证工具JSLint。
“JSLint takes a JavaScript source and scans it. If it finds a problem, it returns a message describing the problem and an approximate location within the source. The problem is not necessarily a syntax error, although it often is. JSLint looks at some style conventions as well as structural problems. It does not prove that your program is correct. It just provides another set of eyes to help spot problems.”
? JSLint Documentation
使用更简单的格式来写innerscript
//早期的代码可能是这样的 
<script type="text/javascript" language="javascript"> 
... 
</script>

//现在不用language属性了 
<script type="text/javascript"> 
... 
</script>

总是检查数据
要检查你的方法输入的所有数据,一方面是为了安全性,另一方面也是为了可用性。用户随时随地都会输入错误的数据。这不是因为他们蠢,而是因为他们很忙,并且思考的方式跟你不同。用typeof方法来检测你的function接受的输入是否合法。
//如果members的类型不是数组,那么下面的代码会抛出一个错误 
function buildMemberList(members){ 
var all = members.length; 
var ul = document.createElement('ul'); 
for(var i=0;i

//良好的习惯是检查参数是否是一个数组 
function buildMemberList(members){ 
//数组的typeof是object,所以如果要判断是否为数组的话,可以测试它是否拥有数组才有的function:slice 
if(typeof members === 'object' && 
typeof members.slice === 'function'){ 
var all = members.length; 
var ul = document.createElement('ul'); 
for(var i=0;i

另一个安全隐患是直接从DOM中取出数据使用。比如说你的function从用户名输入框中取得用户名做某项操作,但用户名中的单引号或者双引号可能会导致你的代码崩溃。
避免全局变量
全局变量和全局函数是非常糟糕的。因为在一个页面中包含的所有JavaScript都在同一个域中运行。所以如果你的代码中声明了全局变量或者全局函数的话,后面的代码中载入的脚本文件中的同名变量和函数会覆盖掉(overwrite)你的。
//糟糕的全局变量和全局函数 
var current = null; 
function init(){...} 
function change(){...} 
function verify(){...}

解决办法有很多,Christian Heilmann建议的方法是:
//如果变量和函数不需要在“外面”引用,那么就可以使用一个没有名字的方法将他们全都包起来。 
(function(){ 
var current = null; 
function init(){...} 
function change(){...} 
function verify(){...} 
})();

//如果变量和函数需要在“外面”引用,需要把你的变量和函数放在一个“命名空间”中 
//我们这里用一个function做命名空间而不是一个var,因为在前者中声明function更简单,而且能保护隐私数据 
myNameSpace = function(){ 
var current = null; 
function init(){...} 
function change(){...} 
function verify(){...} 
//所有需要在命名空间外调用的函数和属性都要写在return里面 
return{ 
init:init, 
//甚至你可以为函数和属性命名一个别名 
set:change 
} 
}();

声明变量的话,总是用var
JavaScript中的变量可能是全局域或者局部域,用var声明的话会更加直观。
//在function中不用var引起的迷惑性问题 
var i=0; // This is good - creates a global variable 
function test() { 
for (i=0; i<10; i++) { 
alert("Hello World!"); 
} 
} 
test(); 
alert(i); // The global variable i is now 10!

//解决方法是在function中声明变量也用var 
function test() { 
for (var i=0; i<10; i++) { 
alert("Hello World!"); 
} 
}

使用前置+号来把字符串转化为数字
JavaScript中,“+”操作符即被用来作为数字加,也被用来连接字符串。如果需要求表单中几个值的和,那么用+可能会出现问题。
//会出现问题的代码 
<form name="myform" action="[url]"> 
<input type="text" name="val1" value="1"> 
<input type="text" name="val2" value="2"> 
</form> 
function total() { 
var theform = document.forms["myform"]; 
var total = theform.elements["val1"].value + theform.elements["val2"].value; 
alert(total); // This will alert "12", but what you wanted was 3! 
}

//在字符串前面加上“+”,这是给JavaScript的一个暗示:这是一个数字而不是字符串 
function total() { 
var theform = document.forms["myform"]; 
var total = (+theform.elements["val1"].value) + (+theform.elements["val2"].value); 
alert(total); // This will alert 3 
}

避免使用eval()方法
JavaScript中的eval()方法是在运行时把任何代码当作对象来计算/运行的方法。实际上由于安全性的缘故,大部分情况下都不应该用eval(),总是有一种更“正确”的方法来完成同样的工作的。基本原则是,eval is evil,在任何时候都不要用它,除非你是一个老手,并且知道你不得不这样做。
for in语句
遍历一个对象中的所有条目的时候,用for in语句是非常方便的。但有时候我们不需要遍历对象中的方法,如果不需要的话,可以加上一条filter。
//加上了一个过滤器的for in语句 
for(key in object) { 
if(object.hasOwnProperty(key) { 
...then do something... 
} 
}

不要偷懒省略”和{}
从技术上说,你可以忽略很多花括号和分号。
//虽然看上去很不对头,大部分浏览器都能正确解析这段代码 
if(someVariableExists) 
x = false

//这个代码看上去更不对头了,咋眼一看似乎下面的句都被执行了 
//实际上只有x=false在if中 
if(someVariableExists) 
x = false 
anotherFunctionCall();

所以,要记住的原则是:1.永远不要省略分号;2.不要省略花括号,除非在同一行中。
//这样是OK的 
if(2 + 2 === 4) return 'nicely done';

获取对象属性的时候用方括号而不是点号
在JavaScript中取得某对象的属性有两种方法:
//点号标记 
MyObject.property

//方括号标记 
MyObject["property"]

如果是用点号标记取得对象的属性,属性名称是硬编码,无法在运行时更改;而用方括号的话,JavaScript会求得方括号内值然后通过计算结果来求得属性名。也就是说用方括号标记的方式,属性名称可以是硬编码的,也可以是变量或者函数返回值。
//这样是不行的 
MyObject.value+i

//这样就没有问题 
MyObject["value"+i]

假设JavaScript会被禁用
我知道这样的假设会伤害JavaScript开发者的感情,可是在目前数据不明朗的情况下我们为了安全起见应该做这样的假设。这是渐进增强中很重要的一部分。
使用JavaScript库
现在有很多非常流行的JavaScript库,比如YUI和jQuery、Dojo。它们的缺点是需要下载一个额外的文件,优点却更多:兼容性更强;代码更简单易懂。好的库有很多,但你不应该在一个项目中把它们都用上,因为可能存在兼容性问题。选择一个自己习惯的就好。
不要忘记的一点是,原生的JavaScript毫无疑问更快,如果是小规模的使用,最好还是用原生的。
Javascript 相关文章推荐
JS分页控件 可用于无刷新分页
Jul 23 Javascript
jQuery插件jcrop+Fileapi完美实现图片上传+裁剪+预览的代码分享
Apr 22 Javascript
javascript操作ul中li的方法
May 14 Javascript
uploadify多文件上传参数设置技巧
Nov 16 Javascript
基于JavaScript实现动态创建表格和增加表格行数
Dec 20 Javascript
Bootstrap基本样式学习笔记之表格(2)
Dec 07 Javascript
JS中setTimeout和setInterval的最大延时值详解
Feb 13 Javascript
js css3实现图片拖拽效果
Mar 04 Javascript
jquery.flot.js简单绘制折线图用法示例
Mar 13 Javascript
web前端vue之vuex单独一文件使用方式实例详解
Jan 11 Javascript
layui table 参数设置方法
Aug 14 Javascript
小程序获取周围IBeacon设备的方法
Oct 31 Javascript
web网页按比例显示图片实现原理及js代码
Aug 09 #Javascript
html向js方法传递参数具体实现
Aug 08 #Javascript
js获取控件位置以及不同浏览器中的差别介绍
Aug 08 #Javascript
用JavaScript计算在UTF-8下存储字符串占用字节数
Aug 08 #Javascript
Jquery chosen动态设置值实例介绍
Aug 08 #Javascript
extjs两个tbar问题探讨
Aug 08 #Javascript
JS实现随机数生成算法示例代码
Aug 08 #Javascript
You might like
Banner程序
2006/10/09 PHP
getJSON跨域SyntaxError问题分析
2014/08/07 PHP
PHP使用file_get_contents发送http请求功能简单示例
2018/04/29 PHP
PHP实现动态压缩js与css文件的方法
2018/05/02 PHP
使用laravel的migrate创建数据表的方法
2019/09/30 PHP
PHP call_user_func和call_user_func_array函数的简单理解与应用分析
2019/11/25 PHP
你所要知道JS(DHTML)中的一些技巧
2007/01/09 Javascript
Javascript学习笔记5 类和对象
2010/01/11 Javascript
jQuery实现的类flash菜单效果代码
2010/05/17 Javascript
JQuery中判断一个元素下面是否有内容或者有某个标签的判断代码
2012/02/02 Javascript
js截取中英文字符串、标点符号无乱码示例解读
2014/04/17 Javascript
SpringMVC返回json数据的三种方式
2015/12/10 Javascript
JavaScript中字符串与Unicode编码互相转换的实现方法
2015/12/18 Javascript
ichart.js绘制虚线、平均分虚线效果的实现代码
2016/05/05 Javascript
用JS中split方法实现彩色文字背景效果实例
2016/08/24 Javascript
基于Bootstrap的Metronic框架实现页面链接收藏夹功能
2016/08/29 Javascript
详解微信小程序开发—你期待的分享功能来了,微信小程序序新增5大功能
2016/12/23 Javascript
ES6概念 ymbol.for()方法
2016/12/25 Javascript
总结javascript三元运算符知识点
2018/09/28 Javascript
利用js-cookie实现前端设置缓存数据定时失效
2019/06/18 Javascript
[41:17]完美世界DOTA2联赛PWL S3 access vs CPG 第二场 12.13
2020/12/17 DOTA
Python 递归函数详解及实例
2016/12/27 Python
python通过pip更新所有已安装的包实现方法
2017/05/19 Python
利用Python如何生成hash值示例详解
2017/12/20 Python
python实现求两个字符串的最长公共子串方法
2018/07/20 Python
解决Python找不到ssl模块问题 No module named _ssl的方法
2019/04/29 Python
python opencv 简单阈值算法的实现
2019/08/04 Python
CSS3 rgb and rgba(透明色)的使用详解
2020/09/25 HTML / CSS
土耳其时尚购物网站:Morhipo
2017/09/04 全球购物
几个Shell Script面试题
2012/08/31 面试题
个人简历中的自我评价范例
2013/10/29 职场文书
如何写股份合作协议书
2014/09/11 职场文书
化验室安全管理制度
2015/08/06 职场文书
2016党风廉政建设心得体会范文
2016/01/25 职场文书
Mysql 8.x 创建用户以及授予权限的操作记录
2022/04/18 MySQL
python中urllib包的网络请求教程
2022/04/19 Python