15个值得开发人员关注的jQuery开发技巧和心得
在这篇文章中,我们将介绍15个让你的jQuery更加有效的技巧,大部分关于性能提升的,希望大家能够喜欢!
1. 尽量使用最新版本的jQuery类库
jQuery项目中使用了大量的创新。最好的方法来提高性能就是使用最新版本的jQuery。每一个新的版本都包含了优化的bug修复。对我们来说唯一要干的就是修改tag,何乐而不为呢?
我们也可以使用免费的CDN服务,例如, Google来存放jQuery类库。
<!-- Include a specific version of jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<!-- Include the latest version in the 1.6 branch -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
2. 使用简单的选择器
直到最近,返回DOM元素的方式都是解析选择器字符串,javascript循环和内建的javascript API例如,getElementbyId(),getElementsByTagName(),getElementsByClassName()三种方式的整合使用。但是现代浏览器都开始支持querySelectorAll(),这个方法能够理解CSS查询器,而且能带来显著的性能提升。
然而,我们应该避免使用复杂的选择器返回元素。更不用说很多用户使用老版本的浏览器,强迫jQuery去处理DOM树。这个方式非常慢。
$('li[data-selected="true"] a') // Fancy, but slow
$('li.selected a') // Better
$('#elem') // Best
选择id是最快速的方式。如果你需要使用class名称, 那么你最好带上tag名称,这样会更快些。特别是在老浏览器和移动设备上。
访问DOM是javascript应用最慢的方式 ,因此尽量少使用。使用变量去保存选择器,这样会使用cache来保存。性能更好。
var buttons = $('#navigation a.button'); // Some prefer prefixing their jQuery variables with $:
var $buttons = $('#navigation a.button');
另外一个值得做的是jQuery给了你很多的额外便利选择器 ,例如,:visible,:hidden,:animated还有其它,这些不是合法的CSS3选择器。结果是你使用这些类库就不能有效地利用querySelectorAll()方法。为了弥补这个问题,你需要先选择元素,再过滤,如下:
$('a.button:animated'); // Does not use querySelectorAll()
$('a.button').filter(':animated'); // Uses it
3. 数组方式使用jQuery对象
运行选择器的结果是一个jQuery对象。然而,jQuery类库让你感觉你正在使用一个定义了index和长度的数组。
// Selecting all the navigation buttons:
var buttons = $('#navigation a.button');
// We can loop though the collection:
for(var i=0;i<buttons.length;i++){
console.log(buttons[i]); // A DOM element, not a jQuery object
}
// We can even slice it:
var firstFour = buttons.slice(0,4);
如果性能是你关注的,那么使用简单for或者while循环来处理,而不是$.each(),这样能使你的代码更快。
检查长度也是一个检查你的collection是否含有元素的方式。
if(buttons){ // This is always true
// Do something
}
if(buttons.length){ // True only if buttons contains elements
// Do something
}
4. 选择器属性
jQuery提供了一个属性,这个属性显示了用来做链式的选择器。
$('#container li:first-child').selector // #container li:first-child
$('#container li').filter(':first-child').selector // #container li.filter(:first-child)
虽然上面的例子针对同样的元素,选择器则完全不一样。第二个实际上是非法的,你不可以使用它来创建一个对象。只能用来显示filter方法是用来缩小collection。
5. 创建一个空的jQuery对象
创建一个新的jQuery空间能极大的减小开销。有时候,你可能需要创建一个空的对象,然后使用add()方法添加对象。
var container = $([]);
container.add(another_element);
这也是quickEach方法的基础,你可以使用这种更快的方式而非each()。
6. 选择一个随机元素
上面我提到过,jQuery添加它自己的选择器过滤。除了类库,你可以添加自己的过滤器。只需要添加一个新的方法到$.expr[':']对象。一个非常棒的使用方式是Waldek Mastykarz的博客中提到的:创建一个用来返回随机元素的选择器。你可以修改下面代码:
(function($){
var random = 0;
$.expr[':'].random = function(a, i, m, r) {
if (i == 0) {
random = Math.floor(Math.random() * r.length);
}
return i == random;
};
})(jQuery);
// This is how you use it:
$('li:random').addClass('glow');
7. 使用CSS Hooks
CSS hooks API是提供开发人员得到和设置特定的CSS数值的方法。使用它,你可以隐藏浏览器特定的执行并且使用一个统一的界面来存取特定的属性。、
$.cssHooks['borderRadius'] = {
get: function(elem, computed, extra){
// Depending on the browser, read the value of
// -moz-border-radius, -webkit-border-radius or border-radius
},
set: function(elem, value){
// Set the appropriate CSS3 property
}
};
// Use it without worrying which property the browser actually understands:
$('#rect').css('borderRadius',5);
更好的在于,人们已经创建了一个支持CSS hooks类库
8. 使用自定义的缓动方法
你可能听到过jQuery的缓动插件,它能够允许你给你的动画添加特效。唯一的缺点是你的访问者需要加载另外一个javascript文件。幸运的是,你可以简单的从插件拷贝效果,并且添加到jQuery.easing对象中,如下:
$.easing.easeInOutQuad = function (x, t, b, c, d) {
if ((t/=d/2) < 1) return c/2*t*t + b;
return -c/2 * ((--t)*(t-2) - 1) + b;
}; // To use it:
$('#elem').animate({width:200},'slow','easeInOutQuad');
9. $.proxy()
使用callback方法的缺点之一是当执行类库中的方法后,context被设置到另外一个元素,例如:
<div id="panel" style="display:none">
<button>Close</button>
</div>
执行下面代码:
$('#panel').fadeIn(function(){
// this points to #panel
$('#panel button').click(function(){
// this points to the button
$(this).fadeOut();
});
});
你将遇到问题,button会消失,不是panel。使用$.proxy方法,你可以这样书写代码:
$('#panel').fadeIn(function(){
// Using $.proxy to bind this:
$('#panel button').click($.proxy(function(){
// this points to #panel
$(this).fadeOut();
},this));
});
这样才正确的执行。$.proxy方法接受两个参数,你最初的方法,还有context。这里阅读更多$.proxy in the docs.。
10. 判断页面是否太过复杂
一个非常简单的道理,约复杂的页面,加载的速度越慢。你可以使用下面代码检查一下你的页面内容:
console.log( $('*').length );
以上代码返回的数值越小,网页加载速度越快。你可以考虑通过删除无用多余的元素来优化你的代码
11. 将你的代码转化成jQuery插件
如果你要花一定得时间去开发一段jQuery代码,那么你可以考虑将代码变成插件。这将能够帮助你重用代码,并且能够有效的帮助你组织代码。创建一个插件代码如下:
(function($){
$.fn.yourPluginName = function(){
// Your code goes here
return this;
};
})(jQuery);
你可以在这里阅读更多开发教程。
12. 设置全局AJAX为缺省
如果你开发ajax程序的话,你肯定需要有”加载中“之类的显示告知用户,ajax正在进行,我们可以使用如下代码统一管理,如下:
// ajaxSetup is useful for setting general defaults:
$.ajaxSetup({
url : '/ajax/',
dataType : 'json'
}); $.ajaxStart(function(){
showIndicator();
disableButtons();
}); $.ajaxComplete(function(){
hideIndicator();
enableButtons();
}); /*
// Additional methods you can use:
$.ajaxStop();
$.ajaxError();
$.ajaxSuccess();
$.ajaxSend();
*/
13. 在动画中使用delay()方法
链式的动画效果是jQuery的强大之处。但是有一个忽略了的细节就是你可以在动画之间加上delays,如下:
// This is wrong:
$('#elem').animate({width:200},function(){
setTimeout(function(){
$('#elem').animate({marginTop:100});
},2000);
}); // Do it like this:
$('#elem').animate({width:200}).delay(2000).animate({marginTop:100});
jQuery动画帮了我们大忙,否则我们得自己处理一堆的细节,设置timtout,处理属性值,跟踪动画变化等等。
大家可以参考这个文章:jQuery animations
14. 合理利用HTML5的Data属性
HTML5的data属性可以帮助我们插入数据。特别合适前后端的数据交换。jQuery近来发布的data()方法,可以有效的利用HTML5的属性,来自动得到数据。下面是个例子:
<div id="d1" data-role="page" data-last-value="43" data-hidden="true"
data-options='{"name":"John"}'>
</div>
为了存取数据你需要调用如下代码:
$("#d1").data("role"); // "page"
$("#d1").data("lastValue"); // 43
$("#d1").data("hidden"); // true;
$("#d1").data("options").name; // "John";
data()的jQuery文档:data() in the jQuery docs
15. 本地存储和jQuery
本地存储是一个超级简单的API。简单的添加你的数据到localStorage全局属性中:
// Check if "key" exists in the storage
var value = $.jStorage.get("key");
if(!value){
// if not - load the data from the server
value = load_data_from_server();
// and save it
$.jStorage.set("key",value);
} // Use value
但是对于老的浏览器来说,这个不是个好消息。因为他们不支持。但是我们可以使用jQuery的插件来提供支持一旦本地存储不能用的话。这种方式可以使得本地存储功能正常工作。
15个值得开发人员关注的jQuery开发技巧和心得的更多相关文章
- Android开发人员必知的开发资源
developer.android.com 官方开发人员网站推荐资源 在动手编写第一个 Android 应用之前,用心读一读 Android Design 章节.尤其是以下的这些文章: Devices ...
- JavaScript 开发人员需要知道的简写技巧
本文来源于多年的 JavaScript 编码技术经验,适合所有正在使用 JavaScript 编程的开发人员阅读. 本文的目的在于帮助大家更加熟练的运用 JavaScript 语言来进行开发工作. 文 ...
- 所有人都可以是开发人员——《Office 365开发入门指南》视频教程即将上市
今天是春节假期的最后一天,在这里给全国的朋友们拜个晚年,祝大家身体健康,晚年幸福啊.这个春节大家过的怎么样啊,我自己是在老家过的年,家乡的年味还是比较浓的,也再次感谢朋友圈的大家给我看了各地的风光 ...
- 安晓辉大神的感悟:如果你发现了自己的学习模式,愿意学并且能坚持,我觉得没什么能阻挡你征服软件世界的脚步(对于开发人员来讲,最大的风险是:在职业规划上没有延续性地乱跳槽。时刻要牢记在心的:培养自己的稀缺性) good
从技术支持中途转战软件开发,如今从事编程工作已十多有余,2014年CSDN博文大赛编程语言组冠军.CSDN Qt论坛的版主安晓辉老师从今天开始,坐镇CSDN社区问答栏目的 第十四期,届时会接受广大网友 ...
- Web开发人员vs网页设计师
Web开发人员vs网页设计师 我们都遇到过,但实际的区别是什么?如果您是该领域的新手,请阅读详细内容,这些内容比您想象的更重要. 经过几周(或几个月)的规划和准备,进行市场调查,与其他企业家交谈,现在 ...
- DevStore开发人员服务有奖征文:小谈新浪微博开放平台
DevStore开发人员服务有奖征文:小谈新浪微博开放平台 笔者接入新浪微博开发平台也有一段时间了,对整个平台的接入也算比較熟悉,新浪提供了统一的API接口,能够让开发人员更方便的使用API来实现自己 ...
- 手游Apk破解疯狂,爱加密apk加固保护开发人员
2013年手游行业的规模与收入均实现了大幅增长,发展势头强劲.权威数据显示, 我国移动游戏市场实际销售收入从2012年的32.4亿猛增到2013年的112.4亿元,同比增长了246.9%,手游用户从2 ...
- ssh keygen命令实现免密码通信(git库获取操作权限:开发人员添加到git库中,获取操作权限)
先看两个机器实现免密码登陆通讯: 假设 A 为客户机器,B为目标机: 要达到的目的: A机器ssh登录B机器无需输入密码: 加密方式选 rsa|dsa均可以,默认dsa 做法: 1.登录A机器 2.s ...
- IT农民的开发人员工具清单(2013年)
IT行业日新月异,每天都不断变化着.作为一名混迹IT行业小有几个年头码农来说,不仅要时刻提高自身技术,也要不断更新自己开发工具.这些工具都是我吃饭的饭碗.饭碗旧了也是需要买个新的.转眼之间,已到201 ...
随机推荐
- HTML+CSS基础学习笔记(2)
一.无序列表标签ul <ul> <li>信息</li> <li>信息</li> ...... </ul> 代码解释:每项< ...
- [转]eclipse github 提交代码
1 git add2 git commit3 git pull (会产生冲突) 分成自动合并和手动合并4 处理冲突的文件 5 git push 本次commit 我用的是Eclipse的插件EGit ...
- 关于打开ILDASM的方法
1.通过VisualStudio在开始菜单下的Microsoft Visual Studio 2008/Visual Studio Tools/中的命令提示符中输入ildasm即可 2.将其添加至 ...
- SQL SERVER 高级编程 - 自定义函数 拾忆
每个人都很忙,但是花10分钟复习下,总结下基础东西还是很有益处的. 背景: 总结一句,使用简便,还能递归,是的SQL更简洁,相对比一大堆的关联语句,而且关联一大堆还不一定实现特定功能.而且共用部分可以 ...
- iOS pop使用通知传值
iOS pop回父级页面,使用通知传值 输入所要发送的信息 ,同时将label的值通过button方法调用传递, - (IBAction)buttonClick:(id)sender { //添加 字 ...
- c#中用DirectShow实现媒体播放器的核心(1) DirectShow简介
用.net做多媒体开发的似乎不多,所以网上资源也少,看的人更少.不过我的博客上居然还有几位在等新文章的人,有点出乎我的意料了.目前我已不再从事多媒体相关的工作,加入新公司至今都忙到吐血,再加上害怕水平 ...
- java中的包装类
每一个包装类都对应一种基本数据类型.包装类有:Integer.character.Byte.Short.Long.Floot.Double.Boolean这八种,分别对应的基本数据类型是:int.ch ...
- 菜鸟日记之JSP二 内置对象的理解
·最近学习JSP了,对编程和网络又有了一些理解.无论是现实中人与人的交流,还是网络世界的接触,都是在相互表达自己的意思让别人知道,并理解对方的信息.然后我们知道的事情不断的变多,会又交杂出新的内容,不 ...
- jquery ajax 后台响应成功,返回正确json但不执行success方法,执行error的问题
昨天被这问题卡了好几个小时.查看http状态码:是200.而且返回了预想的json字符串.但执行的是error方法,不执行success方法.在网上查了一下,才发现是后台页面返回的json字符串格式不 ...
- swift官方文档中的函数闭包是怎么理解的?
官方文档中的16页: numbers.map({ (number: Int) -> Int in let result = * number return result }) 不知道这个怎么用, ...