7个jQuery最佳实践


Posted in Javascript onJanuary 12, 2016

随着富网络应用(rich web applications)数量的增长,以及用户对快速交互响应的高期望,开发者开始使用JavaScript库来快速高效的完成一些重复性的工作。这其中最流行的JavaScript库就是jQuery。但是jQuery的大量应用却带来了另外一个问题:在使用JavaScript库的时候,有哪些最佳实践,又有哪些不好的实践呢?

7个jQuery最佳实践

背景

在这篇文章中,我会给大家介绍在编写、调试和审查JavaScript代码的时候一些好的实践(至少我是这么认为的)。事实上,我选择了其中7个最常见的场景。

1、使用CDN及其回退地址(fallback)

CDN代表内容传递网络(Content Delivery Network),是一个缓存了JavaScript文件的服务器。使用CDN之后,每当一个新用户发起请求的时候,你的应用程序可以使用CDN缓存,而不用从你的服务器上重新加载库文件。Google、Microsoft和JQuery都提供CDN服务。

鉴于网络并不总是100%可靠,服务器也可能因为一些原因宕机,你必须要确保即使这些事情发生,你的应用程序依然能正常运行。这时候我们就要用到回退地址:当应用程序无法找到缓存库的时候,它就会回退回来,使用服务器文件。

Google CDN 是这样的:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script>

Microsoft CDN是这样的:

<script src="//ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.min.js"> </script>

需要注意的是,我们没有指定URL协议为http而是使用的//。这是因为CDN服务器支持http和https,如果你的网站拥有SSL认证,你无须修改就可以正常加载文件。

另外,就像我之前提到的那样,我们还需要一个回退地址,以防CDN服务器出现问题。

<script>Window.JQuery || document.write(‘<script src=”script/localsourceforjquery”></script>’)

当然,你也可以用Require来配置需要的jQuery,不过我觉得就这样也不错。

2、限制DOM交互

用JavaScript操作DOM树是存在性能消耗的。jQuery也一样。所以,尽量减少与DOM的交互吧。当我帮助我一个同事提高数据显示速度的时候,我看见他在一个循环里面使用了选择器。这简直是性能杀手!他是这样写的:

containerDiv = $("#contentDiv");
for(var d =0; d < TotalActions; d++)
{
 containerDiv.append("<div><span class='brilliantRunner'>" + d + "</span></div>");
}

有什么问题呢?咋一看没啥问题。而且我的同事也说这段代码跑得很欢乐呢!我真是哔了狗了!当TotalActions小于50时,察觉不到任何问题;但是其达到25000的时候,速度便降低了很多,原因(我也是google到的)就是DOM交互放到了循环当中。

对于这个功能,(多次尝试失败之后)我将循环中的直接DOM交互替换成了一个数组的push操作,然后用一个空字符串作为分隔符将数组连接(join)起来。最后,程序当然变得更加流畅和高效了。

var myContent=[];
for(var d = 0; d < TotalActions; d++)
{
 myContent.push("<div><span class='brilliantRunner'>" + d + "</span></div>");
}
containerDiv.html(myContent.join(""));

3、缓存

jQuery最重要也是最有特色的地方,就是它的选择器以及在DOM树中查找HTML元素的方式。但是,我多次看到,一些开发者在同一个函数中,多次调用相同的选择器,比如 $(“#divid”)。尽管jQuery选择元素非常快,但也不要每次都去查找相同的元素吧。所以,你可以像这样缓存的你元素:

var $divId = $("#divId")

然后在接下来的代码中,就可以用$divId了。

对于下面的代码:

var thefunction = function()
{
 $("#mydiv").ToggleClass("zclass");
 $("#mydiv").fadeOut(800);
}

var thefunction2 = function()
{
 $("#mydiv").addAttr("name");
 $("#mydiv").fadeIn(400);
}

我们可以对它做这样的修改,并且使用链式语法,使其看起来更加漂亮:

var mydiv =$("#mydiv");
var thefunction = function()
{
 mydiv.ToggleClass("zclass").fadeOut(800);
}

var thefunction2 = function()
{
 mydiv.addAttr("name").fadeIn(400);
}

但是话又说回来,你也不用每次把所有东西都缓存起来。看下面的例子:

$("#link").click(function()
{
  $(this).addClass("gored");
}

在这里,我既没有用 $(“#link”),或者将其缓存起来,而是使用的$(this)。因为在这个例子中,我操作的对象就是这个链接本身。

4、find 和 filter

最近,在使用find()来获取jQuery对象结合的时候,我产生了一些困惑。然后我发现,这个操作可以替换为用filter()方法来实现。理解这两者的区别非常重要:

find: 将会从选定的元素开始,一直向下查找DOM树

filter: 是在jQuery集合当中查找
5、end()

当在jQuery集合中进行链式操作的时候,我有时候需要回到父对象去进行一些操作。比如你正在一个表格的第二行应用CSS,然后希望回到表格对象,对其添加一些样式。在你对行应用完样式之后,只要使用end()方法,你就会自动回到表格对象,然后随意的对其添加样式吧!

(译者注:find()、filter()和end()原文是大写,其实应该是小写)

6、对象字面量

当你通过链式语法来操作元素的CSS属性的时候,你可以使用对象字面量方式来提升性能。比如这段代码:

$("#myimg").attr("src", "thepath").attr("alt", "the alt text");

变成下面这样之后,不仅避免了操作DOM元素,而且还不用多次调用相关的设置方法:

$("#myimg").attr({"src": "thepath", "alt": "the alt text"});

7、善用CSS类

尽可能使用CSS类而不要写内联CSS代码。我想这一点就不需要举例说明了吧。

希望这篇文章能够帮助你编写更好的jQuery应用程序,真正的帮助到大家。

Javascript 相关文章推荐
根据判断浏览器类型屏幕分辨率自动调用不同CSS的代码
Feb 22 Javascript
js 实现css风格选择器(压缩后2KB)
Jan 12 Javascript
js replace正则表达式应用案例讲解
Jan 17 Javascript
Jquery 实现表格颜色交替变化鼠标移过颜色变化实例
Aug 28 Javascript
JS实现遮罩层效果的简单实例
Nov 12 Javascript
jquery获取tagName再进行判断
May 29 Javascript
JavaScript中诡异的delete操作符
Mar 12 Javascript
JavaScript实现横向滑出的多级菜单效果
Oct 09 Javascript
Bootstrap源码学习笔记之bootstrap进度条
Dec 24 Javascript
微信小程序显示下拉列表功能【附源码下载】
Dec 12 Javascript
解决Layui中layer报错的问题
Sep 03 Javascript
JS如何在不同平台实现多语言方式
Jul 16 Javascript
实例详解jQuery Mockjax 插件模拟 Ajax 请求
Jan 12 #Javascript
JavaScript实现输入框(密码框)出现提示语
Jan 12 #Javascript
javascript自动恢复文本框点击清除后的默认文本
Jan 12 #Javascript
JS清除文本框内容离开在恢复及鼠标离开文本框时触发js的方法
Jan 12 #Javascript
jquery模拟实现鼠标指针停止运动事件
Jan 12 #Javascript
js实现字符串和数组之间相互转换操作
Jan 12 #Javascript
js右下角弹出提示框示例代码
Jan 12 #Javascript
You might like
玩转虚拟域名◎+ .
2006/10/09 PHP
mysqli_set_charset和SET NAMES使用抉择及优劣分析
2013/01/13 PHP
php结合redis高并发下发帖、发微博的实现方法
2016/12/15 PHP
Symfony查询方法实例小结
2017/06/28 PHP
PHP实现可精确验证身份证号码的工具类示例
2018/05/31 PHP
javascript Split方法,indexOf方法、lastIndexOf 方法和substring 方法
2009/03/21 Javascript
Javascript 获取链接(url)参数的方法[正则与截取字符串]
2010/02/09 Javascript
疯狂Jquery第一天(Jquery学习笔记)
2012/05/11 Javascript
jQuery.trim() 函数及trim()用法详解
2015/10/26 Javascript
JS使用cookie实现DIV提示框只显示一次的方法
2015/11/05 Javascript
Jquery基础之事件操作详解
2016/06/14 Javascript
微信小程序 progress组件详解及实例代码
2016/10/25 Javascript
深入理解Javascript中的valueOf与toString
2017/01/04 Javascript
老生常谈javascript中逻辑运算符&amp;&amp;和||的返回值问题
2017/04/13 Javascript
vue中v-model的应用及使用详解
2018/06/27 Javascript
Python开发实例分享bt种子爬虫程序和种子解析
2014/05/21 Python
Python multiprocessing.Manager介绍和实例(进程间共享数据)
2014/11/21 Python
Python 常用string函数详解
2016/05/30 Python
python简单线程和协程学习心得(分享)
2017/06/14 Python
15行Python代码实现网易云热门歌单实例教程
2019/03/10 Python
Python数据类型之Tuple元组实例详解
2019/05/08 Python
python numpy之np.random的随机数函数使用介绍
2019/10/06 Python
Python中sorted()排序与字母大小写的问题
2020/01/14 Python
使用sklearn对多分类的每个类别进行指标评价操作
2020/06/11 Python
python中数字是否为可变类型
2020/07/08 Python
微信浏览器取消缓存的方法
2015/03/28 HTML / CSS
Smashbox官网:美国知名彩妆品牌
2017/01/05 全球购物
英国手机零售商:Carphone Warehouse
2018/06/06 全球购物
高校毕业生自我鉴定
2013/10/27 职场文书
实习教师个人的自我评价
2013/11/08 职场文书
环境科学毕业生自荐信
2013/11/21 职场文书
小学运动会入场式解说词
2014/02/18 职场文书
注册资产评估专业求职信
2014/07/16 职场文书
不错的求职信范文
2014/07/20 职场文书
党风廉正建设个人工作总结
2015/03/06 职场文书
分享很少见很有用的SQL功能CORRESPONDING
2022/08/05 MySQL