如何才能书写出高质量的jQuery代码,困扰这不少人,不知何从下手。今天合肥达内PHP培训为大家总结的6条经验,拿走不谢!
一、正确引用jQuery
尽量在body结束前才引入jQuery,而不是在head中。
借助第三方提供的CDN来引入jQuery,同时注意当使用第三方CDN出现问题时,要引入本地的jQuery文件。
如果在前引入script文件的话,就不用写document.ready了,因为这时执行js代码时DOM已经加载完毕了。
二、优化jQuery选择器
高效正确的使用jQuery选择器是熟练使用jQuery的基础,而掌握jQuery选择器需要一定的时间积累,我们开始学习jQuery时就应该注意选择器的使用。
网站网站
如果我们选择class为home的a元素时,可以使用下边代码:
$('.home'); //1 $('#nav a.home'); //2
$('#nav').find('a.home'); //3
方法1:会使jQuery在整个DOM中查找class为home的a元素,性能可想而知。
方法2:为要查找的元素添加了上下文,在这里变为查找id为nav的子元素,查找性能得到了很大提升。
方法3:使用了find方法,它的速度更快,所以方法三最好。
关于jQuery选择器的性能优先级,ID选择器快于元素选择器,元素选择器快于class选择器。因为ID选择器和元素选择器是原生的JavaScript操作,而类选择器不是,大家顺便可以看下find context区别,find()
children区别。
2.1、一些规则
CSS解析引擎将自右向左计算每一条规则,它从关键选择器开始,自右向左计算每一个选择器,直到发现一个匹配的选择器,如果没有找到匹配的选择器则放弃查找。
使用较低层的规则通常更有效率。
尽可能的具体化的选择器——ID要比tag更好。
避免不必要的冗余。
通常请情况下,请保持选择器简单明了(比如充分使用ID选择器),尽可能的使用关键选择器更具体,无论对JavaScript还是CSS,这都可以加块网站的速度。到目前为止,无论使用哪一种浏览器,使用ID选择器和当个类选择器都是选中元素最快的方式。
2.2、避免多个ID选择符
Id选择符应该是唯一的,所以没有必要添加额外的选择符。
//糟糕$('div#myid');$('div#footer a.myLink');//建议$('#myid');$('#footer .myLink');
在此强调,ID选择符应该是唯一的,不需要添加额外的选择符,更不需要多个后代ID选择符。
//糟糕$('#outer #inner');//建议$('#inner');
2.3、避免隐式通用选择符
通用选择符有时是隐式的,不容易发现。
//糟糕$('.someclass :radio');//建议$('.someclass input:radio');
2.4、避免通用选择符
将通用选择符放到后代选择符中,性能非常糟糕。
//糟糕$('.container > *');//建议$('.container').children();
2.5、选择捷径
精简代码的其中一种方式是利用编码捷径。
//糟糕if(collection.length > 0){..}//建议if(collection.length){..}
2.6、为选择器指定上下文
默认情况下,当把一个选择器传递给jQuery时,它将遍历整个DOM,jQuery方法还具有一个未充分利用的参数,既可以将一个上下文参数传入jQuery,以限制它只搜索DOM中特定的一部分。
//糟糕,会遍历整个DOM$(".class");//建议,只搜索#id元素$(".class","#id");
jQuery选择器的性能比较:
$(".class","#id") >
$("#id .class") > $(".class")
3、缓存jQuery对象
缓存jQuery对象可以减少不必要的DOM查找,关于这点大家可以参考下缓存jQuery对象来提高性能。
//糟糕h = $('#element').height();$('#element').css('height',h-20);//建议$element = $('#element');h = $element.height();$element.css('height',h-20);
3.1、使用子查询缓存的父元素
正如前面所提到的,DOM遍历是一项昂贵的操作。典型做法是缓存父元素并在选择子元素时重用这些缓存元素。
//糟糕var $container = $('#container'), $containerLi = $('#container li'),
$containerLiSpan = $('#container li span');//建议(高效)var $container =
$('#container '), $containerLi = $container.find('li'), $containerLiSpan=
$containerLi.find('span');
4、变量
4.1、避免全局变量
jQuery与javascript一样,一般来说,最好确保你的变量在函数作用域内。
//糟糕$element = $('#element');h =
$element.height();$element.css('height',h-20);//建议var $element = $('#element');var h =
$element.height();$element.css('height',h-20);
4.2、使用匈牙利命名法
在变量前加$前缀,便于识别出jQuery对象。
//糟糕var first = $('#first');var second = $('#second');var value =
$first.val();//建议-在jQuery对象前加$前缀var $first = $('#first');var $second = $('#second'),var value =
$first.val();
4.3、使用Var链(单Var模式)
将多条var语句合并为一条语句,我建议将未赋值的变量放到后面。
var $first = $('#first'), $second =
$('#second'), value = $first.val(), k = 3, cookiestring = 'SOMECOOKIESPLEASE',
i, j, myArray = {};
5、正确使用事件委托
在新版jQuery中,更短的on(“click”)用来取代类似click()这样的函数。在之前的版本中on()就是bind()。自从jQuery 1.7版本后,on()附加事件处理程序的首选方法。然而,出于一致性考虑,你可以简单的全部使用on()方法
我是单元格
比如我们要在上边的单元格上绑定一个单击事件,不注意的朋友可能随手写成下边的样子:
$('#t').find('td').on('click', function ()
{$(this).css({ 'color': 'red', 'background': 'yellow' });});
这样会为每个td绑上事件,在为100个单元格绑定click事件的测试中,两者性能相差7倍之多,好的做法应该是下边写法:
$('#t').on('click', 'td', function ()
{$(this).css({ 'color': 'red', 'background': 'yellow' });});
6、精简jQuery代码
如在上述代码中我们对jQuery代码进行了适当的合并,类似的还有.attr()方法等,我们没有写成下边的方式:
$('#t').on('click', 'td', function ()
{$(this).css('color', 'red').css('background', 'yellow');});
6.1、合并函数
一般来说,最好尽可能合并函数。
//糟糕$first.click(function(){ $first.css('border','1px solid red');
$first.css('color','blue');});//建议$first.on('click',function(){
$first.css({ 'border':'1px solid red', 'color':'blue' });});
6.2、链式操作
jQuery实现方法的链式操作是非常容易的。下面利用这一点。
//糟糕$second.html(value);$second.on('click',function(){ alert('hello
everybody');});$second.fadeIn('slow');$second.animate({height:'120px'},500);//建议$second.html(value);$second.on('click',function(){ alert('hello
everybody');}).fadeIn('slow').animate({height:'120px'},500);
今天就给大家讲这么多吧,php作为开发类的一个语言,现在受到越来越多人的关注,选择合肥PHP培训班,不再孤军奋战,轻轻松松做IT高薪白领。合肥PHP培训带领有明确目标的学子迈向成功之路!
【免责声明】本文系本网编辑部分转载,转载目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责。如涉及作品内容、版权和其它问题,请在30日内与管理员联系,我们会予以更改或删除相关文章,以保证您的权益!