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

概述p{text-indent:2em;}前端开发whqet,csdn,王海庆,whqet,前端开发专家翻译自：http://lab.abhinayrathore.com/翻译人员：前端开发whqet，意译为主，不当之处敬请指正。译者说：临近期末，大部分的基础教学内容已经讲解完毕，在进行比较大型的项目训 前端开发whqet,csdn,王海庆,whqet,前端开发专家

翻译自：http://lab.abhinayrathore.com/

翻译人员：前端开发whqet，意译为主，不当的地方敬请指正。

译者说：邻近期末，大部份的基础教学内容已讲授终了，在进行比较大型的项目训练之前，如果能让学生了解乃至遵守1些前端开发的编码规范将会是1件非常成心义的事情。因此，本博客准备于近期整理1个编码规范与最好实践的系列文章，包括HTML、CSS、JavaScript、jquery、PHP等，希望能对大家有所帮助。

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

--我参加了博客之星评选，如果你喜欢我的博客，求投票~~http://Vote.blog.csdn.net/blogstar2014/details?username=whqet#content

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

本文给大家显现的如何书写更好的jquery代码的相干规范和最好实践，不包括JavaScript方面的规范，有好的意见和建议请大家到我的博客留言赐教，或看看jquery API的速查表（cheat sheet）。

加载jquery

在您的页面中优先使用CDN的方式，CDN方式的优点在这里，这里有比较流行的jqueryCDN列表清单（由于国内goolge限制问题，建议使用国内的CDN，例如百度的CDN）。<script type="text/JavaScript" src="//AJAX.GoogleAPIs.com/AJAX/libs/jquery/2.1.1/jquery.min.Js"></script><script>window.jquery || document.write('<script src="Js/jquery⑵.1.1.min.Js" type="text/JavaScript"></script>')</script>利用上面代码，豫备1个相同版本的本地jquery库，以备不时之需。使用如上所示的协议独立性URL（去掉http:或https:，直接以//开头,例如‘//AJAX.GoogleAPIs.com/AJAX/libs/jquery/2.1.1/jquery.min.Js’）如果可能，尽可能保持所有的Js代码和jquery在页面底部加载，更多信息或看个示例HTML5 Boilerplate。使用哪一个版本？如果你要兼容ie6、7、8，不要使用jquery2.x版本
对新的利用来讲，如果不存在兼容性问题，强烈建议使用最新版本
从CDN加载jquery时，指定你需要加载版本的完全版本号（例如，使用1.11.0而不是1.11或1）
不要加载多个jquery版本
不要使用jquery-latest.Js如果你的页面同时用到了类似于Prototype、MooTools、Zepto等这些一样使用$的类库，要使用jquery替换$，我们可使用$.noConflict()把$的控制权还给其他库。使用Modernizr实现高级的阅读器特点检测。jquery变量

所有用于存储、缓存jquery对象的变量应当以$前缀命名。最好把使用选择器返回的jquery对象缓存到变量里，以便重用。var $mydiv = $("#mydiv");$mydiv.click(function(){...});使用驼峰法命名变量。选择器

尽量的使用效力更高的ID选择器，由于仅仅使用“document.getElementByID()”实现。使用类（Class）选择器时，不要使用元素类型（Element Type），看看绩效差异。var $products = $("div.products"); // SLOWvar $products = $(".products"); // FAST对ID->child的方式，使用find的方式比嵌套选择器高效，由于第1个选择器不用使用Sizzle这个选择器引擎，更多信息。// BAD,a nested query for Sizzle selector enginevar $productIDs = $("#products div.ID");// GOOD,#products is already selected by document.getElementByID() so only div.ID needs to go through Sizzle selector enginevar $productIDs = $("#products").find("div.ID");选择器右侧越具体越好，左侧相反，更多信息。// Unoptimized$("div.data .gonzalez");// Optimized$(".data td.gonzalez");避免过度具体，更多信息，看看绩效差异。$(".data table.attendees td.gonzalez"); // Better: Drop the mIDdle if possible.$(".data td.gonzalez");给你的选择器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');避免使用全局选择器，更多信息。$('div.container > *'); // BAD$('div.container').children(); // BETTER避免隐含的全局选择器，更多信息。$('div.someclass :radio'); // BAD$('div.someclass input:radio'); // GOOD不要使用重复、交叉使用ID选择器，由于单独的ID选择将使用更高效的document.getElementByID()方式，更多信息。$('#outer #inner'); // BAD$('div#inner'); // BAD$('.outer-container #inner'); // BAD$('#inner'); // GOOD,only calls document.getElementByID()DOM *** 作

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

每一个页面只使用1次document的ready事件，这样便于调试与行动流跟踪。尽可能不要使用匿名函数绑定事件，由于匿名函数不利于调试、保护、测试、重用，更多信息。$("#mylink").on("click",function(){...}); // BAD // GOODfunction mylinkClickHandler(){...}$("#mylink").on("click",myLlinkClickHandler);对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.}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> 不要使用HTML中的行动语法调用事件(HTML的onclick事件属性)，那简直是调试者的噩梦。始终使用jquery来绑定、删除事件是1件惬意的事情。<a ID="mylink" href="#" onclick="myEventHandler();">my link</a> <!-- BAD --> $("#mylink").on("click",myEventHandler); // GOOD可能的时候，使用自定义事件，我们可以很方便的消除该事件绑定而不影响其他事件。$("#mylink").on("click.mySpecialClick",myEventHandler); // GOOD// Later on,it's easIEr to unbind just your click event$("#mylink").unbind("click.mySpecialClick"); 当你给多个对象绑定相同的事件时，可使用事件委派。事件委派中，当我们给父对象绑定事件后，匹配选择器的后代都可以绑定该事件，不管该后代原来就有，还是新增元素。$("#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

避免使用.getJson()和.get(),像它的名字昭示的那样使用$.AJAX()。不要在https站点上使用http要求，最好使用独立性URL（不包括http:和https:，直接以//开头）。不要在要求URL上放置参数，使用data对象传递参数。// Less readable...$.AJAX({ url: "something.PHP?param1=test1?m2=test2",....}); // More readable...$.AJAX({ url: "something.PHP",data: { param1: test1,param2: test2 }});最好明确指定数据类型(dataType)以便于明确处理的数据类型（参见下例）。对AJAX加载的内容使用事件委派，事件委派可以很好的解决新增元素的事件绑定问题，更多信息。$("#parent-container").on("click",delegatedClickHandlerForAJAX) 使用Promise interface（不知道怎样翻，请大家赐教），更多案例。$.AJAX({ ... }).then(successHandler,failureHandler); // ORvar jqxhr = $.AJAX({ ... });jqxhr.done(successHandler);jqxhr.fail(failureHandler); 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致的方法去实现动画。不要过度使用动画效果，除非是用户体验所需。尝试使用简单的show/hIDe，slIDeUp/slIDeDown等方法切换对象，尝试使用‘fast’,'slow'和‘medium’。插件

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

将链式 *** 作看成变量缓存和多选择器要求的替换方式。$("#mydiv").addClass("error").show(); 当链式 *** 作超过3个或由于事件绑定变得复杂时，使用换行和缩进提高链式 *** 作的可读性。$("#mylink") .addClass("bold") .on("click",myClickHandler) .on("mouSEOver",myMouSEOverHandler) .show();对长的链式 *** 作来讲，也能够把中间对象缓存成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"});不要混写CSS与jquery。$("#mydiv").CSS({'color':red,'Font-weight':'bold'}); // BAD.error { color: red; Font-weight: bold; } /* GOOD */$("#mydiv").addClass("error"); // GOOD不用使用弃用的方法，了解每一个新版本的弃用方法，并且避免使用它，非常重要。必要的时候可以混合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.

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

前端开发whqet，关注web前端开发，分享相干资源，欢迎点赞，欢迎拍砖。
---------------------------------------------------------------------------------------------------------

总结

以上是内存溢出为你收集整理的前端开发规范之jQuery编码规范全部内容，希望文章能够帮你解决前端开发规范之jQuery编码规范所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。