jQuery编码规范和实例说明

加载jQuery

1、尽量使用CDN加载（ CDN Benefits）

 代码如下 复制代码

<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>

一些流行的jquery cdns:

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、就像上面的代码一样，在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"); // SLOW
var $products = $(".products"); // FAST

3、使用find查找ID->Child的嵌套查询，.find()方法更快，因为第一次选择没有使用jQuery的选择器引擎：

 代码如下 复制代码

// 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、给选择器指定上下文（限定范围）：

 代码如下 复制代码

// 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结构，再进行复杂的操作，之后再附加回DOM中。不明白原因的话，可以了解下.detach()这个方法

 代码如下 复制代码

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、一个页面只使用一个Document ready，便于调试和跟踪。

2、不要使用匿名函数绑定事件，匿名函数不利于调试，复用，测试，debug：

 代码如下 复制代码

$("#myLink").on("click", function(){...}); // BAD

// GOOD
function myLinkClickHandler(){...}
$("#myLink").on("click", myLinkClickHandler);

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 的处理函数应该写在外部文件，内联的javascript可以在一些初始化设置之后调用 ready 函数，例如：

 代码如下 复制代码

<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元素上，这样不方便调试：

 代码如下 复制代码

<a id="myLink" href="#" onclick="myEventHandler();">my link</a> <!-- BAD -->
$("#myLink").on("click", myEventHandler); // GOOD

6、尽可能的给事件加上命名空间。这样方便解除绑定，而不影响该DOM元素的其他事件：

 代码如下 复制代码

$("#myLink").on("click.mySpecialClick", myEventHandler); // GOOD
// Later on, it's easier to unbind just your click event
$("#myLink").unbind("click.mySpecialClick");

AJAX

1、使用.ajax()，避免.getJson()或者.get()，它们在内部也是调用.ajax()的。

2、不要在https的站点上请求http，使用依赖协议的URL

3、不要把数据加在url上，使用data属性。

 代码如下 复制代码

// Less readable...
$.ajax({
    url: "something.php?param1=test1&param2=test2",
    ....
});

// More readable...
$.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);

// 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、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"); // BAD, 3 calls to attr()
// GOOD, only 1 call to attr()
$myLink.attr({
    href: "#",
    title: "my link",
    rel: "external"
});

2、尽量

不要把css混在js中：

 代码如下 复制代码

$("#mydiv").css({'color':red, 'font-weight':'bold'}); // BAD

.error { color: red; font-weight: bold; } /* GOOD */

$("#mydiv").addClass("error"); // GOOD

3、不要使用过时的方法，注意新版更新时弃用的方法，不要使用它们。

4、必要的时候使用原生js，这里看查看性能对比 http://jsperf.com/document-getelementbyid-vs-jquery/3

 代码如下 复制代码

$("#myId"); // is still little slower than...
document.getElementById("myId");
时间： 2024-09-25 09:08:03

jQuery编码规范和实例说明的相关文章

Java 程序编码规范

编码|程序|规范 Java 程序编码规范 李小敏www.yway.com 软件工程师2000年12月内容: 命名惯例 Java文件样式 代码编写格式 程序编写 编程技巧 Swing 调试 性能 可移植性 参考资料 作者简介    所有的程序开发手册都包含了各种规则.一些习惯自由程序人员可能对这些规则很不适应,但是在多个开发人员共同写作的情况下,这些规则是必需的.这不仅仅是为了开发效率来考虑,而且也是为了后期维护考虑.命名规范 定义这个规范的目的是让项目中所有的文档都看起来像一个人写的,增加可读性

Java语言编码规范(Java Code Conventions)

编码|规范   1 介绍(Introduction)1.1 为什么要有编码规范(Why Have Code Conventions)编码规范对于程序员而言尤为重要,有以下几个原因:- 一个软件的生命周期中,80%的花费在于维护- 几乎没有任何一个软件,在其整个生命周期中,均由最初的开发人员来维护- 编码规范可以改善软件的可读性,可以让程序员尽快而彻底地理解新的代码- 如果你将源码作为产品发布,就需要确任它是否被很好的打包并且清晰无误,一如你已构建的其它任何产品 为了执行规范,每个软件开发人员必须

Java程序编码规范!不仅仅是规范,还有为什么这样做的理由,不错哦!

编码|程序|规范 Java程序编码规范 所有的程序开发手册都包含了各种规则.一些习惯自由程序人员可能对这些规则很不适应,但是在多个开发人员共同写作的情况下,这些规则是必需的.这不仅仅是为了开发效率来考虑,而且也是为了后期维护考虑. 命名规范定义这个规范的目的是让项目中所有的文档都看起来像一个人写的,增加可读性,减少项目组中因为换人而带来的损失.(这些规范并不是一定要绝对遵守,但是一定要让程序有良好的可读性) Package 的命名Package 的名字应该都是由一个小写单词组成. Class 的

Java语言编码规范

编码|规范 1 介绍(Introduction) 1.1为什么要有编码规范 编码规范对于程序员而言尤为重要,有以下几个原因: - 一个软件的生命周期中,80%的花费在于维护- 几乎没有任何一个软件,在其整个生命周期中,均由最初的开发人员来维护- 编码规范可以改善软件的可读性,可以让程序员尽快而彻底地理解新的代码- 如果你将源码作为产品发布,就需要确任它是否被很好的打包并且清晰无误,一如你已构建的其它任何产品 为了执行规范,每个软件开发人员必须一致遵守编码规范. 1.2版权声明 本文档反映的是Su

Java语言编码规范 选择自 hk

编码|规范 1 介绍(Introduction) 1.1为什么要有编码规范 编码规范对于程序员而言尤为重要,有以下几个原因: - 一个软件的生命周期中,80%的花费在于维护- 几乎没有任何一个软件,在其整个生命周期中,均由最初的开发人员来维护- 编码规范可以改善软件的可读性,可以让程序员尽快而彻底地理解新的代码- 如果你将源码作为产品发布,就需要确任它是否被很好的打包并且清晰无误,一如你已构建的其它任何产品 为了执行规范,每个软件开发人员必须一致遵守编码规范. 1.2版权声明 本文档反映的是Su

C#编码规范

编码|规范 一.类型级单位的命名 1.类. 以Class声明的类,都必须以名词或名词短语命名,体现类的作用.如: Class Indicator 当类是一个特性(Attribute)时,以Attribute结尾,当类是一个异常(Exception)时,以Exception结尾: Class ColorSetException Class CauseExceptionAttribute 当类只需有一个对象实例(全局对象,比如Application等),必须以Class结尾,如 Class Scre

VB.net 编码规范（也适用于C#） Ninputer（原作） （转贴，只作建议）

编码|规范 VB.net 编码规范(也适用于C#)    Ninputer(原作)关键字    VB.net 编码规范在开发中保持良好的编码规范是十分重要的.我所采用的新的VB.net编码规范,是一种被证明能明显改善代码可读性,并有助于代码管理.分类的编码规范.采用这种编码规范,能避免如匈牙利命名法带来的繁长前缀,便于记忆变量的用途.下面的介绍这种编码规范.一.类型级单位的命名1.类.以Class声明的类,都必须以名词或名词短语命名,体现类的作用.如:Class Indicator当类是一个特性

VB.net 编码规范

编码|规范 VB.net 编码规范 作者: Ninputer   www.ASPCool.com   在开发中保持良好的编码规范是十分重要的.我所采用的新的VB.net编码规范,是一种被证明能明显改善代码可读性,并有助于代码管理.分类的编码规范.采用这种编码规范,能避免如匈牙利命名法带来的繁长前缀,便于记忆变量的用途.下面的介绍这种编码规范.   一.类型级单位的命名   1.类.   以Class声明的类,都必须以名词或名词短语命名,体现类的作用.如:   Class Indicator   

VB.NET/ASP.NET编码规范(ZT)

asp.net|编码|规范 在开发中保持良好的编码规范是十分重要的.我所采用的新的VB.NET/ASP.NET编码规范,是一种被证明能明显改善代码可读性,并有助于代码管理.分类的编码规范.采用这种编码规范,能避免如匈牙利命名法带来的繁长前缀,便于记忆变量的用途.下面的介绍这种编码规范. 一.类型级单位的命名 1.类 □以Class声明的类,都必须以名词或名词短语命名,体现类的作用.如: Class Indicator□当类是一个特性(Attribute)时,以Attribute结尾,当类是一个异