前端开发规范之jQuery编码规范

选择器

1. 尽量的使用效力更高的ID选择器，由于仅仅使用“document.getElementById()”实现。
2. 使用类（Class）选择器时，不要使用元素类型（Element Type），看看绩效差异。
var $products = $("div.products"); // SLOW var $products = $(".products"); // FAST
3. 对ID->child的方式，使用find的方式比嵌套选择器高效，由于第1个选择器不用使用Sizzle这个选择器引擎，更多信息。
// BAD, a nested query for Sizzle selector engine var $productIds = $("#products div.id"); // GOOD, #products is already selected by document.getElementById() so only div.id needs to go through Sizzle selector engine var $productIds = $("#products").find("div.id");
4. 选择器右侧越具体越好，左侧相反，更多信息。
// Unoptimized $("div.data .gonzalez"); // Optimized $(".data td.gonzalez");
5. 避免过度具体，更多信息，看看绩效差异。
$(".data table.attendees td.gonzalez"); // Better: Drop the middle if possible. $(".data td.gonzalez");
6. 给你的选择器1个范围。
// SLOWER because it has to traverse the whole DOM for .class $('.class'); // FASTER because now it only looks under class-container. $('.class', '#class-container');
7. 避免使用全局选择器，更多信息。
$('div.container > *'); // BAD $('div.container').children(); // BETTER
8. 避免隐含的全局选择器，更多信息。
$('div.someclass :radio'); // BAD $('div.someclass input:radio'); // GOOD
9. 不要使用重复、交叉使用ID选择器，由于单独的ID选择将使用更高效的document.getElementById()方式，更多信息。
$('#outer #inner'); // BAD $('div#inner'); // BAD $('.outer-container #inner'); // BAD $('#inner'); // GOOD, only calls document.getElementById()

DOM操作

1. 处理现存元素之前，先剥离，处理以后再附加，更多信息。
var $myList = $("#list-container > ul").detach(); //...a lot of complicated things on $myList $myList.appendTo("#list-container");
2. 使用字符串联接符或array.join()，比.append高效，更多信息，看看绩效差异。
// BAD var $myList = $("#list"); for(var i = 0; i < 10000; i++){ $myList.append("<li>"+i+"</li>"); } // GOOD var $myList = $("#list"); var list = ""; for(var i = 0; i < 10000; i++){ list += "<li>"+i+"</li>"; } $myList.html(list); // EVEN FASTER var array = []; for(var i = 0; i < 10000; i++){ array[i] = "<li>"+i+"</li>"; } $myList.html(array.join(''));
3. 不要操作空缺对象，更多信息。
// BAD: This runs three functions before it realizes there's nothing in the selection $("#nosuchthing").slideUp(); // GOOD var $mySelection = $("#nosuchthing"); if ($mySelection.length) { $mySelection.slideUp(); }

事件

1. 每一个页面只使用1次document的ready事件，这样便于调试与行动流跟踪。
2. 尽可能不要使用匿名函数绑定事件，由于匿名函数不利于调试、保护、测试、重用，更多信息。
$("#myLink").on("click", function(){...}); // BAD // GOOD function myLinkClickHandler(){...} $("#myLink").on("click", myLLinkClickHandler);
3. 对document ready事件处理函数，尽可能不用匿名函数，理由同上。
$(function(){ ... }); // BAD: You can never reuse or write a test for this function. // GOOD $(initPage); // or $(document).ready(initPage); function initPage(){ // Page load event where you can initialize values and call other initializers. }
4. document ready事件处理函数可以包括在外部文件中，然后通过页内js的方式调用。
<script src="my-document-ready.js"></script> <script> // Any global variable set-up that might be needed. $(document).ready(initPage); // or $(initPage); </script>
5. 不要使用html中的行动语法调用事件(html的onclick事件属性)，那简直是调试者的噩梦。始终使用jquery来绑定、删除事件是1件惬意的事情。
<a id="myLink" href="#" onclick="myEventHandler();">my link</a> <!-- BAD --> $("#myLink").on("click", myEventHandler); // GOOD
6. 可能的时候，使用自定义事件，我们可以很方便的消除该事件绑定而不影响其他事件。
$("#myLink").on("click.mySpecialClick", myEventHandler); // GOOD // Later on, it's easier to unbind just your click event $("#myLink").unbind("click.mySpecialClick");
7. 当你给多个对象绑定相同的事件时，可使用事件委派。事件委派中，当我们给父对象绑定事件后，匹配选择器的后代都可以绑定该事件，不管该后代原来就有，还是新增元素。
$("#list a").on("click", myClickHandler); // BAD, you are attaching an event to all the links under the list. $("#list").on("click", "a", myClickHandler); // GOOD, only one event handler is attached to the parent.

Ajax

1. 避免使用.getJson()和.get(), 像它的名字昭示的那样使用$.ajax()。
2. 不要在https站点上使用http要求，最好使用独立性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. 最好明确指定数据类型(dataType)以便于明确处理的数据类型（参见下例）。
5. 对Ajax加载的内容使用事件委派，事件委派可以很好的解决新增元素的事件绑定问题，更多信息。
$("#parent-container").on("click", "a", delegatedClickHandlerForAjax)
6. 使用Promise interface（不知道怎样翻，请大家赐教），更多案例。
$.ajax({ ... }).then(successHandler, failureHandler); // OR var jqxhr = $.ajax({ ... }); jqxhr.done(successHandler); jqxhr.fail(failureHandler);
7. Ajax样例，更多信息。
var jqxhr = $.ajax({ url: url, type: "GET", // default is GET but you can use other verbs based on your needs. cache: true, // default is true, but false for dataType 'script' and 'jsonp', so set it on need basis. data: {}, // add your request parameters in the data object. dataType: "json", // specify the dataType for future reference jsonp: "callback", // only specify this to match the name of callback parameter your API is expecting for JSONP requests. statusCode: { // if you want to handle specific error codes, use the status code mapping settings. 404: handler404, 500: handler500 } }); jqxhr.done(successHandler); jqxhr.fail(failureHandler);

效果和动画

1. 采取克制和1致的方法去实现动画。
2. 不要过度使用动画效果，除非是用户体验所需。尝试使用简单的show/hide，slideUp/slideDown等方法切换对象，尝试使用‘fast’,'slow'和‘medium’。

插件

1. 优先选用具有良好支持、测试、社区支持的插件。
2. 检查该插件与您所用jQuery版本的兼容性。
3. 任意可复用组件都应当构成插件，看看jQuery插件的样本代码。

链式操作

1. 将链式操作看成变量缓存和多选择器要求的替换方式。
$("#myDiv").addClass("error").show();
2. 当链式操作超过3个或由于事件绑定变得复杂时，使用换行和缩进提高链式操作的可读性。
$("#myLink") .addClass("bold") .on("click", myClickHandler) .on("mouseover", myMouseOverHandler) .show();
3. 对长的链式操作来讲，也能够把中间对象缓存成1个变量。

杂项

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和原生js，了解表现jQuery和原生js的表现差异。
$("#myId"); // is still little slower than... 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 Cheatsheet: http://lab.abhinayrathore.com/jquery-cheatsheet/
• jQuery Plugin Boilerplate: http://stefangabos.ro/jquery/jquery-plugin-boilerplate-revisited/ 

Enjoy it.

----------------------------------------------------------