编写更好的jQuery代码

有很多讨论jQuery和javascript性能的文章。然而,在这篇文章中,我计划总结一系列提供速度的建议来提高你的jQuery和javascript代码。当你准备用jQuery时,我强烈推荐遵循下面的规则:

1. 建立变量缓存(var caching)

DOM的遍历是相当费时间的,因此当你选择的元素计划重用他们时,一定要为他们建立缓存。

编写更好的jQuery代码
// bad code
h = $(‘#element‘).height();
$(‘#element‘).css(‘height‘,h-20);

// good code
$element = $(‘#element‘);
h = $element.height();
$element.css(‘height‘,h-20);
编写更好的jQuery代码

2. 避免全局变量(avoid globals)
运用jQuery,和运用一般的javascript一样,最好确保你的变量在你的函数中拥有合适的范围。

编写更好的jQuery代码
// bad code
$element = $(‘#element‘);
h = $element.height();
$element.css(‘height‘,h-20);

// good code
var $element = $(‘#element‘);
var h = $element.height();
$element.css(‘height‘,h-20);
编写更好的jQuery代码

3. 应用匈牙利命名法(using hungarian notation)
在变量的前面放置$符号使人很容易确认这个变量包含一个jQuery对象。

编写更好的jQuery代码
// bad
var first = $(‘#first‘);
var second = $(‘#second‘);
var value = $first.val();

// better - we use to put $ symbol before jQuery-manipulated objects
var $first = $(‘#first‘);
var $second = $(‘#second‘),
var value = $first.val();
编写更好的jQuery代码

4. 应用变量链(use var chaining)(单变量模式)

Rather than having multiple var statements, you can combine them into a single statement. I suggest placing any variables without assigned values at the end.

编写更好的jQuery代码
var 
  $first = $(‘#first‘),
  $second = $(‘#second‘),
  value = $first.val(),
  k = 3,
  cookiestring = ‘SOMECOOKIESPLEASE‘,
  i,
  j,
  myArray = {};
编写更好的jQuery代码

5. 最好选择“on”(prefer ‘On‘)

Recent versions of jQuery have changed whereby functions like click() are shorthand foron(‘click‘). In prior versions the implementation was different whereby click() what shorthand for bind(). As of jQuery 1.7, on() is the preferred method for attaching event handlers. However, for consistency you can simply use on() across the board.

编写更好的jQuery代码
// bad code
$first.click(function(){
    $first.css(‘border‘,‘1px solid red‘);
    $first.css(‘color‘,‘blue‘);
});

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


// better code
$first.on(‘click‘,function(){
    $first.css(‘border‘,‘1px solid red‘);
    $first.css(‘color‘,‘blue‘);
})

$first.on(‘hover‘,function(){
    $first.css(‘border‘,‘1px solid red‘);
})
编写更好的jQuery代码

6. 使用链结构(use chaining)

Following on the above rule, jQuery makes it easy to chain mathods together. Take advantage of this.

编写更好的jQuery代码
// bad
$second.html(value);
$second.on(‘click‘,function(){
    alert(‘hello everybody‘);
});
$second.fadeIn(‘slow‘);
$second.animate({height:‘120px‘},500);

// better
$second.html(value);
$second.on(‘click‘,function(){
    alert(‘hello everybody‘);
}).fadeIn(‘slow‘).animate({height:‘120px‘},500);
编写更好的jQuery代码

7. 保持代码的可读性(keep your code readable)

When trying to condense your scripts and utilize chaining, code can sometimes become unreadable. Try to utlize tabs and new lines to keep things looking pretty.

编写更好的jQuery代码
// bad code
$second.html(value);
$second.on(‘click‘,function(){
    alert(‘hello everybody‘);
}).fadeIn(‘slow‘).animate({height:‘120px‘},500);

// better code
$second.html(value);
$second
            .on(‘click‘,function(){ alert(‘hello everybody‘);})
            .fadeIn(‘slow‘)
            .animate({height:‘120px‘},500);
编写更好的jQuery代码

8. 使用短路循环(Prefer Short-circuiting)
Short-curcuit evaluation are expressions evaluated from left-to-right and use the &&(logical and) or || (logical or) operators.

编写更好的jQuery代码
// bad code
function initVar($myVar) {
    if(!$myVar) {
        $myVar = $(‘#selector‘);
    }
}

// better code
function initVar($myVar) {
    $myVar = $myVar || $(‘#selector‘);
}
编写更好的jQuery代码

9. 使用简写(prefer shortcuts)

One of the ways to condense your code is to take advantage of coding shortcuts.

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

// better
if(collection.length){..}

10. 对元素进行大量操作时应选择拆卸(detach elements when doing heavy manipulations)

if you are going to do heavy manupipulation of a DOM element, it is recommended that you first detach it and then re-append it.

编写更好的jQuery代码
// bad code
var 
    $container = $("#container"),
    $containerLi = $("#container li"),
    $element = null;

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

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

$element = $containerLi.first().detach(); 
//...a lot of complicated things
$container.append($element);
编写更好的jQuery代码

11. 知道技巧(know the tricks)

When using methods within jQuery that you may have less experience with, be sure to check the documentation as there may be a preferable or faster way to use it.

// bad
$(‘#id‘).data(key,value);

// better (faster)
$.data(‘#id‘,key,value);

12. 使用子查询缓存父元素(use subqueries caching parents)

As mentioned earlier, DOM traversal is an expensive operation. It is typically better to cache parent elements and reuse these cached elements when selecting child elements.

编写更好的jQuery代码
// bad
var 
    $container = $(‘#container‘),
    $containerLi = $(‘#container li‘),
    $containerLiSpan = $(‘#container li span‘);

// better (faster)
var 
    $container = $(‘#container ‘),
    $containerLi = $container.find(‘li‘),
    $containerLiSpan= $containerLi.find(‘span‘);
编写更好的jQuery代码

13. 避免通用选择器(avoid universal selectors)

When combined with other selectors, the universal selector is extremely slow.

// bad
$(‘.container > *‘); 

// better
$(‘.container‘).children();

14. 避免默认通用选择器(avoid implied universal selectors)

When you leave off the selector, the universal selector (*) is still implied.

// bad
$(‘.someclass :radio‘); 

// better
$(‘.someclass input:radio‘);

15. 优化选择器(optimize selectors)

for example, using an ID should already be sufficiently specific, so there is no need to add additional selector specificity.

编写更好的jQuery代码
// bad
$(‘div#myid‘); 
$(‘div#footer a.myLink‘);

// better
$(‘#myid‘);
$(‘#footer .myLink‘);
编写更好的jQuery代码

16.  不要担心多个IDs(Dont descend mutiple IDs)

Again, when used properly, ID’s should be sufficiently specific not to require the additional specificity of multiple descendant selectors.

// bad
$(‘#outer #inner‘); 

// better
$(‘#inner‘);

17.  不要用废弃的方法(Dont use deprecated Methods)

It is important to always keep an eye on deprecated methods for each new version and try avoid using them.

编写更好的jQuery代码
// bad - live is deprecated
$(‘#stuff‘).live(‘click‘, function() {
  console.log(‘hooray‘);
});

// better
$(‘#stuff‘).on(‘click‘, function() {
  console.log(‘hooray‘);
});
编写更好的jQuery代码

18. 从内容发布网络上加载jQuery code

The Google CDN quickly delivers the script from the user’s nearest cache location. To use the Google CDN, use the following url for this http://code.jQuery.com/jQuery-latest.min.js

 

编写更好的jQuery代码

上一篇:jQuery 调用后台方法(net)


下一篇:C# 路径