脚本宝典收集整理的这篇文章主要介绍了

编写更好的jQuery代码

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。

讨论jQuery和Javascript性能的文章有很多。不过在这里我还是要总结一下jQuery的提速策略,还有我自己的一些建议,希望这些建议能帮助你写出更好的jQuery和JavaScript代码。更好的代码意味着更快的应用和无垃圾的网站。更快的渲染和响应意味着更好的用户体验。

jQuery

首先,别忘了jQuery JavaScript。这意味着我们应该使用相同的代码约定,风格指南最佳实践

如果你是JavaScript新手,我建议你在尝试jQuery之前先阅读给新手的JavaScript最佳实践,还有这篇编写优质JavaScript代码

当你准备使用jQuery的时候,我强烈建议你遵守下面的指导。

变量缓存

遍历DOM是很昂贵的,所以需要重用的元素要缓存起来。

// 不好

h = $('#element').height();
$('#element').css('height',h-20);

// 好

$element = $('#element');
h = $element.height();
$element.css('height',h-20);

避免全局变量

和一般的JavaScript一样,jQuery下也最好把你的变量的作用域限制在函数之内。

// 不好

$element = $('#element');
h = $element.height();
$element.css('height',h-20);

// 好

var $element = $('#element');
var h = $element.height();
$element.css('height',h-20);

使用匈牙利标记

在包含jQuery对象的变量前加上美元符号,易于识别。

// 不好

var first = $('#first');
var second = $('#second');
var value = $first.val();

// 好一点 -  我们在jQuery对象前加上了 $ 符号

var $first = $('#first');
var $second = $('#second'),
var value = $first.val();

单一Var模式

可以将多个Var语句合并为一个。我建议将未赋值的变量放在最后。

var 
  $first = $('#first'),
  $second = $('#second'),
  value = $first.val(),
  k = 3,
  cookiestring = 'SOMECOOKIESPLEASE',
  i,
  j,
  myArray = {};

使用On

新版的jQuery支持click()之类的写法,将其作为on('click')的简写形式。然而在早先的版本中,click()却表示bind()。jQuery 1.7倾向于将on()用于附加事件处理。然而为了保持一致,你可以在所有的地方都使用on()

// 不好

$first.click(function(){
    $first.css('border','1px solid red');
    $first.css('color','blue');
});

$first.hover(function(){
    $first.css('border','1px solid red');
})

// 好一些
$first.on('click',function(){
    $first.css('border','1px solid red');
    $first.css('color','blue');
})

$first.on('hover',function(){
    $first.css('border','1px solid red');
})

精炼JavaScript

一般倾向于尽可能地组合函数:

// 不好

$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'
    });
});

使用连锁

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);

保持可读性

过于追求简短,滥用连锁,代码会因此变得不可读。尝试使用缩进和换行来保持可读性。

// 不好

$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);

善用短路

使用&&||运算符。

// 不好

function initVar($myVar) {
    if(!$myVar) {
        $myVar = $('#selector');
    }
}

// 更好

function initVar($myVar) {
    $myVar = $myVar || $('#selector');
}

优先使用简写形式

这也是精炼代码的好方法

// 不好

if(collection.length > 0){..}

// 更好

if(collection.length){..}

大量操作时分离元素

如果要对DOM元素进行大量操作,建议先分离出来,事后重新添加。

// 不好

var 
    $container = $("#container"),
    $containerLi = $("#container li"),
    $element = null;

$element = $containerLi.first(); 
//... a lot of complicated things

// 更好

var 
    $container = $("#container"),
    $containerLi = $container.find("li"),
    $element = null;

$element = $containerLi.first().detach(); 
//...a lot of complicated things

$container.append($element);

学习窍门

当你使用不熟悉的jQuery方法时,一定要看看文档,可能有更好更快的方法。

// 不好

$('#id').data(key,value);

// 更好 (更快)

$.data('#id',key,value);

缓存父元素

前面已经提到了,遍历DOM是非常昂贵的。一般而言,最好将父元素缓存起来,这样选定子元素的时候可以重复使用。

// 不好

var 
    $container = $('#container'),
    $containerLi = $('#container li'),
    $containerLiSpan = $('#container li span');

// 更好 (更快)

var 
    $container = $('#container '),
    $containerLi = $container.find('li'),
    $containerLiSpan= $containerLi.find('span');

避免使用通用选择符

当与其他selector组合使用时,universal selector极度缓慢。

// 不好

$('.container > *'); 

// 好一些

$('.container').children();

避免隐式通用选择符

隐式通用选择符同样要避免。

// 不好

$('.someclass :radio'); 

// 更好

$('.someclass input:radio');

优化选择符

例如,使用ID就已经足够,不必再画蛇添足。

// 不好

$('div#myid'); 
$('div#footer a.myLink');

// 更好
$('#myid');
$('#footer .myLink');

不要descend多个ID

ID已经足够选定元素了,所以没有必要使用后代选择符。

// 不好

$('#outer #inner'); 

// 更好

$('#inner');

尽量使用最新版

最新通常意味着最好:有时更轻量,有时更快速。显然,你需要考虑代码兼容性。例如,别忘了2.0起jQuery不支持IE 6/7/8了。

不要使用废弃的方法

重要的是总是关注每次升级时废弃的方法,尽量避免使用它们。

// 不好 - live已废弃

$('#stuff').live('click', function() {
  console.log('hooray');
});

// 更好
$('#stuff').on('click', function() {
  console.log('hooray');
});

从CDN加载jQuery代码

Google CDN从离用户最近的缓存提供代码。只需使用此url即可享受Google CDN的好处:http://code.jquery.com/jQuery-latest.min.js

有必要的时候混合原生JavaSCript代码

正如我前面说的,jQuery是JavaScript,这就意味着我们可以在jQuery下做原生JavaScript下可以做的事。编写原生(原味)JavaScript代码有时意味着可读性和可维护性的下降,文件变长,但是这也意味着更快的代码。牢记没有一个框架可以比原生JavaScript操作更小、更轻、更快。(点击图片可运行测试。)

http://blog.mathewdesign.com/wp-content/uploads/2013/10/jq.png
http://jsperf.com/jQuery-vs-JavaScript-performance-comparison

由于原生JavaScript和jQuery的性能差异,我强烈建议明智地混合两者,情况允许的时候使用jQuery函数的原生替代品

最后的考虑

最后,我推荐提高jQuery性能一文,它包括了其他一些良好实践。如果你打算深入的话,你会觉得它们很有意思。

牢记使用jQuery不是必需的,它只是一个选择。想想为什么你使用它。操作DOM?Ajax?模板?CSS动画?选择符引擎?有时候,也许值得考虑使用一个JavaScript微框架,或者使用适合你需求的jQuery定制构建


原文 Writing Better jQuery Code
翻译 SegmentFault

总结

以上是脚本宝典为你收集整理的

编写更好的jQuery代码

全部内容,希望文章能够帮你解决

编写更好的jQuery代码

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过