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对象上调用,所以速度快得多。
function addDivs(element) {
var div;
// Creates a new empty DocumentFragment.
var fragment = document.createDocumentFragment();
for (var i = 0; i < 20; i ++) {
div = document.createElement('a');
div.innerHTML = 'Hi!';
fragment.appendChild(div);
}
element.appendChild(fragment);
}
8. 如有可能,多使用工具方法(静态方法),而不是jQuery对象的方法(实例方法)
var $text = $("#text");
var $ts = $text.text();
也可以使用针对jQuery函数的版本:
var $text = $("#text");
var $ts = $.text($text);
由于后一种针对jQuery函数的版本不通过jQuery对象操作,所以相对开销较小,速度比较快。