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 相关文章推荐
使用原生javascript创建通用表单验证——更锋利的使用dom对象
Sep 13 Javascript
学习从实践开始之jQuery插件开发 菜单插件开发
May 03 Javascript
Extjs中通过Tree加载右侧TabPanel具体实现
May 05 Javascript
AngularJS 表达式详细讲解及实例代码
Jul 26 Javascript
微信小程序 页面跳转传递值几种方法详解
Jan 12 Javascript
Vue代码分割懒加载的实现方法
Nov 23 Javascript
vue.js使用v-model指令实现的数据双向绑定功能示例
May 22 Javascript
微信小程序自定义select下拉选项框组件的实现代码
Aug 28 Javascript
微信公众平台 发送模板消息(Java接口开发)
Apr 17 Javascript
浅谈js中的attributes和Attribute的用法与区别
Jul 16 Javascript
vue+elementUI(el-upload)图片压缩,默认同比例压缩操作
Aug 10 Javascript
vue解决跨域问题(推荐)
Nov 10 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中使用PDF文档功能
2006/10/09 PHP
ThinkPHP模板引擎之导入资源文件方法详解
2014/06/18 PHP
js代码实现微博导航栏
2015/07/30 PHP
JavaScript窗口功能指南之在窗口中书写内容
2006/07/21 Javascript
改版了网上的一个js操作userdata
2007/04/27 Javascript
JavaScript 脚本将当地时间转换成其它时区
2009/03/19 Javascript
jquery焦点图片切换(数字标注/手动/自动播放/横向滚动)
2013/01/24 Javascript
Raphael带文本标签可拖动的图形实现代码
2013/02/20 Javascript
jquery右下角弹出提示框示例代码
2013/10/08 Javascript
js实现简单的星级选择器提交效果适用于评论等
2013/10/18 Javascript
JQuery自适应窗口大小导航菜单附源码下载
2015/09/01 Javascript
10个很棒的jQuery代码片段
2015/09/24 Javascript
JS中生成随机数的用法及相关函数
2016/01/09 Javascript
jquery插件Jplayer使用方法简析
2016/04/22 Javascript
ashx文件获取$.ajax()方法发送的数据
2016/05/26 Javascript
js简单实现图片延迟加载的方法
2016/07/19 Javascript
浅谈js在html中的加载执行顺序,多个jquery ready执行顺序
2016/11/26 Javascript
详解JavaScript模块化开发
2016/12/04 Javascript
js 事件的传播机制(实例讲解)
2017/07/20 Javascript
js正则相关知识点专题
2018/05/10 Javascript
了解javascript中let和var及const关键字的区别
2019/05/24 Javascript
openlayers4实现点动态扩散
2020/08/17 Javascript
Vue+Bootstrap实现简易学生管理系统
2021/02/09 Vue.js
Python break语句详解
2014/03/11 Python
python中list常用操作实例详解
2015/06/03 Python
Python cookbook(字符串与文本)针对任意多的分隔符拆分字符串操作示例
2018/04/19 Python
Numpy中的mask的使用
2018/07/21 Python
初学者学习Python好还是Java好
2020/05/26 Python
python3列表删除大量重复元素remove()方法的问题详解
2021/01/04 Python
美国派对用品及装饰品网上商店:Shindigz
2016/07/30 全球购物
狗狗玩具、零食和咀嚼物的月度送货服务:Super Chewer
2018/08/22 全球购物
幼儿园优秀班主任事迹材料
2014/05/14 职场文书
幼师求职自荐信
2014/05/31 职场文书
优秀党员主要事迹材料
2015/11/04 职场文书
读《庄子》有感:美而不自知
2019/11/06 职场文书
Python 如何将integer转化为罗马数(3999以内)
2021/06/05 Python