Javascript开发经验谈.docVIP

Javascript开发经验谈 　　一、简化代码 　　采用更为简短的写法，不仅可以减少输入的字符数，还可以减少文件大小。大部分采用简单写法的代码，执行效率都有轻微提高。 　　1.1 简化常用对象定义： 　　使用 var obj = {}; 代替 var obj = new Object(); 　　使用 var arr = []; 代替 var arr = new Array(); 　　1.2 精简if语句 　　三元操作符可以有效精简只涉及赋值传值操作的if语句，比如 　　var score = 60, grade; 　　if (score 60) { 　　grade = “不及格”; 　　} else { 　　grade = “及格”; 　　} 　　可以精简为： 　　var score = 60; 　　var grade = score 60 ? “不及格” : “及格”; 　　三元操作符也支持嵌套，但是嵌套的层次太多会影响程序的可读性，这方面要多加斟酌。 　　1.3 使用JSON 　　JSON是一种轻量级的数据格式，轻量级首先体现在它的结构定义非常简单。 　　var obj = {}; 　　obj.p1 = ‘a’; 　　obj.p2 = ‘b’; 　　obj.p3 = ‘c’; 　　可精简为： 　　var obj = { 　　p1 : ‘a’, 　　p2 : ‘b’, 　　p3 : ‘c’ 　　}; 　　二、使用高效率的代码 　　网上流传的效率优化文章非常多，一些比较专业的Javascript书籍也谈到了不少，因此，这里就只列出一些很少谈到的。 　　2.1 精简循环体 　　循环的效率很大程度上是由循环体决定的，与之相比，用for还是while的差别就太小了。考虑如下的代码，其功能是为某一批元素添加事件： 　　function addEvent(elems, eventName, handler) { 　　for (var i = 0, len = elems.length; i len; i++) { 　　if (window.attachEvent) { 　　elems[i].attachEvent(“on” + eventName, handler); 　　} else if (window.addEventListener) { 　　elems[i].addEventListener(eventName, handler, false); 　　} 　　} 　　} 　　循环每执行一次，都会判断window对象的attachEvent或addEventListener是否存在，其实这个仅判断一次也就够了;此外，“”on” + eventName”的字符串拼接也会重复执行。优化如下： 　　function addEvent(elems, eventName, handler) { 　　var i = -1, len = elems.length; 　　if (window.attachEvent) { 　　eventName = “on” + eventName; 　　while (++i len) { 　　elems[i].attachEvent(eventName, handler); 　　} 　　} else if (window.addEventListener) { 　　while (++i len) { 　　elems[i].addEventListener(eventName, handler, false); 　　} 　　} 　　} 　　2.2 尽量使用原生的函数而不是自定义函数 　　当你对Javascript的内置类型变量执行某项操作时，你应该先查查这项操作是否有原生的方法。 　　要生成一个数组的副本，你会怎么做呢?遍历数组元素然后逐个赋值到另一个数组，这似乎是唯一的方法。其实，原生的Array.prototype.slice就可以达到复制的目的。这个方法可以从某个数组返回选定的元素，且不影响原来的数组。如果参数留空，返回的就是全部元素。 　　Array.prototype.slice还可以对某些不是数组而又能通过数字索引访问的类型进行操作，比如arguments： 　　function test() { 　　alert(Array.prototype.slice.call(arguments)); 　　} 　　test(1, 2, 3); // output “1,2,3″ 　　在Firefox下，它甚至可以对HtmlCollection进行操作。可惜在IE下不行。 　　另一个例子是数组排序，一般情况下，我们不需要另外写排序算法，用原生的Array.prototype.sort就够了。sort