首页 > Program > 编写更好的jQuery代码的建议
2015
03-27

编写更好的jQuery代码的建议

讨论jQuery与JavaScript性能的文章数不胜数。在这篇文章总，我将对以往的一些经验技巧进行总结并加上一些我对与改善jQuery与JavaScript代码质量的一些建议。更好的代码意味着更快的应用和更迅捷的网站。快速渲染和交互意味着更好的用户体验。

首先，一定要记住jQuery是JavaScript。这意味着我们应该采用相同的编程习惯，编程风格以及编程的最佳实践。

其次，如果你是一名JavaScript新手，我推荐你在开始胡乱使用jQuery之前阅读JavaScript best practices for beginners上那篇关于编写高质量JavaScript的文章。

当你决定要开始使用jQuery时，我强烈推荐你遵循下列指导原则：

变量缓存

DOM遍历会消耗大量的资源，如果被选择的元素要再次被使用的话，那么将它们放入缓存中。

JavaScript
1
2
3
4
5
6
7
8
9
//不好的代码    
 
    h = $('#elemnt').height();
    $('#element').css('height',h-20);
 
    //好的代码
    $element = $('#element');
           h = $element.height();
    $element.css('height',h-20);

 

避免全局变量

使用jQuery，或者使用原生JavaScript时，最好确保你的变量被放置在合适的函数作用域中。

JavaScript
1
2
3
4
5
6
7
8
9
// 不好的代码
$element = $('#element');
       h = $element.height();
$element.css('height',h-20);
 
// 好的代码
var $element = $('#element');
var h        = $element.height();
$element.css('height',h-20);

 

使用匈牙利标记

将$符号放置在变量名称之前以区分变量是一个jQuery对象：

JavaScript
1
2
3
4
5
6
7
8
9
// 不好的代码
var first  = $('#first');
var second = $('#second');
var value  = $first.val();
 
//最好将$符号置于jQuery对象之前
var $first  = $('#first');
var $second = $('#second'),
var value   = $first.val();

 

使用变量声明链（单VAR模式）

比起使用多个var声明语句，你可以将它们合并为单个var声明语句。我建议将不复制的变量放置于声明语句的后面。

JavaScript
1
2
3
4
5
6
7
8
9
var
  $first       = $('#first'),
  $second      = $('#second'),
  value        = $first.val(),
  k            = 3,
  cookiestring = 'SOMECOOKIESPLEASE',
  i,
  j,
  myArray = {};

 

尽可能使用’on’

最新版本的jQuery将on(‘click’)改成了简写版本click()。而在之前的版本中的实现方式略有不同，在那些版本中click()是bind()的简写版本。到了jQuery1.7，人们更喜欢使用on()方法来进行事件绑定。然而，为了版本间连续性的考虑你最好自始至终使用on()。

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// 不好的代码
 
$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

一般来说，我们更倾向于将函数尽可能的合并起来。

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
// 不好的代码
$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引入了链式表达使代码压缩更加容易。尽量使用它。

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
// 不好的代码
$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);

 

保持代码的可读性

当你使用链式表达或者其他方法压缩代码时，有时代码会变得不可读。尝试使用tab或者换行让你的代码始终是可读的。

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
// 不好的代码
$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);

 

尽可能使用短路表达式(Short-circuiting)

短路表达式是从左到右使用&&（逻辑与）或者||（逻辑或）操作符的表达式。

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
// 不好的代码
 
function initVar($myVar) {
    if(!$myVar) {
        $myVar = $('#selector');
    }
}
 
// 好的代码
function initVar($myVar) {
    $myVar = $myVar || $('#selector');
}

 

尽可能使用简写

压缩代码的一种方式是尽可能使用代码简写。

JavaScript
1
2
3
4
5
// 不好的代码
if(collection.length > 0){..}
 
// 好的代码
if(collection.length){..}

 

当进行大量操纵时分离分离元素（detach elements）

如果你要对一个DOM元素进行大量操作，最好首先分离（detach）它然后在重新追加它（re-append）。

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// 不好的代码
 
var
    $container   = $("#container"),
    $containerLi = $("#container li"),
    $element     = null;
    $element     = $containerLi.first();
//... 大量复杂操作
 
// 好的代码
 
var
    $container   = $("#container"),
    $containerLi = $container.find("li"),
    $element     = null;
    $element     = $containerLi.first().detach();
//...大量复杂操作
 
$container.append($element);

 

了解小技巧

当你使用那些缺乏使用经验的jQuery方法时，确保查阅文档看看有没有更好更快的使用方式。

JavaScript
1
2
3
4
5
// 不好的代码
$('#id').data(key,value);
 
// 好的代码 (更快)
$.data('#id',key,value);

 

使用子查询缓存父元素

正如前面提到的，DOM遍历会消耗大量资源。因此最好将父元素放入缓存中一边使用它们来选择子元素。

JavaScript
1
2
3
4
5
6
7
8
9
10
11
// 不好的代码
var
    $container       = $('#container'),
    $containerLi     = $('#container li'),
    $containerLiSpan = $('#container li span');
 
// 好的代码 (更快)
var
    $container       = $('#container '),
    $containerLi     = $container.find('li'),
    $containerLiSpan = $containerLi.find('span');

 

避免通用选择器

在和其他选择器合并时，通用选择器非常非常慢。

JavaScript
1
2
3
4
5
// 不好的代码
$('.container > *');
 
// 好的代码
$('.container').children();

 

避免隐式通用选择器

当你没有指明选择器时，实际上是添加了隐式选择器。

JavaScript
1
2
3
4
5
// 不好的代码
$('.someclass :radio');
 
// 好的代码
$('.someclass input:radio');

 

优化选择器

例如，使用一个ID已经足以指明元素，那么久没有必要添加多余的选择器了。

JavaScript
1
2
3
4
5
6
7
8
// 不好的代码
 
$('div#myid');
$('div#footer a.myLink');
 
// 好的代码
$('#myid');
$('#footer .myLink');

 

不要使用多重子ID

再次强调，正常情况下，ID已经足以指明元素而不需要添加多余的选择器。

JavaScript
1
2
3
4
5
// 不好的代码
$('#outer #inner');
 
// 好的代码
$('#inner');

 

尽量使用最新版本

最新的版本通常是最好的版本：它更轻量级而且更快。显然，你需要考虑代码的兼容性。例如，不要忘记2.0版本不再支持IE 6/7/8。

不要使用已经启用的方法

非常重要的一点是记住每个新版本中弃用的方法并且避免使用它们。

JavaScript
1
2
3
4
5
6
7
8
9
// 不好的代码 - live 已经被弃用
$('#stuff').live('click', function() {
  console.log('hooray');
});
 
// 好的代码
$('#stuff').on('click', function() {
  console.log('hooray');
});

 

从CDN载入jQuery代码

GoogleCDN将从用户最近的缓存位置中提供脚本。为了使用Google，你可以载入这个url地址：http://code.jQuery.com/jQuery-latest.min.js

需要时合并jQuery和原生JavaScript

正如我在前面提到的，jQuery是JavaScript，这意味着我们可以使用原生JavaScript来完成我们在jQuery中能完成的任务。编写原生的JavaScript通常意味着缺乏可读性、可维护性以及更长的脚本文件。但是它通常速度更快。记住没有那个框架会比原生JavaScript操作更小更快更轻量级。

由于原生JavaScript和jQuery质检性能的差异，我强烈推荐将两者混合使用 — 尽可能使用jQuery函数的原生代码。

最后的建议

记住使用jQuery并不是必须的，而只是一个选择。好好考虑为什么你需要使用它。DOM操作？AJAX？模板？CSS动画？一个选择器引擎？有时你可以考虑一个更微型的JavaScript框架或者自己根据需求创建一个自定义的类jQuery库。

转至：http://www.html-js.com/article/A-day-to-learn-JavaScript-to-write-better-jQuery-code

最后编辑：
作者：7iang
做自己
站内专栏

您可能还会对这些文章感兴趣！