原文地点：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);
- Document ready事宜处置惩罚器不应当作为一个匿名要领，再说一次，匿名要领不利于调试和跟踪。
$(function(){ ... }); // BAD: 你永久没法重用或许测试这个要领
// GOOD
$(initPage); // or $(document).ready(initPage);
function initPage(){
// 页面初始化和挪用其他函数的处置惩罚器
}
- 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¶m2=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/
