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脚本语言在网页中的简单应用
May 13 Javascript
jQuery 常见学习网站与参考书
Nov 09 Javascript
js修改input的type属性问题探讨
Oct 12 Javascript
jquery批量设置属性readonly和disabled的方法
Jan 24 Javascript
加载列表时jquery获取ul中第一个li的属性
Nov 02 Javascript
JS仿Windows开机启动Loading进度条的方法
Feb 26 Javascript
微信小程序 支付简单实例及注意事项
Jan 06 Javascript
JavaScript基于面向对象实现的猜拳游戏
Jan 03 Javascript
vue input输入框模糊查询的示例代码
May 22 Javascript
使用Vue.set()方法实现响应式修改数组数据步骤
Nov 09 Javascript
解决vue路由name同名,路由重复的问题
Aug 05 Javascript
微信小程序组件生命周期的踩坑记录
Mar 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
神族 PROTOSS 概述
2020/03/14 星际争霸
PHP 翻页 实例代码
2009/08/07 PHP
让Nginx支持ThinkPHP的URL重写和PATHINFO的方法分享
2011/08/08 PHP
PHP处理数组和XML之间的互相转换
2016/06/02 PHP
Thinkphp实现短信验证注册功能
2016/10/18 PHP
FCK调用方法..
2006/12/21 Javascript
JavaScript中通过闭包解决只能取得包含函数中任何变量最后一个值的问题
2010/08/12 Javascript
超轻量级的基于jquery的三级展开列表
2011/04/26 Javascript
扩展IE中一些不兼容的方法如contains、startWith等等
2014/01/09 Javascript
javascript获取当前的时间戳的方法汇总
2015/07/26 Javascript
JavaScript实现cookie的写入、读取、删除功能
2015/11/05 Javascript
JavaScript地理位置信息API
2016/06/11 Javascript
jQuery代码性能优化的10种方法
2016/06/21 Javascript
vue.js 表格分页ajax 异步加载数据
2016/10/18 Javascript
使用BootStrap建立响应式网页——通栏轮播图(carousel)
2016/12/21 Javascript
js实现自动轮换选项卡
2017/01/13 Javascript
JavaScript数据结构之二叉树的查找算法示例
2017/04/13 Javascript
基于Vue2x的图片预览插件的示例代码
2018/05/14 Javascript
详解Nuxt.js部署及踩过的坑
2018/08/07 Javascript
vue 源码解析之虚拟Dom-render
2019/08/26 Javascript
对Layer UI 模块化的用法详解
2019/09/26 Javascript
webpack 处理CSS资源的实现
2019/09/27 Javascript
[54:51]Ti4 冒泡赛第二轮LGD vs C9 3
2014/07/14 DOTA
[57:18]DOTA2上海特级锦标赛主赛事日 - 1 败者组第一轮#3VP VS VG
2016/03/03 DOTA
Python生成随机数的方法
2014/01/14 Python
浅析python中的分片与截断序列
2016/08/09 Python
pandas使用函数批量处理数据(map、apply、applymap)
2020/11/27 Python
浅谈Html5移动端ios/Android兼容性总结
2018/06/01 HTML / CSS
配件采购员岗位职责
2013/12/03 职场文书
小学领导班子对照材料
2014/08/23 职场文书
预备党员2014年第四季度思想汇报范文
2014/10/25 职场文书
违纪开除通知书
2015/04/25 职场文书
表扬信范文
2015/05/04 职场文书
python中Tkinter 窗口之输入框和文本框的实现
2021/04/12 Python
mysql中关键词exists的用法实例详解
2022/06/10 MySQL
Go语言编译原理之变量捕获
2022/08/05 Golang