转自:http://keenwon.com/955.html
本文介绍一些使用jQuery的通用标准和最佳实践,这些标准不涵盖Javascript的标准和最佳实践,英文原文地址是 http://lab.abhinayrathore.com/jquery-standards/。
加载jQuery
1、尽量使用CDN加载:
- <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>
2、就像上面的代码一样,在CDN加载失败时,要回源到本地服务器的同版本jQuery。
3、使用依赖协议的URL(不加http:
和https:
,直接使用//
),参看上面的例子。
4、尽可能在页面底部加载jQuery和javascript。
5、如何选择jQuery版本?
- 如果要兼容IE6/7/8,不要使用2.x版本的
- 对于新的应用,如果不考虑一些插件的兼容性问题,尽可能的使用最新版
- 从CDN加载jQuery的时候,使用完整的版本号(例如,使用1.11.0,不用1.11和1)
- 不要加载多个版本的jQuery
6、如果你使用了Prototype, MooTools, Zepto等,尝试使用jQuery
代替$
。可以使用$.noConflict()
让出$
的控制权。
jQuery变量
1、所有被缓存的jQuery对象,变量名以$
开头。
2、总是缓存jQuery选择器返回的对象,方便复用:
- var $myDiv = $("#myDiv");
- $myDiv.click(function(){...});
3、使用驼峰命名。
选择器
1、尽可能的使用ID选择器。ID选择器使用document.getElementById()
,所以更快。
2、当使用类选择器的时候,不要加DOM元素类型:
- var $products = $("div.products"); // 慢
- var $products = $(".products"); // 快
3、使用find查找ID->Child的嵌套查询,.find()
方法更快,因为第一次选择没有使用jQuery的选择器引擎:
- // 差, 全部使用jQuery的选择器引擎
- var $productIds = $("#products div.id");
- // 好, #products使用document.getElementById(), 只有div.id需要使用jQuery的选择器引擎
- var $productIds = $("#products").find("div.id");
4、越靠右侧越具体:
- // 差
- $("div.data .gonzalez");
- // 最佳
- $(".data td.gonzalez");
5、选择器不要太“具体”:
- $(".data table.attendees td.gonzalez");
- // 更好,尽可能省去中间部分
- $(".data td.gonzalez");
6、给选择器指定上下文(限定范围):
- // 慢,因为它在整个DOM结构中查找
- $('.class');
- // 快,因为它只查找 class-container 下的.
- $('.class', '#class-container');
7、避免使用“*”:
- $('div.container > *'); // 差
- $('div.container').children(); // 好
8、避免隐式使用“*”:
- $('div.someclass :radio'); // 差,还是用了“*”
- $('div.someclass input:radio'); // 好
9、不要使用多个ID选择器,或者嵌套使用ID选择器,单独的ID选择器使用document.getElementById()
,速度很快:
- $('#outer #inner'); // 差
- $('div#inner'); // 差
- $('.outer-container #inner'); // 差
- $('#inner'); // 好, 调用 document.getElementById()
DOM操作
1、先把元素分离出DOM结构,再进行复杂的操作,之后再附加回DOM中。不明白原因的话,可以了解下.detach()
这个方法
- var $myList = $("#list-container > ul").detach();
- // 对 $myList 执行大量复杂操作
- $myList.appendTo("#list-container");
2、使用字符串连接或者array.join(),少用.append(),点击这里查看性能比较。
- // 慢
- 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、不要对不存在的元素做操作:
- // 差: 在发现该ID不存在之前,已经执行了3个函数
- $("#nosuchthing").slideUp();
- // 好
- var $mySelection = $("#nosuchthing");
- if ($mySelection.length) {
- $mySelection.slideUp();
- }
事件
1、一个页面只使用一个Document ready,便于调试和跟踪。
2、不要使用匿名函数绑定事件,匿名函数不利于调试,复用,测试,debug:
- $("#myLink").on("click", function(){...}); // 差
- // 好
- function myLinkClickHandler(){...}
- $("#myLink").on("click", myLinkClickHandler);
3、Document ready 不要用匿名函数,原因同上:
- $(function(){ ... }); // 差: 你没办法写单元测试和复用
- // 好
- $(initPage); // or $(document).ready(initPage);
- function initPage(){
- //...
- }
4、Document ready 的处理函数应该写在外部文件,内联的javascript可以在一些初始化设置之后调用 ready 函数,例如:
- <script src="my-document-ready.js"></script>
- <script>
- // 做一些初始化设置.
- $(document).ready(initPage); // or $(initPage); initPage函数在外部文件中
- </script>
5、不要把事件直接写在HTML元素上,这样不方便调试:
- <a id="myLink" href="#" onclick="myEventHandler();">my link</a> <!-- 差-->
- $("#myLink").on("click", myEventHandler); // 好
6、尽可能的给事件加上命名空间。这样方便解除绑定,而不影响该DOM元素的其他事件:
- $("#myLink").on("click.mySpecialClick", myEventHandler); // 好
- // 之后,很容易的解除绑定
- $("#myLink").unbind("click.mySpecialClick");
AJAX
1、使用.ajax()
,避免.getJson()
或者.get()
,它们在内部也是调用.ajax()
的。
2、不要在https
的站点上请求http
,使用依赖协议的URL
3、不要把数据加在url上,使用data属性。
- // 可读性差
- $.ajax({
- url: "something.php?param1=test1¶m2=test2",
- ....
- });
- // 可读性好
- $.ajax({
- url: "something.php",
- data: { param1: test1, param2: test2 }
- });
4、指定dataType属性,更容易知道数据类型。
5、对于ajax加载的内容,使用委托绑定事件,这样可以在元素不存在的时候执行绑定。(之后ajax加载进DOM结构中)
- $("#parent-container").on("click", "a", delegatedClickHandlerForAjax);
6、使用Promise
- $.ajax({ ... }).then(successHandler, failureHandler);
- // 或者
- 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、Adopt a restrained and consistent approach to implementing animation functionality(大意:采取受限制的和统一的方法来实现动画功能。)
2、满足用户体验即可,不要做过多的动画:
- 尽量使用简单的show/hide,slideUp/slideDown来切换元素
- 尽量使用jQuery预定义的时间间隔(durations),“slow”,“fast”或者400(中等)
插件
1、选择兼容性好,文档,测试齐全何社区支持好的插件。
2、检查插件在不同版本jQuery下的兼容性。
3、任何参加的可复用的组件,都应该以插件的形式实现。
链式调用
1、使用链式调用代替变量缓存和多次调用选择器:
- $("#myDiv").addClass("error").show();
2、当链式调用超过3级的时候,适当的换行增加可读性:
- $("#myLink")
- .addClass("bold")
- .on("click", myClickHandler)
- .on("mouseover", myMouseOverHandler)
- .show();
3、链太长的时候,缓存中间对象是可以接受的。
其他
1、参数尽量使用对象形式:
- $myLink.attr("href", "#").attr("title", "my link").attr("rel", "external"); // 差, 调用三次attr()
- // 好, 调用一次
- $myLink.attr({
- href: "#",
- title: "my link",
- rel: "external"
- });
2、尽量不要把css混在js中:
- $("#mydiv").css({'color':red, 'font-weight':'bold'}); // 差
- .error { color: red; font-weight: bold; } /* 好*/
- $("#mydiv").addClass("error"); // 好
3、不要使用过时的方法,注意新版更新时弃用的方法,不要使用它们。
4、必要的时候使用原生js,这里看查看性能对比 http://jsperf.com/document-getelementbyid-vs-jquery/3
- $("#myId"); // 还是有一点点点点慢...
- document.getElementById("myId");
就这么多,技术有限,翻译的不妥的地方,欢迎留言指出!