jQuery最佳实践

原文地址：http://lab.abhinayrathore.com/jquery-standards/
第一次翻译，有不对不妥的地方请拍砖。

在写出更好的JQuery代码的时候有一些标准和最佳实践，这些标准不包括JS的标准或最佳实践，如果有任何疑问，建议或改进，请在我的博客留言。
最后更新时间：芝加哥时间2014。3。17，13：15

加载Jquery
1.使用CDN服务加载jq到你的页面里

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery-1.11.0.min.js" type="text/javascript"><\/script>')</script>

几个比较流行的CDN服务：
Google: https://developers.google.com/speed/libraries/devguide 
Microsoft: http://www.asp.net/ajaxlibrary/cdn.ashx
jQuery: http://jquery.com/download/
cdnjs: http://cdnjs.com
OSSCdn: http://osscdn.com 

2.准备一个本地的同版本的的JQ。（CDN服务失效的时候检测window.jQuery是否存在，不存在则加载本地服务器上的文件）
3.使用相对协议加载（如第一条使用//，而不使用http://或https://）
4.如果有可能，始终保持js和jq文件在页面的最后加载
5.选择什么版本？
如果你的网站需要支持IE6、7、8，请不要选择2.X版本。
对于新的应用，如果没有插件的兼用性问题，还是推荐使用最新的版本。
当从cdn加载jq，始终指定你要加载的完整的版本数。
不要使用多个版本
6.如果使用了其他比如Prototype, MooTools, Zepto etc. 等也使用$的库，试着不要用$调用jquery的函数，用 jQuery代替，可以使用$.noConflict()方法把$的控制权交给其他的库。
7.对于先进的浏览器特性，使用Modernizr.

**JQuer变量 **
1.使用$前缀缓存JQ的对象
2.缓存JQ选择器返回的对象达到重用的目的
3.使用驼峰式命名变量

选择器
1.尽可能的使用ID选择器，因为它是通过 document.getElementById()处理的。
2.当使用class选择器的时候不（需）要使用元素类型

var $products = $("div.products"); // SLOW
var $products = $(".products"); // FAST 

3.对于ID->child这种嵌套结构，使用find()方法，因为它不通过Sizzle选择器引擎处理。

// 糟糕的，一个使用Sizzle引擎的嵌套选择 
$productIds = $("#products div.id");
//好的，#products已经通过 document.getElementById()选择，所以只有div.id需要通过Sizzle引擎选择一下就可以了
$productIds = $("#products").find("div.id");         

4.选择器右侧的内容要尽量详细，左侧则不需要

// 糟糕的
$("div.data .gonzalez");
//好的
$(".data td.gonzalez");

5.避免过度的描述

// 糟糕的
$(".data table.attendees td.gonzalez");
// 好的，尽可能的去掉中间的不必要的部分 
$(".data td.gonzalez");     

6.给选择器指定上下文

$('.class');//慢的，需要遍历整个dom去查找.class
$('.class', '#class-container');//快的，因为它仅在class-container元素下查找

7.不使用全局选择器（*）

$('div.container > *'); // 糟糕的
$('div.container').children(); // 好的 

8.避免隐式的使用*
9.不要嵌套ID，因为它通过document.getElementById()查找，不需要也不应该跟其他的选择器混在一起。

DOM操作
1.在操作前始终把存在的元素分离出来并且在操作后恢复它。

var $myList = $("#list-container > ul").detach();
//很多复杂的东西在$myList
$myList.appendTo("#list-container");

2.使用字符串或者array.join()而不是.append()
性能对照：http://jsperf.com/jquery-append-vs-string-concat

// 糟糕的
var $myList = $("#list");
for(var i = 0; i < 10000; i++){
    $myList.append("<li>"+i+"</li>");
}
// 好的
var $myList = $("#list");
var list = "";
for(var i = 0; i < 10000; i++){
    list += "<li>"+i+"</li>";
}
$myList.html(list);
// 更好的
var array = [];
for(var i = 0; i < 10000; i++){
    array[i] = "<li>"+i+"</li>";
} 
$myList.html(array.join(''));    

3.不要操作不存在的元素，

// 糟糕的，在这个操作实现之前先运行了3个方法
$("#nosuchthing").slideUp();
// GOOD
var $mySelection = $("#nosuchthing");
if ($mySelection.length) {
    $mySelection.slideUp();
}

事件
1.每个页面仅使用一个Document Ready handler，方便快速的调试和跟踪
2.不要使用匿名方法，调试，维护，测试或重用很困难。

$("#myLink").on("click", function(){...}); // BAD
// GOOD
function myLinkClickHandler(){...}
$("#myLink").on("click", myLinkClickHandler);

1. Document ready事件处理器不应该作为一个匿名方法，再说一次，匿名方法不利于调试和跟踪。

$(function(){ ... }); // BAD: 你永远无法重用或者测试这个方法
// GOOD
$(initPage); // or $(document).ready(initPage);
function initPage(){
    // 页面初始化和调用其他函数的处理器 
}    

1. Document ready处理器应该从外部文件加载并且内联的脚本可以用来初始化处理器和设置

<script src="my-document-ready.js"></script>
<script>
     // 这里可以定义需要的变量
     $(document).ready(initPage); // or $(initPage);
</script>

5.不要在HTML内使用行为标记（内联脚本），这些是调试的噩梦，始终使用JQuery绑定事件保持一致性，这样也容易添加或移除事件。

<a id="myLink" href="#" onclick="myEventHandler();">my link</a> <!-- BAD -->          
$("#myLink").on("click", myEventHandler); // GOOD

6.如果可能，对于事件使用自定义的命名空间，这样更容易移除指定的事件

AJAX
1.避免使用.getJson() 或 .get()，而是直接使用$.ajax()方法
2.不要使用http或https请求，宁愿选择无模式的URLs，从url中去掉http或https
3.不要在url中加参数，用data对象传递它们。

// Less readable...
$.ajax({
    url: "something.php?param1=test1&param2=test2",
    ....
});
// More readable...
$.ajax({
    url: "something.php",
    data: { param1: test1, param2: test2 }
});

4.指定数据格式，它能更快速的知道你正在使用哪种数据。（Ajax Template example部分）
5.Ajax加载的内容使用委派的事件处理程序，委派事件的优点是可以处理后加载到文档里的事件。

$("#parent-container").on("click", "a", delegatedClickHandlerForAjax);

6.使用promise接口

$.ajax({ ... }).then(successHandler, failureHandler);
// OR
var jqxhr = $.ajax({ ... });
jqxhr.done(successHandler);
jqxhr.fail(failureHandler);

7.一个简单完整的ajax模板

var jqxhr = $.ajax({
    url: url,
    type: "GET", // 默认是GET，可以换成你需要的方式
    cache: true, // 默认是true，但是对于dataType 
为'script' 和 'jsonp'类型默认是false，所以按需调整。
    data: {}, // 把需要提交的参数写在这里
    dataType: "json", // 指定数据类型
    jsonp: "callback", // only specify this to match the name of callback parameter your API is expecting for JSONP requests.
    statusCode: { // 如果想处理具体的错误代码，使用的状态代码映射设置
        404: handler404,
        500: handler500
    }
});
jqxhr.done(successHandler);
jqxhr.fail(failureHandler);

效果和动画
1. 采取严谨和一致的方法来实现动画功能。
2. 直到被UX需求驱动否则不要过度做动画效果。
尝试使用简单的show/hide, toggle and slideUp/slideDown功能切换元素。
使用预定的参数"slow", "fast" 或者400 (中等速度).

插件
1.始终使用有良好支持，文档，测试和社区支持的插件
2.检查插件与你所使用的jQuery版本是否兼容
3.任何常见的可重用组件应该实现为一个jQuery插件，点击这里查看jQuery插件样板代码。

链式操作
1．使用链式操作代替变量缓存和多次操作
2．每当链长超过3个链接或得到，因为活动任务的复杂，使用适当的换行和缩进使代码的可读性。

$("#myLink")
    .addClass("bold")
    .on("click", myClickHandler)
    .on("mouseover", myMouseOverHandler)
    .show();

3.对于较长的链式操作可以把对象缓存到一个变量里。

杂项
1.为参数使用对象字面量。

$myLink.attr("href", "#").attr("title", "my link").attr("rel", "external"); // BAD, 3 calls to attr()
// GOOD, only 1 call to attr()
$myLink.attr({
    href: "#",
    title: "my link",
    rel: "external"
});

2.不要混合使用CSS与jQuery。

$("#mydiv").css({'color':red, 'font-weight':'bold'}); // BAD
.error { color: red; font-weight: bold; } /* GOOD */
$("#mydiv").addClass("error"); // GOOD

3.不要使用过时的方法，始终要注意新版本中一些摒弃的方法并且试着不要使用它们，点击这里查看过时方法的列表
4.必要时结合使用jQuery的原生JavaScript。参见下面给出的例子的性能差异：http://jsperf.com/document-getelementbyid-vs-jquery/3

$("#myId"); // 它始终比下边的慢一点
document.getElementById("myId");

资源
jQuery Performance: http://learn.jquery.com/performance/
jQuery Learn: http://learn.jquery.com
jQuery API Docs: http://api.jquery.com/
jQuery Coding Standards and Best Practice: http://www.jameswiseman.com/blog/2010/04/20/jquery-standards-and-best-practice/
jQuery Plugin Boilerplate: http://stefangabos.ro/jquery/jquery-plugin-boilerplate-revisited/