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短信验证码如何实现
Jan 24 Javascript
浏览器检测JS代码(兼容目前各大主流浏览器)
Feb 21 Javascript
JavaScript必看小技巧(必看)
Jun 07 Javascript
JS 全屏和退出全屏详解及实例代码
Nov 07 Javascript
获取select的value、text值的简单示例(jquery与javascript)
Dec 07 Javascript
JS生成一维码(条形码)功能示例
Jan 19 Javascript
浅析JavaScript中var that=this
Feb 17 Javascript
JavaScript ES2019中的8个新特性详解
Feb 20 Javascript
详解在微信小程序的JS脚本中使用Promise来优化函数处理
Mar 06 Javascript
微信小程序与webview交互实现支付功能
Jun 07 Javascript
vue实现后台管理权限系统及顶栏三级菜单显示功能
Jun 19 Javascript
layui type2 通过url给iframe子页面传值的例子
Sep 06 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面向对象全攻略 (三)特殊的引用“$this”的使用
2009/09/30 PHP
php重定向的三种方法分享
2012/02/22 PHP
PHP+Mysql日期时间如何转换(UNIX时间戳和格式化日期)
2012/07/15 PHP
PHP使用feof()函数读文件的方法
2014/11/07 PHP
深入浅出讲解:php的socket通信原理
2016/12/03 PHP
PHP连续签到功能实现方法详解
2019/12/04 PHP
jQuery ajax调用WCF服务实例
2014/07/16 Javascript
Javascript验证Visa和MasterCard信用卡号的方法
2015/07/27 Javascript
JS控制伪元素的方法汇总
2016/04/06 Javascript
JavaScript实现页面跳转的方式汇总
2016/05/16 Javascript
通俗解释JavaScript正则表达式快速记忆
2017/08/23 Javascript
vue.js  父向子组件传参的实例代码
2017/10/29 Javascript
JQuery扩展对象方法操作示例
2018/08/21 jQuery
详解vue使用vue-layer-mobile组件实现toast,loading效果
2018/08/31 Javascript
webpack4.0+vue2.0利用批处理生成前端单页或多页应用的方法
2019/06/28 Javascript
[01:30:55]VG vs Mineski Supermajor 败者组 BO3 第三场 6.6
2018/06/07 DOTA
Windows8下安装Python的BeautifulSoup
2015/01/22 Python
Python跨文件全局变量的实现方法示例
2017/12/10 Python
Python 变量类型详解
2018/10/10 Python
python fuzzywuzzy模块模糊字符串匹配详细用法
2019/08/29 Python
Python进程间通信 multiProcessing Queue队列实现详解
2019/09/23 Python
浅析Django 接收所有文件,前端展示文件(包括视频,文件,图片)ajax请求
2020/03/09 Python
python代码中怎么换行
2020/06/17 Python
Canvas 帧动画吃苹果小游戏
2020/08/05 HTML / CSS
SISLEY希思黎官方旗舰店:享誉全球的奢华植物美容品牌
2018/04/25 全球购物
高级工程师岗位职责
2013/12/15 职场文书
企业管理部经理岗位职责
2013/12/24 职场文书
恐龙的灭绝教学反思
2014/02/12 职场文书
农林环境专业求职信
2014/03/13 职场文书
教师应聘自荐信范文
2014/03/14 职场文书
就业协议书的作用
2014/04/11 职场文书
公司客户答谢酒会祝酒词
2015/08/11 职场文书
2019年大学生职业生涯规划书
2019/03/25 职场文书
什么是创业计划书?什么是商业计划书?这里一一解答
2019/07/12 职场文书
CSS几步实现赛博朋克2077风格视觉效果
2021/06/16 HTML / CSS
JS中forEach()、map()、every()、some()和filter()的用法
2022/05/11 Javascript