首页>前端开发> 高质量js代码的12条经验
高质量js代码的12条经验
- 分类:前端开发
- 时间:2022-05-04
- 阅读:1029
1、正确引用jQuery
尽量在body结束前才引入jQuery,而不是在head中。
借助第三方提供的CDN来引入jQuery,同时注意当使用第三方CDN出现问题时,要引入本地的jQuery文件。
如果在</body>前引入script文件的话,就不用写document.ready了,因为这时执行js代码时DOM已经加载完毕了。
<body> <script src="http://lib.sinaapp.com/js/jquery11/1.8/jquery.min.js"></script> <script>window.jQuery document.write('<script src="jquery1.8.min.js"> /script>')</script> </body>
2、优化jQuery选择器
高效正确的使用jQuery选择器是熟练使用jQuery的基础,而掌握jQuery选择器需要一定的时间积累,我们开始学习jQuery时就应该注意选择器的使用。
<div id="nav" class="nav"> <a class="home" href="https://www.jsdaima.com/">js代码 - IT资源下载平台</a> <a class="articles" href="https://www.jsdaima.com/js/">js特效</a> </div>
$('.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、一些规则
使用较低层的规则通常更有效率。
尽可能的具体化的选择器——ID要比tag更好。
避免不必要的冗余。
通常请情况下,请保持选择器简单明了(比如充分使用ID选择器),尽可能的使用关键选择器更具体,无论对JavaScript还是CSS,这都可以加块网站的速度。到目前为止,无论使用哪一种浏览器,使用ID选择器和当个类选择器都是选中元素最快的方式。
2.2、避免多个ID选择符
// 糟糕 $('div#myid'); $('div#footer a.myLink'); // 建议 $('#myid'); $('#footer .myLink');
// 糟糕 $('#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、为选择器指定上下文
//糟糕,会遍历整个DOM $(".class"); //建议,只搜索#id元素 $(".class","#id");
$(".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、使用子查询缓存的父元素
// 糟糕 var $container = $('#container'), $containerLi = $('#container li'), $containerLiSpan = $('#container li span'); // 建议 (高效) var $container = $('#container '), $containerLi = $container.find('li'), $containerLiSpan= $containerLi.find('span');
4、变量
4.1、避免全局变量
// 糟糕 $element = $('#element'); h = $element.height(); $element.css('height',h-20); // 建议 var $element = $('#element'); var h = $element.height(); $element.css('height',h-20);
4.2、使用匈牙利命名法
// 糟糕 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 $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()方法。
<table id="t"> <tr> <td>我是单元格</td> </tr> </table>
$('#t').find('td').on('click', function () { $(this).css({ 'color': 'red', 'background': 'yellow' }); });
$('#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、链式操作
// 糟糕 $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);
7、减少DOM操作
刚开始使用jQuery时可能会频繁的操作DOM,这是相当耗费性能的。如我们要在body中动态输出一个表格,一些朋友会这样写:
//糟糕 var $t = $('body'); $t.append('<table>'); $t.append('<tr><td>1</td></tr>'); $t.append('</table>'); //建议 $('body').append('<table><tr><td>1</td></tr></table>');
7.1、繁重的操作中分离元素
// 糟糕 var $container = $("#container"), $containerLi = $("#container li"), $element = null; $element = $containerLi.first(); //... 许多复杂的操作 // better var $container = $("#container"), $containerLi = $container.find("li"), $element = null; $element = $containerLi.first().detach(); //... 许多复杂的操作 $container.append($element);
7.2、最小化DOM更新
当改变样式,而不改变页面几何布局时,将会发生重绘。隐藏一个元素或者改变一个元素的背景色时都将导致一次重绘。
当对页面结构进行更新时,将导致页面重布局。
//糟糕for(var i=0; i<10000; i++){ $("#main table").append("<tr><td>aaaa</td></tr>"); } //建议 var tablerow =""; for(var i=0; i<10000; i++){ tablerow +="<tr><td>aaaa</td></tr>"; } $("#main table").append(tablerow);
8、维持代码的可读性
伴随着精简代码和使用链式的同时,可能带来代码的难以阅读。添加缩紧和换行能起到很好的效果。
// 糟糕 $second.html(value); $second.on('click',function(){ alert('hello everybody'); }).fadeIn('slow').animate({height:'120px'},500); // 建议 $second.html(value); $second .on('click',function(){ alert('hello everybody');}) .fadeIn('slow') .animate({height:'120px'},500);
9、选择短路求值
短路求值是一个从左到右求值的表达式,用 &&(逻辑与)或 (逻辑或)操作符。
// 糟糕 function initVar($myVar) { if(!$myVar) { $myVar = $('#selector'); } } // 建议 function initVar($myVar) { $myVar = $myVar $('#selector'); }
10、坚持最新版本
新版本通常更好:更轻量级,更高效。显然,你需要考虑你要支持的代码的兼容性。例如,2.0版本不支持ie 6/7/8。
摒弃弃用方法
关注每个新版本的废弃方法是非常重要的并尽量避免使用这些方法。
// 糟糕 - live 已经废弃 $('#stuff').live('click', function() { console.log('hooray'); }); // 建议 $('#stuff').on('click', function() { console.log('hooray'); }) // 注:此处可能不当,应为live能实现实时绑定,delegate或许更合适
11、最后忠告
最后,我记录这篇文章的目的是提高jQuery的性能和其他一些好的建议。如果你想深入的研究对这个话题你会发现很多乐趣。记住,jQuery并非不可或缺,仅是一种选择。思考为什么要使用它。DOM操作?ajax?模版?css动画?还是选择符引擎?或许javascript微型框架或jQuery的定制版是更好的选择。
虽然都是陈词滥调,但是我发现还不能很好得做到上述所有,记录下来希望自己能够全部做到。
12、不使用jQuery
原生函数总是最快的,这点不难理解,在代码书写中我们不应该忘记原生js代码
。
就先总结这几条吧,每条建议并不难理解,但总结全面的话还是要花费不少时间的。如在减少代码段中,如果需要根据条件从数组中得到新数组时,可以使用$.grep() 方法,如果你在使用jQuery时有自己心得的话,欢迎在留言中和大家分享!
相关视频教程推荐: