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基本对象
Jan 11 Javascript
js 绑定带参数的事件以及手动触发事件
Apr 27 Javascript
jQuery动态设置form表单的enctype值(实现代码)
Jul 04 Javascript
JavaScript限定复选框的选择个数示例代码
Aug 25 Javascript
js鼠标点击图片实现随机变换图片的方法
Feb 16 Javascript
js实现的简单图片浮动效果完整实例
May 10 Javascript
jQuery的层级查找方式分析
Jun 16 Javascript
Javascript快速实现浏览器系统通知
Aug 26 Javascript
详解Vue.js组件可复用性的混合(mixin)方式和自定义指令
Sep 06 Javascript
vue 1.x 交互实现仿百度下拉列表示例
Oct 21 Javascript
JavaScript 日期时间选择器一些小结
Apr 02 Javascript
JavaScript 空间坐标的使用
Aug 19 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
Ajax+PHP 边学边练之四 表单
2009/11/27 PHP
windows7下安装php的php-ssh2扩展教程
2014/07/04 PHP
PHP实现的进度条效果详解
2016/05/03 PHP
PHP+Mysql+Ajax实现淘宝客服或阿里旺旺聊天功能(前台页面)
2017/06/16 PHP
PHP文件类型检查及fileinfo模块安装使用详解
2019/05/09 PHP
PHP实现Snowflake生成分布式唯一ID的方法示例
2020/08/30 PHP
基于jquery封装的一个js分页
2011/11/15 Javascript
JavaScript中对象介绍
2014/12/31 Javascript
JS实现自适应高度表单文本框的方法
2015/02/25 Javascript
JavaScript实现页面5秒后自动跳转的方法
2015/04/16 Javascript
javascript密码强度校验代码(两种方法)
2015/08/10 Javascript
jQuery下拉美化搜索表单效果代码分享
2015/08/25 Javascript
原生js实现百叶窗效果及原理介绍
2016/04/12 Javascript
实例讲解vue源码架构
2019/01/24 Javascript
Smartour 让网页导览变得更简单(推荐)
2019/07/19 Javascript
typescript nodejs 依赖注入实现方法代码详解
2019/07/21 NodeJs
深入理解Vue keep-alive及实践总结
2019/08/21 Javascript
Nuxt.js实现一个SSR的前端博客的示例代码
2019/09/06 Javascript
Angular进行简单单元测试的实现方法实例
2020/08/16 Javascript
Vue 数据绑定的原理分析
2020/11/16 Javascript
Python操作Word批量生成文章的方法
2015/07/28 Python
python requests 使用快速入门
2017/08/31 Python
python+matplotlib绘制旋转椭圆实例代码
2018/01/12 Python
利用python脚本如何简化jar操作命令
2019/02/24 Python
Python切片操作去除字符串首尾的空格
2019/04/22 Python
详解如何在cmd命令窗口中搭建简单的python开发环境
2019/08/29 Python
tensorflow 大于某个值为1,小于为0的实例
2020/06/30 Python
Python常用外部指令执行代码实例
2020/11/05 Python
当当网官方旗舰店:中国图书销售夺金品牌
2018/04/02 全球购物
廉洁使者实施方案
2014/03/29 职场文书
社团活动总结范文
2014/04/26 职场文书
节电标语大全
2014/06/23 职场文书
党的群众路线教育实践活动个人对照检查材料(公安)
2014/11/05 职场文书
小学三八妇女节活动总结
2015/02/06 职场文书
劳动争议仲裁代理词
2015/05/25 职场文书
python基础之文件操作
2021/10/24 Python