jquery编程的标准写法和最佳实践（jquery代码规范）
12256次浏览
关于jquery的代码规范，书写标准和最佳实践，是我近期看到的国外的一篇文章，感觉很受益！网上搜索了一下，果然被网友翻译过，但是查看翻译时间是2014年3月份左右，我又查看了该文章的更新时间是号。想必该文章很久之前就问世，但是作者又更改了不少问题吧，因此还是决定自己重新翻译一下！ ，文章翻译也是一件耗时耗力的事情，网友转载还请注明出处！加个链接！
jQuery的加载
1、我们经常用CDN来加载网页，我之前的文章中也多次提及，使用CDN的好处，
&script type=&text/javascript& src=&///ajax/libs/jquery/2.1.1/jquery.min.js&&&/script&
&script&window.jQuery || document.write('&script src=&js/jquery-2.1.1.min.js& type=&text/javascript&&&\/script&')&/script&
关于CDN加载，还可以查看我之前的一篇文章：
2、最好在本地备份一个相同版本的代码，以防万一，不能链接远程服务，。
3、使用裸协议的URL（去掉http:或者https:），如上面代码展示的那样，我在之前的文章中也提到过，加载CDN可以省掉http,见文章：
4、如果可能，尽量将你的JavaScript和jQuery代码放到页面底部。我之前写的一篇关于js加载顺序的问题，提到过，具体请看：
5.该使用哪个版本？
如果你想兼容IE678请不要用2.x的版本
针对极少数不用考虑兼容性问题的，极力推荐使用最新版本的jQuery
当从CDN服务器加载jQuery时，最好把版本写全（比如1.11.0而不是1.11或者直接写个1）
不要重复加载和多次加载
不要从jquery CDN中加载 jquery-latest.js，
6、如果你同时还使用了其他JS框架诸如Prototype, MooTools, Zepto等等，这些框架中，有的也用了$符号，所以你就不要再用$来进行jQuery 编码了，而请用'jQuery'代替。并且调用$.noConflict()保证不会有冲突出现。
7、要检测浏览器对一些新特性是否支持，请用。
1、jQuery类型的变量最好加个$前缀。
2、时常将jQuery选择器返回的内容存进变量以便重用
var $myDiv = $(&#myDiv&);
$myDiv.click(function(){...});
3、使用 命名
关于选择器
1.尽量ID选择器。实际运用的是js的document.getElementById()，所以速度较其他选择器快。
2.使用类选择器时表指定元素的类型。请看
var $products = $(&div.products&); // 慢
var $products = $(&.products&); // 快
3.ID父亲容器下面查找子元素请用.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.多级查找中，右边尽量指定得详细点而左边则尽量简单点。
$(&div.data .gonzalez&);
$(&.data td.gonzalez&);
5.避免冗余。或者查看
$(&.data table.attendees td.gonzalez&);
// 好的方式：去掉了中间的冗余
$(&.data td.gonzalez&);
6.指定选择的上下文。
// 劣质的代码：因为需要遍历整个DOM来找到.class
$('.class');
// 高品代码：因为只需在指定容器范围内进行查找
$('.class', '#class-container');
7.避免使用万能选择器。查看
$('div.container & *'); // 差
$('div.container').children(); // 棒
8.警惕隐式的万能选择器。省略的情况下其实使用的就是*号通配符。
$('div.someclass :radio'); // 差
$('div.someclass input:radio'); // 棒
9.ID已经表示唯一了，背后使用的是document.getElementById()，所以不要和其他选择器混淆了。
$('#outer #inner'); // 脏
$('div#inner'); // 乱
$('.outer-container #inner'); // 差
$('#inner'); // 干净利落，后台只需调用document.getElementById()
1.操作任何元素前先将其从文档卸载，然后再贴回去。
var $myList = $(&#list-container & ul&).detach();
//...a lot of complicated things on $myList
$myList.appendTo(&#list-container&);
2、使用连接字符串或数组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);
// 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();
var $mySelection = $(&#nosuchthing&);
if ($mySelection.length) {
$mySelection.slideUp();
1.一个页面只写一个文档ready事件的处理程序。这样代码既清晰好调试，又容易跟踪代码的进程。
2.不要用匿名函数来做事件的回调。匿名函数不易调试维护测试和复用。或许你想较真，看看这里吧
$(&#myLink&).on(&click&, function(){...}); // 不要这样
function myLinkClickHandler(){...}
$(&#myLink&).on(&click&, myLinkClickHandler);
3.处理文档ready事件的回调也表用匿名函数，匿名函数不易调试维护测试和复用
$(function(){ ... }); // 糟糕的做法：无法利用此函数也无法为其写测试用例
// 好的做法
$(initPage); // 抑或 $(document).ready(initPage);
function initPage(){
// 这里你可以进行程序的初始化了
4.进一步，最好也将ready事件的处理程序放到外部文件中引入到页面，而页面中内嵌的代码只需调用即可。
&script src=&my-document-ready.js&&&/script&
// 初始化一些必要的全局变量
$(document).ready(initPage); // 抑或 $(initPage);
5.千万表写内联到HTML的JS代码，这是调试的噩梦！应该总是用jQuery来绑定事件自带程序，这样也方便随时动态地取消绑定。
&a id=&myLink& href=&#& onclick=&myEventHandler();&&my link&/a& &!--不好 --&
$(&#myLink&).on(&click&, myEventHandler); // GOOD
6.如果可能尽量在绑定事件处理程序时使用一个命名空间，这样可以方便地取消绑定而不会影响其他绑定。
$(&#myLink&).on(&click.mySpecialClick&, myEventHandler); // 不错
// 之后，让我们优雅地解除绑定
$(&#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() ，因为jQuery内部还是将前者转化为$.ajax()
2.表对HTTPS站点使用HTTP去发起请求，最好干脆就表指定（将HTTP或者HTTPS从你的URL中移除）
3.表在链接里面嵌参数，请使用专门的参数设置来传递
// 不易阅读的代码...
url: &something.php?param1=test1&param2=test2&,
// 更易阅读...
url: &something.php&,
data: { param1: test1, param2: test2 }
4.尽量指明数据类型以便你自己清楚要处理什么样的数据（见下方会提到的Ajax模板）
5.对于异步动态加载的内容，最好使用代理来绑定事件处理程序。这样的好处是对于之后动态加载的元素事件同样有效。
$(&#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({
type: &GET&, // 默认为GET,你可以根据需要更改
cache: true, // 默认为true,但对于script,jsonp类型为false,可以自行设置
data: {}, // 将请求参数放这里.
dataType: &json&, // 指定想要的数据类型
jsonp: &callback&, // 指定回调处理JSONP类型的请求
statusCode: { // 如果你想处理各状态的错误的话
404: handler404,
500: handler500
jqxhr.done(successHandler);
jqxhr.fail(failureHandler);
动画与特效
1.保持一个始终如一风格统一的动画实现
2.紧遵用户体验，不要滥用动画特效
使用简洁的显示隐藏，状态切换，滑入滑出等效果来展示元素
使用预设值来设置动画的速度'fast'，'slow'，或者400（中等速度）
1.始终选择一个有良好支持，文档完善，全面测试过并且社区活跃的插件
2.注意所用插件与当前使用的jQuery版本是否兼容
3.一些常用功能应该写成jQuery插件。
1.除了用变量将jQuery选择器返回的结果保存，还可以利用好链式调用。
$(&#myDiv&).addClass(&error&).show();
2.当链式调用多达3次以上或代码因绑定回调略显复杂时，使用换行和适当的缩进来提高代码的可读性。
$(&#myLink&)
.addClass(&bold&)
.on(&click&, myClickHandler)
.on(&mouseover&, myMouseOverHandler)
3.对于特别长的调用最好还是用变量保存下中间结果来简化代码。
1.使用对象来传递参数
$myLink.attr(&href&, &#&).attr(&title&, &my link&).attr(&rel&, &external&); // 糟糕：调用了三次attr
// 不错，只调用了一次attr
$myLink.attr({
href: &#&,
title: &my link&,
rel: &external&
2.不要将CSS与jQuery杂揉
$(&#mydiv&).css({'color':red, 'font-weight':'bold'}); // 不好
.error {/* 不错 */
font-weight:
$(&#mydiv&).addClass(&error&);
3.时刻关注官方Changelog，不要使用摒弃了的方法。
4.适时地使用原生JavaScript。原生的性能肯定相当好一些，
$(&#myId&); // 多少还是会逊色于...
document.getElementById(&myId&);
上面的好的写法，感觉写的真的很不错，多看几遍，绝对有好处！关于jquery新版本废除了好多的用法，至今我还经常使用live()方法，有时候在动态调用click的时候管用，但是尽量不要用废弃了的方法！新版jquery不支持！
相关文章：
关键词搜索文章数：192
访问量：21403
注册日期：
阅读量：5863
阅读量：12276
阅读量：404323
阅读量：1093234
51CTO推荐博文
========================异步返回html代码$(".course_right_div1 .ul1 li").click(function(){
$(this).addClass("xuanzhong").siblings().removeClass("xuanzhong");
var $subject= $(this).text();
$.get("../ASHX/IsTiaojian.ashx",{sub:$subject,red:Math.random()},function(date){
document.getElementById("tj").innerHTML=
});========================使用live解决$(".tiaojian .course_right_div2 ul li").live('click', function(){
//alert('live方式');
$(this).css({"border":"1px solid #2B8BE2","background":"#e9e9e9"});
});&本文出自 “” 博客，请务必保留此出处
了这篇文章
类别：┆阅读(0)┆评论(0)博客访问： 948567
博文数量： 234
博客积分： 6732
博客等级： 准将
技术积分： 2834
注册时间：
IT168企业级官微
微信号：IT168qiye
系统架构师大会
微信号：SACC2013
分类： jQuery
转至 /blog/1554985
一、基本选择器
1. id选择器（指定id元素）
将id="one"的元素背景色设置为黑色。（id选择器返单个元素）
$(document).ready(function () {
&&&&&&& $('#one').css('background', '#000');
2. class选择器（遍历css类元素）
将class="cube"的元素背景色设为黑色
$(document).ready(function () {
&&&&&&& $('.cube').css('background', '#000');
3. element选择器（遍历html元素）
将p元素的文字大小设置为12px
$(document).ready(function () {
&&&&&&& $('p').css('font-size', '12px');
4. * 选择器（遍历所有元素）
$(document).ready(function () {
&&&&&&& // 遍历form下的所有元素，将字体颜色设置为红色
&&&&&&& $('form *').css('color', '#FF0000');
5. 并列选择器
$(document).ready(function () {
&&&&&&& // 将p元素和div元素的margin设为0
&&&&&&& $('p, div').css('margin', '0');
--------------------------------------------------------------------------------
二、 层次选择器
1. parent > child（直系子元素）
$(document).ready(function () {
&&&&&&& // 选取div下的第一代span元素，将字体颜色设为红色
&&&&&&& $('div > span').css('color', '#FF0000');
下面的代码，只有第一个span会变色，第二个span不属于div的一代子元素，颜色保持不变。
&&&&&&& 123
&&&&&&&&&&& 456
2. prev + next（下一个兄弟元素，等同于next()方法）
$(document).ready(function () {
&&& // 选取class为item的下一个div兄弟元素
&&& $('.item + div').css('color', '#FF0000');
&&& // 等价代码
&&& //$('.item').next('div').css('color', '#FF0000');
下面的代码，只有123和789会变色
3. prev ~ siblings（prev元素的所有兄弟元素，等同于nextAll()方法）
$(document).ready(function () {
&&& // 选取class为inside之后的所有div兄弟元素
&&& $('.inside ~ div').css('color', '#FF0000');
&&& // 等价代码
&&& //$('.inside').nextAll('div').css('color', '#FF0000');
下面的代码，G2和G4会变色
--------------------------------------------------------------------------------
三、 过滤选择器
1. 基本过滤选择器
——1.1 :first和:last（取第一个元素或最后一个元素）
$(document).ready(function () {
&&&&&&&&&&& $('span:first').css('color', '#FF0000');
&&&&&&&&&&& $('span:last').css('color', '#FF0000');
&&&&&&& });
下面的代码，G1（first元素）和G3（last元素）会变色
——1.2 :not（取非元素）
$(document).ready(function () {
&&&&&&&&&&& $('div:not(.wrap)').css('color', '#FF0000');
&&&&&&& });
下面的代码，G1会变色
但是，请注意下面的代码：
当G1所在div和G2所在div是父子关系时，G1和G2都会变色。
——1.3 :even和:odd（取偶数索引或奇数索引元素，索引从0开始，even表示偶数，odd表示奇数）
$(document).ready(function () {
&&&&&&&&&&& $('tr:even').css('background', '#EEE'); // 偶数行颜色
&&&&&&&&&&& $('tr:odd').css('background', '#DADADA'); // 奇数行颜色
&&&&&&& });
A、C行颜色#EEE（第一行的索引为0），B、D行颜色#DADADA
——1.4 :eq(x) （取指定索引的元素）
$(document).ready(function () {
&&&&&&&&&&& $('tr:eq(2)').css('background', '#FF0000');
&&&&&&& });
更改第三行的背景色，在上面的代码中C的背景会变色。
——1.5 :gt(x)和:lt(x)（取大于x索引或小于x索引的元素）
$(document).ready(function () {
&&&&&&&&&&& $('ul li:gt(2)').css('color', '#FF0000');
&&&&&&&&&&& $('ul li:lt(2)').css('color', '#0000FF');
&&&&&&& });
L4和L5会是红色，L1和L2会是蓝色，L3是默认颜色
——1.6 :header（取H1~H6标题元素）
$(document).ready(function () {
&&&&&&&&&&& $(':header').css('background', '#EFEFEF');
&&&&&&& });
下面的代码，H1~H6的背景色都会变
2. 内容过滤选择器
——2.1 :contains(text)（取包含text文本的元素）
$(document).ready(function () {
&&&&&&&&&&& // dd元素中包含"jQuery"文本的会变色
&&&&&&&&&&& $('dd:contains("jQuery")').css('color', '#FF0000');
&&&&&&& });
下面的代码，第一个dd会变色
&&& jQuery, .NET, CLR
&&& 关键字排名
——2.2 :empty（取不包含子元素或文本为空的元素）
$(document).ready(function () {
&&&&&&&&&&& $('dd:empty').html('没有内容');
上面第三个dd会显示"没有内容"文本
——2.3 :has(selector)（取选择器匹配的元素）
$(document).ready(function () {
&&&&&&&&&&& // 为包含span元素的div添加边框
&&&&&&&&&&& $('div:has(span)').css('border', '1px solid #000');
&&&&&&& });
即使span不是div的直系子元素，也会生效
——2.4 :parent（取包含子元素或文本的元素）
$(document).ready(function () {
&&&&&&&&&&& $('ol li:parent').css('border', '1px solid #000');
&&&&&&& });
下面的代码，A和D所在的li会有边框
3. 可见性过滤选择器
——3.1 :hidden（取不可见的元素）
jQuery至1.3.2之后的:hidden选择器仅匹配display:none或的元素，而不匹配visibility: hidden或opacity:0的元素。这也意味着hidden只匹配那些“隐藏的”并且不占空间的元素，像visibility:hidden或opactity:0的元素占据了空间，会被排除在外。
参照：/api/hidden-selector
下面的代码，先弹出"hello"对话框，然后hid-1会显示，hid-2仍然是不可见的。
&&& display: none
&&& visibility: hidden
——3.2 :visible（取可见的元素）
下面的代码，最后一个div会有背景色
display: none
visibility: hidden
&&& jQuery选择器大全
4. 属性过滤选择器
——4.1 [attribute]（取拥有attribute属性的元素）
下面的代码，最后一个a标签没有title属性，所以它仍然会带下划线
——4.2 [attribute = value]和[attribute != value]（取attribute属性值等于value或不等于value的元素）
分别为class="item"和class!=item的a标签指定文字颜色
——4.3 [attribute ^= value], [attribute $= value]和[attribute *= value]（attribute属性值以value开始，以value结束，或包含value值）
在属性选择器中，^$符号和正则表达式的开始结束符号表示的含义是一致的，*模糊匹配，类似于sql中的like '%str%'。
——4.4 [selector1][selector2]（复合型属性过滤器，同时满足多个条件）
将title以"jQuery"开始，并且class="item"的a标签隐藏，那么会被隐藏
5. 子元素过滤选择器
——5.1 :first-child和:last-child
:first-child表示第一个子元素，:last-child表示最后一个子元素。
需要大家注意的是，:fisrst和:last返回的都是单个元素，而:first-child和:last-child返回的都是集合元素。举个例子：div:first返回的是整个DOM文档中第一个div元素，而div:first-child是返回所有div元素下的第一个元素合并后的集合。
这里有个问题：如果一个元素没有子元素，:first-child和:last-child会返回null吗？请看下面的代码：
也许你觉得这个答案，是不是太简单了？len1 = 2, len2 = 2。但实际确并不是，它们俩都等于3。
把上面的代码稍微修改一下：
结果却是弹出三个alert，只不过最后一个alert里面是空白的。
——5.2nly-child
当某个元素有且仅有一个子元素时，:only-child才会生效。
这里:only-child也是三个元素，从最后一个很粗的红色边框（实际是两个元素的边框重叠了）也可以看出来。
——5.3 :nth-child
看到这个就想起英文单词里的，fourth, fifth, sixth……，nth表示第n个，:nth-child就表示第n个child元素。要注意的是，这儿的n不像eq(x)、gt(x)或lt(x)是从0开始的，它是从1开始的，英文里好像也没有zeroth这样的序号词吧。
:nth-child有三种用法：
1) :nth-child(x)，获取第x个子元素
2) :nth-child(even)和:nth-child(odd)，从1开始，获取第偶数个元素或第奇数个元素
3) :nth-child(xn+y)，x>=0，y>=0。例如x = 3, y = 0时就是3n，表示取第3n个元素（n>=0）。实际上xn+y是上面两种的通项式。（当x=0,y>=0时，等同于:hth-child(x)；当x=2,y=0时，等同于nth-child(even)；当x=2,y=1时，等同于:nth-child(odd)）
下面的两个例子是针对2)和3)的，1)的例子我就不列举了。
&&&&&&& 1. NBA 2012季后赛
&&&&&&& 2. NBA 2011季后赛
&&&&&&& 3. NBA 2010季后赛
&&&&&&& 4. NBA 2009季后赛
&&&&&&& 5. NBA 2008季后赛
&&&&&&& 6. NBA 2007季后赛
例3（html代码和例2是一样的）：
6. 表单对象属性过滤选择器
——6.1 :enabled和:disabled（取可用或不可用元素）
:enabled和:diabled的匹配范围包括input, select, textarea。
&&&&&&& 不可用的文本域
&&&&&&&&&&& English
&&&&&&&&&&& 简体中文
——6.2 :checked（取选中的单选框或复选框元素）
下面的代码，更改边框或背景色仅在IE下有效果，chrome和firefox不会改变，但是alert都会弹出来。
&&& 必须勾选
你现在工作的企业属于：
——6.3 :selected（取下拉列表被选中的元素）
--------------------------------------------------------------------------------
四、表单选择器
1. :input（取input,textarea,select,button元素）
:input元素这里就不再多说了，前面的一些例子中也已经囊括了。
2. :text（取单行文本框元素）和:password（取密码框元素）
这两个选择器分别和属性选择器$('input[type=text]')、$('input[type=password]')等同。
&&& 账户登录
&&&&&&& 用户名：
&&&&&&& 密&&码：
3. :radio（取单选框元素）
:radio选择器和属性选择器$('input[type=radio]')等同
你现在工作的企业属于：
4. :checkbox（取复选框元素）
:checkbox选择器和属性选择器$('input[type=checkbox]')等同
&&& 您的兴趣爱好：
&&& 打篮球
&&& 电脑游戏
上面的代码，会将所有额checkbox的value输出出来。若你想选择选中项，有三种写法：
$(':checkbox:checked').each(function() {
&&& alert($(this).val());
$('input[type=checkbox][checked]').each(function() {
&&& alert($(this).val());
$(':checked').each(function() {
&&& alert($(this).val());
5. :submit（取提交按钮元素）
:submit选择器和属性选择器$('input[type=submit]')等同
6. :reset（取重置按钮元素）
:reset选择器和属性选择器$('input[type=reset]')等同
7. :button（取按钮元素）
:button选择器和属性选择器$('input[type=button]')等同
8. :file（取上传域元素）
:file选择器和属性选择器$('input[type=file]')等同
9. :hidden（取不可见元素）
:hidden选择器和属性选择器$('input[type=hidden]')等同
表单选择器的6~10例子我就不再列举了，和1~5的很类似，大家可以自己尝试一下。
Always keep dream, keep thinking, keep moving, even if the road obstacles , the one more important thing is that always be a pig for you, that's keep fool.
阅读(1612) | 评论(0) | 转发(0) |
相关热门文章
给主人留下些什么吧！~~
请登录后评论。}