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 相关文章推荐
Google韩国首页图标动画效果
Aug 26 Javascript
JQUERY操作JSON实例代码
Feb 09 Javascript
JQuery选择器特辑 详细小结
May 14 Javascript
jQuery实现等比例缩放大图片让大图片自适应页面布局
Oct 16 Javascript
Jquery实现兼容各大浏览器的Enter回车切换输入焦点的方法
Sep 01 Javascript
详解jQuery Mobile自定义标签
Jan 06 Javascript
jquery获取所有选中的checkbox实现代码
May 26 Javascript
基于WebUploader的文件上传js插件
Aug 19 Javascript
JavaScript中的toString()和toLocaleString()方法的区别
Feb 15 Javascript
bootstrap fileinput实现文件上传功能
Aug 23 Javascript
JavaScript实现栈结构Stack过程详解
Mar 07 Javascript
vue cli3.0打包上线静态资源找不到路径的解决操作
Aug 03 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
PHP新手上路(十四)
2006/10/09 PHP
PHP实现WebService的简单示例和实现步骤
2015/03/27 PHP
微信利用PHP创建自定义菜单的方法
2016/08/01 PHP
php模仿qq空间或朋友圈发布动态、评论动态、回复评论、删除动态或评论的功能(中)
2017/06/11 PHP
关于Yii2框架跑脚本时内存泄漏问题的分析与解决
2019/12/01 PHP
innerHTML,outerHTML,innerTEXT三者之间的区别
2007/01/28 Javascript
JavaScript中Object和Function的关系小结
2009/09/26 Javascript
jQuery中prop()方法用法实例
2015/01/05 Javascript
学习使用AngularJS文件上传控件
2016/02/16 Javascript
关于javascript中限定时间内防止按钮重复点击的思路详解
2016/08/16 Javascript
SelecT下拉框选中和取值的解决方法
2016/11/22 Javascript
基于BootstrapValidator的Form表单验证(24)
2016/12/12 Javascript
详解Angular的双向数据绑定(MV-VM)
2016/12/26 Javascript
cocos2dx+lua实现橡皮擦功能
2018/12/20 Javascript
一些手写JavaScript常用的函数汇总
2019/04/16 Javascript
微信小程序云开发(数据库)详解
2019/05/17 Javascript
如何解决vue在ios微信&quot;复制链接&quot;功能问题
2020/03/26 Javascript
带你使用webpack快速构建web项目的方法
2020/11/12 Javascript
vue3自定义dialog、modal组件的方法
2021/01/04 Vue.js
[03:59]5分钟带你了解什么是DOTA2(第二期)
2017/02/07 DOTA
[02:00]DAC2018主宣传片——龙征四海,剑问东方
2018/03/20 DOTA
Python爬取三国演义的实现方法
2016/09/12 Python
浅析Python中yield关键词的作用与用法
2016/11/29 Python
在PyCharm环境中使用Jupyter Notebook的两种方法总结
2018/05/24 Python
tensorflow 恢复指定层与不同层指定不同学习率的方法
2018/07/26 Python
Pandas读写CSV文件的方法示例
2019/03/27 Python
python二元表达式用法
2019/12/04 Python
Python单链表原理与实现方法详解
2020/02/22 Python
Python 将 QQ 好友头像生成祝福语的实现代码
2020/05/03 Python
浅谈python出错时traceback的解读
2020/07/15 Python
利用CSS3实现进度条的两种姿势详解
2017/03/21 HTML / CSS
Blue Nile台湾:钻石珠宝商,订婚首饰、结婚戒指和精品首饰
2017/11/24 全球购物
文字自荐书范文
2014/02/10 职场文书
社区健康教育实施方案
2014/03/18 职场文书
2014年乡镇妇联工作总结
2014/12/02 职场文书
python元组打包和解包过程详解
2021/08/02 Python