编写高效的js/jQuery代码 :rocket:

讨论jQuery和javascript性能的文章并不罕见。然而，本文我计划总结一些速度方面的技巧和我本人的一些建议，来提升你的jQuery和javascript代码。好的代码会带来速度的提升。快速渲染和响应意味着更好的用户体验。

首先，在脑子里牢牢记住jQuery就是javascript。这意味着我们应该采取相同的编码惯例,风格指南和最佳实践。

首先，如果你是一个javascript新手，我建议您阅读 《给JavaScript初学者的24条最佳实践》http://youngsterxyf.github.io/2013/03/11/js-best-practices-for-beginners/ ,这是一篇高质量的javascript教程，接触jQuery之前最好先阅读。

---

先来一个例子吧

美刀是个很重的函数，尽量其缓存结果

var $merchantPage = $(".merchant_page");
var $cartPage = $(".cart_page");
var $shade = $("#shade");
$("#check_order").on("click", function() {
    $merchantPage.hide();
    $cartPage.show();
});

$(".continue").on("click", function() {
    $merchantPage.show();
    $cartPage.hide();
});

$(".close").on("click", function() {
    $shade.hide();
});

代码要有语义，比如很明显例子里有类似切换页面的逻辑，有个名字会让代码可读性提高很多

var $merchantPage = $(".merchant_page");
var $cartPage = $(".cart_page");
var $shade = $("#shade");
$("#check_order").on("click", showCart);

$(".continue").on("click", showMerchant);

$(".close").on("click", closePage);

function closePage() {
    $shade.hide();
}
function showCart() {
    $merchantPage.hide();
    $cartPage.show();
}
function showMerchant() {
    $merchantPage.show();
    $cartPage.hide();
}

最后dom有个范围，有个闭包，有个chain，再加一行点睛的注释，代码就非常漂亮，主次分明了

//商品购买模块
(function($view) {
    var $merchantPage = $view.find(".merchant_page");
    var $cartPage = $view.find(".cart_page");
    var $shade = $view.find("#shade");

    $view
        .on("click", "#check_order", showCart)
        .on("click", ".continue", showMerchant)
        .on("click", ".close", closePage)
    ;

    function closePage() {
        $shade.hide();
    }

    function showCart() {
        $merchantPage.hide();
        $cartPage.show();
    }

    function showMerchant() {
        $merchantPage.show();
        $cartPage.hide();
    }

})($(document.body))

---

当你准备使用jQuery,我强烈建议你遵循下面这些指南:

缓存变量

DOM遍历是昂贵的，所以尽量将会重用的元素缓存。

// 糟糕

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

// 建议

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

避免全局变量

jQuery与javascript一样，一般来说,最好确保你的变量在函数作用域内。

// 糟糕

$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语句合并为一条语句，我建议将未赋值的变量放到后面。

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

请使用’On’

在新版jQuery中，更短的 on(“click”) 用来取代类似 click() 这样的函数。在之前的版本中 on() 就是 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元素做大量操作（连续设置多个属性或css样式），建议首先分离元素然后在添加。

// 糟糕

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

熟记技巧

你可能对使用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');

避免通用选择符

将通用选择符放到后代选择符中，性能非常糟糕。

// 糟糕

$('.container > *'); 

// 建议

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

避免隐式通用选择符

通用选择符有时是隐式的，不容易发现。

// 糟糕

$('.someclass :radio'); 

// 建议

$('.someclass input:radio');

优化选择符

例如，Id选择符应该是唯一的，所以没有必要添加额外的选择符。

// 糟糕

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

// 建议
$('#myid');
$('#footer .myLink');

避免多个ID选择符

在此强调，ID 选择符应该是唯一的，不需要添加额外的选择符，更不需要多个后代ID选择符。

// 糟糕

$('#outer #inner'); 

// 建议

$('#inner');

坚持最新版本

新版本通常更好：更轻量级，更高效。显然，你需要考虑你要支持的代码的兼容性。例如，2.0版本不支持ie 6/7/8。

摒弃弃用方法

关注每个新版本的废弃方法是非常重要的并尽量避免使用这些方法。

// 糟糕 - live 已经废弃

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

// 建议
$('#stuff').on('click', function() {
  console.log('hooray');
});
// 注：此处可能不当，应为live能实现实时绑定，delegate或许更合适

利用CDN

谷歌的CND能保证选择离用户最近的缓存并迅速响应。（使用谷歌CND请自行搜索地址，此处地址以不能使用，推荐jquery官网提供的CDN）。
常用前端公共库CDN服务: http://www.jingwentian.com/t-319

必要时组合jQuery和javascript原生代码

如上所述，jQuery就是javascript，这意味着用jQuery能做的事情，同样可以用原生代码来做。
原生代码（或 vanilla http://vanilla-js.com/ ）的可读性和可维护性可能不如jQuery，而且代码更长。但也意味着更高效（通常更接近底层代码可读性越差，性能越高，例如：汇编，当然需要更强大的人才可以）。牢记没有任何框架能比原生代码更小，更轻，更高效（注：测试链接已失效，可上网搜索测试代码）。

鉴于vanilla 和 jQuery之间的性能差异，我强烈建议吸收两人的精华，使用（可能的话）和jQuery等价的原生代码 ( http://www.leebrimelow.com/native-methods-jQuery/ )。

最后忠告

最后，我记录这篇文章的目的是提高jQuery的性能和其他一些好的建议。如果你想深入的研究对这个话题你会发现很多乐趣。记住，jQuery并非不可或缺，仅是一种选择。思考为什么要使用它。DOM操作？ajax？模版？css动画？还是选择符引擎？或许javascript微型框架或jQuery的定制版是更好的选择。

---

参考

(翻译自：http://flippinawesome.org/2013/11/25/writing-better-jquery-code/ )
http://yanhaijing.com/jquery/2013/12/05/writing-better-jquery-code/
http://segmentfault.com/q/1010000000633373

http://ryxxlong.iteye.com/blog/622460
http://blog.jobbole.com/7026/
http://blog.jobbole.com/10279/

---

给JavaScript初学者的24条最佳实践

JavaScript初学者应知的24条最佳实践

原文 http://youngsterxyf.github.io/2013/03/11/js-best-practices-for-beginners/

1.优先使用===，而不是==

JavaScript使用两种相等性操作符：===|!==和==|!=。通常认为做比较的最佳实践是使用前一组操作符。

"若两个操作数的类型和值相同，那么===比较的结果为真，!==比较的结果为假。" --- JavaScript语言精粹(JavaScript: The Good Parts)

然而，如果使用==和!=，当比较不同类型的操作数时，你就会碰到问题啦。在这种情况下，这组操作符会尝试对操作数的值做无用的强制转换。

2.Eval就是糟糕的代名词

对于那些不熟悉JavaScript的人来说，函数"evel"让我们能够访问JavaScript编译器。我们可以通过给"eval"传递一个字符串参数来得到该字符串执行的结果。

这不仅会极大地降低你的脚本的性能，也会造成一个巨大的安全隐患，因为这赋予传递进来的纯文本太多的能力。要尽可能地避免eval函数的使用。

3.不要懒手

技术上来说，你确实可能侥幸地省略多数花括号和分号。大多数浏览器都能够正确地解释如下代码片段：

if(someVariableExists) x = false

然而，再考虑一下这段代码：

if(someVariableExists) x = false anotherFunctionCall();

可能会有人认为上一段代码等价于：

if(someVariableExists) { x = false; anotherFunctionCall(); }

很不幸，他错了。事实上，它的本意是：

if(someVariableExists) x = false; anotherFunctionCall();

你应该也注意到了，代码中缩进模仿了花括号的功能。毋庸置疑，这是非常恐怖的做法，无论如何都应该避免。唯一可以省略花括号的时候是在一行式的语句中，但即使这种情况，也是很有争议的。

if(2 + 2 === 4) return 'nicely done';

始终要想着以后

如果以后的某个时候，你需要在这种if语句中增加更多的命令，那该怎么办呢？没法子，你就只能重写这块代码了。处理这个问题的底线是对于省略写法保持谨慎。

4.使用JS Lint

JSLint是Douglas Crockford编写的一个调试器。简单地将你的脚本拷贝进去，它就会快速地扫描你的代码中任何明显的问题和错误。

"JSLint获取一份JavaScript源码，然后扫描代码。如果发现问题，就会返回一条信息描述这个问题以及这个问题在源码中的大致位置。问题虽然经常是语法错误，却不一定是。JSLint也会查看一些风格习惯以及结构问题。它并不证明你的代码是否正确，只是提供另外的一双眼睛来帮助发现问题。"---JSLint文档

在结束脚本代码的编写之前，对其执行一次JSLint，能够保证你不会犯一些愚蠢的错误。

5.将脚本置于页面的底部 这条技巧在本系列前面的文章中也推荐过。因为它在此处也非常合适（As it's highly appropriate though），所有我将那段信息直接粘贴在这里。


记住---这条最佳实践的主要目标是尽可能快速地为用户加载页面。当加载一个脚本时，浏览器直到整个脚本文件全部加载完毕才能继续。因此，用户必须等上更长的时间才能注意到任何的进度。

如果JS文件的目的仅仅是增加功能---例如，在点击某个按钮后---那么就将那些文件放在底部，body结束标签之前吧。这绝对是一个最佳实践。

更好的做法

```

And now you know my favorite kinds of corn.

```

6.在For语句之外声明变量

当执行一个冗长的"for"语句之时，仅仅让解释引擎做必须干的活吧。例如：

糟糕的做法

for(var i = 0; i < someArray.length; i++) { var container = document.getElementById('container'); container.innerHtml += 'my number: ' + i; console.log(i); }

注意上面代码片段中的每次迭代都需要检查数组的长度，并且每次都要遍历DOM树找到"container"元素---效率多低啊！

更好的做法

var container = document.getElementById('container'); for(var i = 0, len = someArray.length; i < len; i++) { container.innerHtml += 'my number: ' + i; console.log(i); }

感谢有位朋友留下评论展示如何进一步优化上面的代码块。

7.构建字符串的最快方式

当需要遍历一个数组或者对象之时，不要总是使用你能信手粘来的"for"语句。创造性地找个能够完成工作的最快速的方案。

var arr = ['item 1', 'item 2', 'item 3', ...]; var list = '<ul><li>' + arr.join('</li><li>') + '</li></ul>';

"我不会以测试基准来烦你；你只须相信我（或者自己去测试一下）---这是目前为止最快的方式！"

使用原生方法（比如join()），不用管抽象层面背后发生了什么，通常会比任何非原生方法快得多。 --- James Padolsey, james.padolsey.com"

8.减少全局变量

"通过将全局的东西封装进单个命名空间，能够大大降低与其他应用、部件、代码库交互混乱的概率。"--- Douglas Crockford

``` var name = 'jeffrey'; var lastname = 'Way';

function doSomething() {...}

console.log(name); // Jeffrey -- or window.name ```

更好的做法

var DudeNameSpace = { name: 'Jeffrey', lastname: 'Way', doSometing: function() {...} } console.log(DudeNameSpace.name); // Jeffrey

注意我们是怎样将全局性的“足迹”减少为一个命名可笑的"DudeNameSpace"对象的。

9.注释你的代码

一开始看起来似乎没有必要，但请相信我，你将会想尽可能好地注释你的代码。当你几个月后再次回到项目，会发生什么呢？发现你根本没法轻松地记起当初对每一行代码的想法。或者，如果你的某个同事需要修改你的代码，那又会怎么样呢？始终，一直记着注释你代码的重要部分吧。

// Cycle through array and echo out each name for(var i = 0, len = array.length; i < len; i++) { console.log(array[i]); }

10.拥抱渐进增强

始终考虑到如何处理JavaScript禁用的情况。也许你会想“大多数我网页的阅读器都是启用JavaScript的，因此我不担心这个问题。”然而，这会是一个巨大的错误。

你曾花时间去看过关闭JavaScript后你的漂亮的滑动条是什么样么？（下载Web开发者工具栏以方便干这事。）也许它会完全破坏你的站点。按照以往经验，设计你的站点时应假设将会禁用JavaScript。那么，一旦你这样做了，那么开始渐进地增强你的网页布局吧！

11.不要传递字符串给"SetInterval"或"SetTimeOut"

考虑一下如下代码：

setInterval( "document.getElementById('container').innerHTML += 'my new number: ' + i", 3000 );

这段代码不仅低效，而且其行为与"eval"函数相同。永远不要传给字符串给SetInterval和SetTimeOut。相反，应传递一个函数名。

setInterval(someFunction, 3000);

12.不要使用"With"语句 乍一看，"With"语句似乎是个聪明的想法。基本概念是它们能够为访问深度嵌套对象提供一种简写方式。例如...

with (being.person.man.bodyparts) { arms = true; legs = true; }

取代如下写法

being.person.man.bodyparts.arms = true; being.person.man.bodyparts.legs = true;

很不幸，经过一些测试，会发现这种简写在设置新成员时表现非常糟糕。作为替代，你应该使用var。

var o = being.person.man.bodyparts; o.arms = true; o.legs = true;

13.使用{}而不是New Object()

JavaScript中有多种创建对象的方式。也许更传统的方式是使用"new"构造器，像这样：

var o = new Object(); o.name = 'Jeffrey'; o.lastname = 'Way'; o.someFuncion = function() { console.log(this.name); }

然而，这种方式因其行为并不是我们所想的那样而被认为是“糟糕的实践。相反，我推荐你使用更健壮的对象字面方法。

更好的写法

var o = { name: 'Jeffrey', lastName: 'Way', someFunction: function() { console.log(this.name); } };

注意如果你只是想简单地创建个空对象，{}就派上用场了。

var o = {};

"对象字面量使我们能够编写支持很多特性的代码，并对代码的实现者来说代码仍然相对直观。不需要直接调用构造器或维护传递给函数的参数的正确顺序，等等。" --- dyn-web.com

14.使用[]而不是New Array()

这同样适用于创建一个新数组。

过得去的写法

var a = new Array(); a[0] = 'Joe'; a[1] = 'Plumber';

更好的写法

var a = ['Joe', 'Plumber'];

"JavaScript中一个常见的错误是需要数组时使用对象或需要对象时使用数组。规则很简单：当属性名是小的连续整数时，你应该使用数组。否则，使用对象"---Douglas Crockford

15.一长串变量？省略"var"关键字，使用逗号替代

var someItem = 'some string'; var anotherItem = 'another string'; var oneMoreItem = 'one more string';

更好的写法

var someItem = 'some string', anotherItem = 'another string', oneMoreItem = 'one more string';

相当的不言自明。我不知道这里是否有任何真正的速度提升，但是它使你的代码更加简洁了。

16.始终，始终使用分号

技术上来说，大多数浏览器都允许你的省略一些分号。

var someItem = 'some string' function doSomething() { return 'something' }

话虽如此，但这是一种非常糟糕的做法，可能导致更大的问题，问题查找起来也更困难。

更好的写法

var someItem = 'some string'; function doSomething() { return 'something'; }

18."For in"语句

遍历对象内的成员时，你也会得到方法函数。为了解决这个问题，应始终将你的代码包装在一个if语句中来过滤信息。

for(key in object) { if(object.hasOwnProperty(key)) { ... then do something... } }

引自JavaScript: 语言精粹， Douglas Crockford著

19.使用Firebug的"Timer"特性来优化代码

需要一种快速简单的方法来检测一个操作花费多长时间么？使用Firebug的"timer"特性记录结果。

function TimeTracker() { console.time("MyTimer"); for(x=5000; x > 0; x--){} console.timeEnd("MyTimer"); }

20.阅读，阅读，再阅读

我是一个Web开发博客的超级粉丝（比如这个博客！），但吃午餐或者睡前，博客确实不是书籍的替代品。始终在你的床前桌上放一本wen开发书籍吧。如下是一些我最喜欢的JavaScript书籍。

面向对象的JavaScript JavaScript：语言精粹 学习jQuery 1.3 学习JavaScript

多阅读几遍。我仍旧在读！

21.自执行函数(Self-Executing Functions)

相比调用函数，当页面加载或调用父函数时，让函数自动执行会简单些。简单地将你的函数包装在圆括号内，并添加额外的一对圆括号，其本质上就调用了这个函数。

(function doSomething() { return { name: 'jeff', lastName: 'way' }; })();

22.原始(raw)JavaScript代码的执行速度始终快于使用代码库

JavaScript代码库，如jQuery和Mootools，能够为你节省大量的编码时间---特别是使用AJAX操作。话虽如此，始终谨记代码库的执行速度始终是比不上原始JavaScript代码的（假设了代码的正确性）。

jQuery的"each"方法用来做遍历非常赞，但使用原生"for"语句始终会快一些。

23.Crockford的JSON.Parse

虽然JavaScript 2应该有一个内置的JSON解析器，但写本文之时，我们仍旧需要自己实现。Douglas Crockford，JSON的创造者，已经实现了一个解析器供你使用。可以从这里下载。

简单地导入该脚本，你就能获得一个新的JSON全局对象，用于解析你的.json文件。

``` var response = JSON.parse(xhr.responseText);

var container = document.getElementById('container'); for(var i = 0, len = response.length; i < len; i++) { container.innerHTML += '

• ' + response[i].name + ' : ' + response[i].email + '

'; } ```

24.删除"Language"

几年前，在script标签内常见有"language"属性。

```

```

然而，这个属性很早就被弃用了，所以就不要再使用了。

就这些了，同志们

现在你知道这JavaScript初学者应该知道的24条基本技巧。有机会也让我知道一下你的小贴士吧。感谢阅读。