jquery高级编程的最佳实践详解


Posted in Javascript onMarch 23, 2014

加载jQuery

1.坚持使用CDN来加载jQuery,这种别人服务器免费帮你托管文件的便宜干嘛不占呢。点击查看使用CDN的好处,点此查看一些主流的jQuery 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.如果可能,尽量将你的JavaScript和jQuery代码放到页面底部。详情移步这里,或者查看一个HTML5页面标准模板。

5.该使用哪个版本?

如果你想兼容IE678请表用2.x的版本
针对极少数不用考虑兼容性的幸运儿,极力推荐使用最新版本的jQuery
当从CDN服务器加载jQuery时,最好把版本写全(比如1.11.0而不是1.11或者直接写个1)
千万莫重复加载
6.如果你同时还使用了其他JS框架诸如Prototype, MooTools, Zepto云云,因为他们也使用了$符号,所以你就表再用美刀符号来进行jQuery 编码了,而请用'jQuery'代替。并且调用$.noConflict()保证不会有冲突出现。

7.要检测浏览器对一些新特性是否支持,请用Modernizr。插播广告:论为毛不检测浏览器

关于变量

1.jQuery类型的变量最好加个$前缀。

2.时常将jQuery选择器返回的内容存进变量以便重用

var $products = $("div.products"); // 慢
var $products = $(".products"); // 快

3.使用驼峰命名

关于选择器

1.尽量ID选择器。其背后机理其实是调用原生的document.getElementById(),所以速度较其他选择器快。

2.使用类选择器时表指定元素的类型。不信你看这个性能比较

var $products = $("div.products"); // 慢
var $products = $(".products"); // 快

3.ID父亲容器下面再查找子元素请用.find()方法。这样做快的原因是通过id选择元素不会使用Sizzle引擎。详情看这里

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

DOM操作相关

1.操作任何元素前先将其从文档卸载,完了再贴回去。这事儿还能说细点

var $myList = $("#list-container > ul").detach();
//...一大堆对$myList的处理
$myList.appendTo("#list-container");
2.代码里将HTML组织好后再一次性贴到DOM中去。具体来说,性能比较
// 这样不好
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.不要处理不存在的元素。详情

// 无良的做法:jQuery后台要跑完三个函数后才会知道这个元素其实根本不存在
$("#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>
<script>
 // 初始经一些必要的全局变量
 $(document).ready(initPage); // 抑或 $(initPage);
</script>

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");

异步操作

1.直接用$.ajax()而表去用.getJson() 或 .get(),因为jQuery内部还是将其转为前者

2.表对HTTPS站点使用HTTP去发起请求,最好干脆就表指定(将HTTP或者HTTPS从你的URL中移除)

3.表在链接里面嵌参数,请使用专门的参数设置来传递

// 不易阅读的代码...
$.ajax({
    url: "something.php?param1=test1¶m2=test2",
    ....
});// 更易阅读...
$.ajax({
    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({
    url: url,
    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插件。一分jQuery插件的编写模板

链式句法

1.除了用变量将jQuery选择器返回的结果保存,还可以利用好链式调用。

$("#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
// 不错,只调用了一次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;
}
$("#mydiv").addClass("error");

3.时刻关注官方Changelog,表使用摒弃了的方法。

4.适时地使用原生JavaScript。

$("#myId"); // 多少还是会逊色于...
Javascript 相关文章推荐
javascript脚本调试方法小结
Nov 24 Javascript
jquery插件开发之实现md5插件
Mar 17 Javascript
js事件绑定快捷键以ctrl+k为例
Sep 30 Javascript
轮播图组件js代码
Aug 08 Javascript
Angular中使用ui router实现系统权限控制及开发遇到问题
Sep 23 Javascript
JS实现的简单图片切换功能示例【测试可用】
Feb 14 Javascript
jQuery动态添加.active 实现导航效果代码思路详解
Aug 29 jQuery
基于angular6.0实现的一个组件懒加载功能示例
Apr 12 Javascript
分享5个顶级的JavaScript Ajax组件库
Sep 16 Javascript
vue中实现回车键登录功能
Feb 19 Javascript
JavaScript中继承原理与用法实例入门
May 09 Javascript
微信小程序APP页面的之间的相互传递参数以及自定义组件
Apr 19 Javascript
js 判断浏览器使用的语言示例代码
Mar 22 #Javascript
jquery easyui 对于开始时间小于结束时间的判断示例
Mar 22 #Javascript
js过滤特殊字符输入适合输入、粘贴、拖拽多种情况
Mar 22 #Javascript
jquery获取复选框被选中的值
Mar 22 #Javascript
纯JS实现根据CSS的class选择DOM
Mar 22 #Javascript
使用JS取得焦点(focus)元素代码
Mar 22 #Javascript
查找Oracle高消耗语句的方法
Mar 22 #Javascript
You might like
基于PHP+jQuery+MySql实现红蓝(顶踩)投票代码
2015/08/25 PHP
PHP pear安装配置教程
2016/05/14 PHP
php表单文件iframe异步上传实例讲解
2017/07/26 PHP
CMSPRESS 10行代码搞定 PHP无限级分类2
2018/03/30 PHP
浅析JavaScript中的常用算法与函数
2013/11/21 Javascript
js阻止默认事件与js阻止事件冒泡示例分享 js阻止冒泡事件
2014/01/27 Javascript
基于NodeJS的前后端分离的思考与实践(二)模版探索
2014/09/26 NodeJs
javascript实现动态改变层大小的方法
2015/05/14 Javascript
深入对Vue.js $watch方法的理解
2017/03/20 Javascript
vue.js开发环境搭建教程
2017/05/04 Javascript
让nodeJS支持ES6的词法----babel的安装和使用方法
2017/07/31 NodeJs
JS 仿支付宝input文本输入框放大组件的实例
2017/11/14 Javascript
zTree节点文字过多的处理方法
2017/11/24 Javascript
Vue修改mint-ui默认样式的方法
2018/02/03 Javascript
当vue路由变化时,改变导航栏的样式方法
2018/08/22 Javascript
基于mpvue搭建微信小程序项目框架的教程详解
2019/04/10 Javascript
Python修改Excel数据的实例代码
2013/11/01 Python
Python使用urllib模块的urlopen超时问题解决方法
2014/11/08 Python
详解Python装饰器由浅入深
2016/12/09 Python
python利用urllib和urllib2访问http的GET/POST详解
2017/09/27 Python
python爬虫之urllib3的使用示例
2018/07/09 Python
Python Pillow Image Invert
2019/01/22 Python
OpenCV搞定腾讯滑块验证码的实现代码
2019/05/18 Python
python实现比对美团接口返回数据和本地mongo数据是否一致示例
2019/08/09 Python
使用python+whoosh实现全文检索
2019/12/09 Python
pyecharts动态轨迹图的实现示例
2020/04/17 Python
找到您丢失的钥匙、钱包和手机:Tile
2017/05/19 全球购物
介绍一下Python下range()函数的用法
2013/11/07 面试题
老师给学生的表扬信
2014/01/17 职场文书
中学生励志演讲稿
2014/04/26 职场文书
自我推荐信范文
2014/05/09 职场文书
预备党员转正考核材料
2014/06/03 职场文书
专业技术人员年度考核评语
2014/12/31 职场文书
汽车转让协议书
2015/01/29 职场文书
公司员工辞职信范文
2015/05/12 职场文书
导游词之广西漓江
2019/11/02 职场文书