首页>前端开发> 高质量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时有自己心得的话，欢迎在留言中和大家分享！
相关视频教程推荐：