本文中用到的jQuery版本为v1.12.0
1. 缓存对象
在写jQuery代码的时候,有些开发人员喜欢这么写:
$('#id').css('color', 'white');
$('#id').on('click', function(event) {...});
$('#id').find('.childNode').siblings().hide();
$('#id').fadeIn('500');
当然,开发过程中的跳跃思维会导致你有可能书写类似这样的代码,这无可厚非,但是这么书写导致的是:jQuery会在创建每一个选择器的过程中,查找DOM,创建多个jQuery对象。相对应的,比较良好的书写方式如下:
var $id = $('#id');
$id.css('color', 'white');
$id.on('click', function(event) {...});
$id.find('.childNode').siblings().hide();
$id.fadeIn('500');
当然,使用jQuery的链式操作会使代码更加简洁:
var $id = $('#id');
$id.css('color', 'white')
.on('click', function(event) {...})
.find('.childNode').siblings().hide()
.fadeIn('500');
这里只是为了说明使用缓存变量的重要性,这和Java开发中不要随意的创建对象一样,可以帮助你有效地提高代码的执行效率。
如果在其他函数也用到了该jQuery对象,那么可以把它缓存到全局环境中。如:
window.$me = {
id1 = $('#id1'),
head = $('#title')
};
function test () {
$me.id1.css('color', 'white')
.on('click', function(event) {...})
.find('.childNode').siblings().hide()
.fadeIn('500');
$me.head.text('I am a Head');
}
切记:永远不要让相同的选择器在你的代码中出现多次。
2. 循环时的DOM操作
使用jQuery可以很方便的对DOM节点进行增删查改,但是在一些循环中,如for()
,while()
,$.each()
中处理节点时,如下例:
$ul = $('#ul-list');
$.each(dataArray, function(index, val) {
$ul.append('<li>'+dataArray[index]+'</li>');
});
在上面代码中,将dataArray
中的数据逐个加入到ul
中,期间每一条数据都通过.append()
将新节点添加到容器中。实际上jQuery操作消耗的性能也不低,所以更好的方式是尽可能的减少DOM操作。可以将整个元素字符串在插入DOM之前全部创建好。如:
var $ul = $('#ul-list');
var html = "";
$.each(dataArray, function(index, val) {
html += '<li>'+dataArray[index]+'</li>';
});
$ul.html(html);
3. 数组方式使用jQuery对象
使用jQuery选择器获取的结果是一个jQuery对象。然而,jQuery类库会让你感觉你在使用一个定义了索引和长度的数组。在性能方面,使用for()
或者while()
来处理比使用$.each()
要快。
同时,检查该数组的长度也是一个检查jQuery对象是否存在的方法。如:
var $content = $('#content');
if ($content) {...};//总是返回true
if ($content.length) {...};//拥有#content该元素时才返回true
4. 事件代理
每一个JavaScript事件(如:click
,mouseover
等)都会冒泡到父级节点。当我们需要给多个元素调用同个函数时,这点会很有用。比如,我们要唯一个表格绑定这样的行为:点击td后,把背景色设置为红色,代码如下:
$("#myTabel td").click(function(event){
$(this).css('background-color','red');
})
假设有100个td,在使用上述方式的时候,就绑定了100个事件,这将带来很负面的性能影响。
代替这种效率较低的多元素事件监听的方法就是,只需向它们的父节点绑定一次事件,然后通过event.tartget
获取点击到的当前元素,代码如下:
$("#myTabel").click(function(event){
var $td = $(event.target);
$td.css('background-color','red');
})
在改进方式中,只为一个元素绑定了一个事件,显然这种方式的性能要优于之前那种。同时,在jQuery 1.7版本中提供了一个新的方式:on()
,来帮助你将整个事件监听封装到一个便利的方法中:
$("#myTabel").on('click', 'td', function(event){
$(this).css('background-color','red');
})
5.尽量使用原生的JavaScript方法
下面的代码,用来判断多选框是否选中:
var $cb = $('#checkbox');
$cb.click(function(e){
if($cb.is(':checked')){
alert('你已选中该多选框');
}
});
这里使用了jQuery提供的is()
方法来判断多选框是否选中,但这里可以直接使用原生的JavaScript的方法:
var $cb = $('#checkbox');
$cb.click(function(event) {
if (this.checked) {alert('checked')}
});
毋庸置疑,第二种方式效率高于第一种,因为它不需要再去调用其他函数。
还有很多:
//$(this).css('color','red');
this.style.color = 'red';//better;
//$('<p>');
$(document.createElement('p'));//better;
方法的选择很重要,有时候,也许你根本不需要jQuery。
6.压缩JavaScript
现在的web项目总是离不开大量的JavaScript,而js文件的体积越来越大,随之也影响到页面的感知新能。因此,需要对JavaScript文件进行压缩。
压缩的方法和工具在网上很多,大家可以自行搜索。
完。