var name = ‘Frank‘; var age = 10; var util = {/*...*/}; var m1 = function() {/*...*/};
4. 总是使用var去定义变量
var name = ‘Frank‘, age = 10, util = {/*...*/};
上面例子中是推荐的一种单行定义多个变量的写法。
if (true) { alert(‘msg‘); }
7. 起始的大括号总是写在上一行行末
var util = {}; util.checkName = function() {/*...*/};
9. 除了"构造函数"外,所有的函数(也包括变量)总是使用驼峰命名规范
var myName = ‘bar‘; function checkName(name) { //... }
10. 正确使用循环
for(var i=0, len = arr.length; i < len; i++) { //... }
3). 尽量不要在循环体中创建变量,特别是jQuery对象或者DOM对象,开始循环前缓存起来吧:
var obj = $(‘.name‘); for(/*...*/){ // 使用obj去做某些事 }
11. 尽量多使用单引号表示字符串
var name = ‘Frank‘;
当然了,出现字符串嵌套的时候就要混用单双引号了。
obj.a = obj.b;
obj.c = obj.d;
可以简写成
with(obj) { a = b; c = d; }
但是,在实际运行时,解释器会首先判断obj.b和obj.d是否存在,如果不存在的话,再判断全局变量b和d是否存在。这样就导致了低效率,而且可能会导致意外,因此最好不要使用with语句。
eval("myValue = myObject." + myKey + ";");
可以直接写成
myValue = myObject[myKey];
至于ajax操作返回的json字符串并执行的需求,可以直接使用JQuery的$.getScript方法实现。
switch(n) { case 1: case 2: break; }
这样写容易出错,而且难以发现。因此建议避免switch贯穿,凡是有case的地方,一律加上break。
switch(n) { case 1: break; case 2: break; }
15. 不使用位运算符
var arr = [0, 1]; alert(typeof arr); // object alert(arr instanceof Array); // true alert(Array.isArray(arr)); // 比instanceof更好的写法
19. 谨慎对浮点数经行判等
// 错误比较浮点数 alert((0.1+0.2) === 0.3); // 常见的解决方案 var epsEqual = function () { var EPSILON = Math.pow(2, -53); return function epsEqual(x, y) { return Math.abs(x - y) < EPSILON; }; }(); alert(epsEqual(0.1+0.2, 0.3));
20. 时刻检查传入数组中的index参数是否是负数
var arr = [1,2,3,4,5]; var index = arr.indexOf(‘foo‘); // index = -1 alert(arr.splice(index, 2)); // 5
是你想要的结果吗?
// 使用函数是有开销的 var min = Math.min(a, b); // 推荐的写法 var min = a < b ? a : b;
22.将脚本放在页面的底部,并且采用HTML5的写法
<script src="path/to/file.js"></script> <script src="path/to/anotherFile.js"></script> </body> </html>
23. 总是使用数组的toString方法(简单)或者join方法(可以自定义格式)输出数组字符串
var arr = [1,2,3,4,5]; alert(arr.toString()); alert(arr.join(‘,‘)); // 稍微复杂一点的例子 var arr = [‘item 1‘, ‘item 2‘, ‘item 3‘, ...]; var list = ‘<ul><li>‘ + arr.join(‘</li><li>‘) + ‘</li></ul>‘;
这种情况下,忘了for循环吧。
// 低效率方法 var url = location.href; // 相对高效一点的用法 var url = window.location.href;
这个原理同样适用于"多定义局部变量,少定义全局变量"。
$(‘#top‘).find(‘p.classA‘);
$(‘#top‘).find(‘p.classB‘);
更好的写法是:
var cached = $(‘#top‘); cached.find(‘p.classA‘); cached.find(‘p.classB‘);
4. 多使用链式操作
$(‘div‘).find(‘h3‘).eq(2).html(‘Hello‘);
原因:采用链式写法时,jQuery自动缓存每一步的结果,因此比非链式写法要快。
var cached = $(‘#p‘); cached.data(‘_data‘);//初始化 cached.data(‘_data‘,{//赋值 name: ‘haha‘ }); cached.data(‘_data‘).name;//获取JSON中的name值
虽然使用data()方法可以很方便地存取全局性数据,但存储的数据随着操作的变化,会越来越大,如果不及时进行清理,将会影响原有程序的执行。
var elem = $(‘#elem‘); elem.data(key,value);
而要写成
var elem = $(‘#elem‘); $.data(elem[0],key,value);
根据测试,后一种写法要比前一种写法,快了将近10倍。因为elem.data()方法是定义在jQuery函数的prototype对象上面的,而$.data()方法是定义jQuery函数上面的,调用的时候不从复杂的jQuery对象上调用,所以速度快得多。
var $text = $("#text"); var $ts = $text.text();
也可以使用针对jQuery函数的版本:
var $text = $("#text"); var $ts = $.text($text);
由于后一种针对jQuery函数的版本不通过jQuery对象操作,所以相对开销较小,速度比较快。