JAVA技术

软件编程的陷阱：javascript篇

楼主 chongxiao20 于 2013-04-02 11:12:02

软件编程的陷阱：javascript篇

[P]软件编程的陷阱：javascript篇[/P][P]避免冗余的比较[/P][P]在javascript和PHP中：[/P][BLOCKQUOTE][P]// javascriptreturn foo.toString（）！== “” ？ true ： false;[/P][P]// php[/P][P]return （something（））？ true ： false;[/P][/BLOCKQUOTE][P]但是条件比较永远返回true或者false，所以你没有必要清楚的添加返回值。以下代码即可：[/P][BLOCKQUOTE][P]// javascriptreturn foo.toString（）！== “”;[/P][P]// php[/P][P]return something（）;[/P][P] [/P][P]事件绑定[/P][P]事件在javascript中是非常的复杂的话题。以往我们使用行内oncick事件的时代已经过去了。。[/P][P]我们应该使用事件bubbling或者delegation。[/P][P]举个例子，如果我们需要让一组图片展示到lightbox window里。那么下面这段代码你绝对不应该使用。[/P][P]这里我们使用jQuery作为例子。[/P][P]HTML：[/P][BLOCKQUOTE][P][P]<div id=“grid-container”>[/P][P]<a href=“someimage.jpg”><img src=“someimage-thumb.jpg”></a>[/P][P]<a href=“someimage.jpg”><img src=“someimage-thumb.jpg”></a>[/P][P]<a href=“someimage.jpg”><img src=“someimage-thumb.jpg”></a>[/P][P].......[/P][P]</div>[/P][/P][/BLOCKQUOTE][P]Javascript（不推荐的写法）：[/P][BLOCKQUOTE][P]$（‘a’）.on（‘click’， function（） {[/P][P]callLightbox（this）;[/P][P]}）;[/P][/BLOCKQUOTE][P]这样书写会导致绑定事件到每一个链接元素，最好绑定到指定的图片容器，如下：[/P][BLOCKQUOTE][P]$（“#grid-container”）.on（“click”， “a”， function（event） {[/P][P]callLightbox（event.target）;[/P][P]}）;[/P][P] [/P][P]冗余的DOM操作[/P][P]DOM操作众所周知是比较重量级的。有效的限制交互可以大大的帮助你提高你的代码的性能。看看下面这段代码：[/P][BLOCKQUOTE][P]// anti-pattern[/P][P]for （var i = 0; i < 100; i++）{[/P][P]var li = $（“<li>”）.html（“This is list item #” + （i+1））; [/P][P] [/P][P]$（“#someUL”）.append（li）;[/P][P]}[/P][/BLOCKQUOTE][P]这段代码循环修改DOM100次，但是创建了100个jQuery对象。更好的方式是使用document片段，或者创建一个String来包含100个[/P][P]元素，然后再添加到DOM中去。这里你只需要执行一次DOM操作。 [/P][P]优化后的代码：[/P][BLOCKQUOTE][P]var liststring = “”;[/P][P]for （var i = 100; i > 0; i--）{[/P][P]liststring += “<li>This is list item #” + （99- i）; [/P][P]}[/P][P]document.getElementById（“someUL”）.innerHTML（liststring）;[/P][/BLOCKQUOTE][P]以上代码只调用了一次DOM操作，但是大量使用了字符串的连接操作。除了使用字符串连接，我们可以使用数组来显示。[/P][BLOCKQUOTE][P]var liststring = “<li>” [/P][P]var lis = ［］;[/P][P]for （var i = 100; i > 0; i--）{[/P][P]lis.push（“This is list item #” + （99- i））;[/P][P]}[/P][P]liststring += lis.join（“</li><li>”） + “<li>”; [/P][P]document.getElementById（“someUL”）.innerHTML（liststring）;[/P][/BLOCKQUOTE][P]当创建大量的字符串时，保存每一个字符串到数组里，然后调用join（）方法来连接。在javascript中，这是不使用模板类库和框架外的最高效的字符串连接操作方式。[/P][P][URL=http://www.gbin1.com/gb/debug/fc9831b5-9cb7-4d05-a6ce-8a3091c86287.htm]在线调试[/URL][/P][P]变量和方法名不一致[/P][P]这可能不是一个性能问题，但是对于编程来说非常重要，特别是当你需要维护别人的代码。看看如下例子：[/P][BLOCKQUOTE][P]var foo = “bar”;[/P][P]var plant = “green”;[/P][P]var car = “red”;[/P][/BLOCKQUOTE][P]如果你再添加一个变量叫“something”可能就不是那么合适了，你应该保持命名的一致。这也就是为什么在一些编程语言中，我们使用大写变量名来代表常量。[/P][P]对于方法来说，我们也需要保持一致，如下：[/P][BLOCKQUOTE][P]function subtractFive（number）{[/P][P]return number - 5;[/P][P]}[/P][/BLOCKQUOTE][P]如果你有一个以上的减5方法，那么你如果定义加5方法的话，应该使用如下命名方式：[/P][BLOCKQUOTE][P]function addFive（number）{[/P][P]return number + 5;[/P][P]}[/P][/BLOCKQUOTE][P]有时候如果你定义一个返回方法，那么一般使用getXXX（），如果你只是执行操作不返回，那么最好使用doXXX（）方法名。[/P][P]构造器方法最好使用类似其它语言的命名方式，首字母大写，如下：[/P][BLOCKQUOTE][P]function Gbin1（color）{[/P][P]this.color = color;[/P][P]}[/P][/BLOCKQUOTE][P]不管怎么，你都应该尽量的让你的命名更加富有意义，能够给别人更多的信息。[/P][P]在for..in循环中使用 hasOwnProperty 方法[/P][P]在javascript中数组是不关联的。而对象来说是hashtable类型的。你可以使用for 。.. in循环来迭代对象属性。如下：[/P][BLOCKQUOTE][P]for （var prop in someObject） {[/P][P]alert（someObject［prop］）; // alert‘s value of property[/P][P]}[/P][/BLOCKQUOTE][P]但是问题在于，以上代码会循环proptype chain中的所有的属性，有时候这样会出错，你可能只想使用实际存在的属性。使用hasOwnProperty方法可以帮助你解决这个问题。[/P][BLOCKQUOTE][P]for （var prop in someObject） {[/P][P]if （someObject.hasOwnProperty（prop）） {[/P][P]alert（someObject［prop］）; // alert‘s value of property[/P][P]}[/P][P]}[/P][/BLOCKQUOTE][P]这个方法可以帮助你得到实际存在的属性值。[/P][P]比较boolean值[/P][P]比较boolean值非常浪费计算时间。看看下面这个例子：[/P][BLOCKQUOTE][P]if （foo == true） {[/P][P]// do something for true[/P][P]} else {[/P][P]// do something for false[/P][P]}[/P][/BLOCKQUOTE][P]注意上面的==true条件，这个非常没有必要因为foo本身就是boolean值。如果比较，应该使用如下代码：[/P][BLOCKQUOTE][P]if （foo） {[/P][P]// do something for true[/P][P]} else {[/P][P]// do something for false[/P][P]}[/P][/BLOCKQUOTE][P]或者测试foo为false，如下：[/P][BLOCKQUOTE][P]if （！foo） {[/P][P]// do something for true[/P][P]}else {[/P][P]// do something for false[/P][P]}[/P][/BLOCKQUOTE][/BLOCKQUOTE][/BLOCKQUOTE]

电脑版 Page created in 0.0312 seconds with 2 queries.