当前位置: 编程技术>WEB前端
编写高效jQuery代码的4个原则和5个技巧
来源: 互联网 发布时间:2014-08-25
本文导语: jQuery的编写原则: 一、不要过度使用jQuery 1. jQuery速度再快,也无法与原生的javascript方法相比,而且建立的jQuery对象包含的信息量很庞大。所以有原生方法可以使用的场合,尽量避免使用jQuery。 代码如下:$("a").click(function(){ ...
jQuery的编写原则:
一、不要过度使用jQuery
1. jQuery速度再快,也无法与原生的javascript方法相比,而且建立的jQuery对象包含的信息量很庞大。所以有原生方法可以使用的场合,尽量避免使用jQuery。
代码如下:
$("a").click(function(){
alert($(this).attr("id"));
});
//改良后↓
$("a").click(function(){
alert(this.id);
});
2. 许多jQuery方法都有两个版本,一个是供jQuery对象使用的版本,另一个是供jQuery函数使用的版本。由于后者不通过jQuery对象操作,所以相对开销较小,速度比较快。
代码如下:
var $text = $("#text");
var $ts = $text.text();
//改良后↓
var $text = $("#text");
var $ts = $.text($text);
这里是用了“$.text()”的内置函数,其他类似的还有“$.data()”等。
二、缓存jQuery对象
查找DOM元素实际上有不小的内存开销,使用选择器的次数应该越少越好,并且尽可能缓存选中的结果,便于以后反复使用。记住,永远不要让相同的选择器出现多次。
例如:
代码如下:
$("#top").find("p.classA");
$("#top").find("p.classB");
改良后↓
var cached = $("#top");
cached.find("p.classA");
cached.find("p.classB");
三、少改动DOM结构
如果要多次改动DOM结构,就先把要改动的部分先取出来,改动完成后再放回去。这里的基本思想是在内存中建立你确实想要的东西,最后做一次最有效的更新DOM操作。
例如:
代码如下:
var top_100_list = [...], // 这里是100个字符串的数组
$mylist = $("#mylist");
for (var i=0, l=top_100_list.length; i