不知道在哪里看到了这篇关于jQuery编码的文章,挺实用的,刚好最近在研究jQuery的基础知识,今天打开收藏夹来翻译一下,原文的英语不难,可是内容很实用,可能有大神已经翻译过了,你们看精华就好了。javascript
加载jQueryphp
1. 尽可能在页面上使用CDN来加载jQuery。 CDN Benefits,一些流行的CDN地址css
<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库,像上面那样。更多详情html
3. 使用 protocol-relative/protocol-independent 的url(去掉http:和https:),就像上面那样。html5
4. 尽量的保持你的javascript和jQuery代码放在页面的底部。更多信息和HTML5的样本文件的一些例子。java
5. 该用哪一个版本?jquery
6. 若是你想要使用其余的库,像Prototype,MooTools,Zapto等,它们一样是使用$符号,那么尽可能不要使用$来调用jQuery的函数,使用jQuery来代替$。你也能够经过$.onConfilict()来将$的控制器还给其余的库。git
7. 对浏览器的新特性多检测,使用Modernizr。github
jQuery的变量web
1. 全部用来存储/缓存jQuery对象的变量的名字应该有一个前缀$。
2. 在变量中缓存jQuery选择器返回的内容以便重用。
var $myDiv = $("#myDiv"); $myDiv.click(function(){...});
3. 使用驼峰规则命名变量。
选择器
1. 在任什么时候候尽量的使用ID,这是比较快的由于它使用document.getElementById()处理的。
2. 当使用类选择器的时候,不要在类选择器中指定元素的类型。性能比较
var $products = $("div.products"); // SLOW var $products = $(".products"); // FAST
3. 对于id->child这种嵌套的选择器要使用find来查找。find()方法比较快是因为第一个选择符(id)不会经过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");
$(".data table.attendees td.gonzalez"); // Better: Drop the middle if possible. $(".data td.gonzalez");
6. 给选择器一个上下文。
// 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,ID选择器是经过document.getElementById()处理的,因此不要和其余的选择符混着使用。
$('#outer #inner'); // BAD $('div#inner'); // BAD $('.outer-container #inner'); // BAD $('#inner'); // GOOD, only calls document.getElementById()
DOM操做处理
1. 在操做处理DOM以前要先将已经存在的元素卸载分离下来,待操做完以后再将其挂回去。更多详情
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. 每个页面上只使用一个文档的ready事件处理函数。这样会更容易进行调试和跟踪动做的流程。
2. 不要使用匿名函数来绑定事件。匿名函数很难进行调试,维护,测试和重用。更多详情
$("#myLink").on("click", function(){...}); // BAD // GOOD function myLinkClickHandler(){...} $("#myLink").on("click", myLinkClickHandler);
3. 处理文档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. 文档ready事件的处理函数应该包含在外部的javascript文件中,内联的javascript应该在初始化以后直接调用处理函数。
<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中写javascript的内联代码,这是调试的噩梦。要使用jQuery来绑定事件这样很容易动态的添加和移除事件。
<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");
AJAX
1. 避免使用.getJson()和.get(),就简单的使用$.ajax(),由于这就是.get()内部调用的东西。
2. 不要在https的网站上使用http请求。更好的使用无模式的url(将HTTP或者HTTPS从你的URL中移除)。
3. 不要在URL上发送请求参数,用数据对象来发送它们。
// Less readable... $.ajax({ url: "something.php?param1=test1¶m2=test2", .... }); // More readable... $.ajax({ url: "something.php", data: { param1: test1, param2: test2 } });
4. 尽可能指定dataType,这样能够容易的知道你要出来哪一种类型的数据(看下面Ajax的模板例子)
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", // 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. 采起一致的方法来实现动画功能。
2. 不要过分作动画效果,要知足用户体验的需求。
插件
1. 要始终选择一个有良好支持,完善文档,全面测试过而且社区活跃的插件。
2. 检测所用插件与当前使用的jQuery版本是否兼容。
3. 一些经常使用功能应该写成jQuery插件。jQuery插件模板例子
链式语法
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"); // 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'}); .error { color: red; font-weight: bold; } /* GOOD */ $("#mydiv").addClass("error"); // GOOD
3. 不要使用被弃用的方法,关注每个新的版本上一些弃用的方法尽可能避免使用它们是很重要的。这里有一些被弃用的方法的列表。
4. 须要的话将原生的javascript代码和jQuery代码合并。看一下性能的比较。
$("#myId"); // is still little slower than... document.getElementById("myId");