前言

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

背景

  在这篇文章中,我会给大家介绍在编写、调试和审查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(&lsquo;<script src=&rdquo;script/localsourceforjquery&rdquo;></script>&rsquo;)

  当然,你也可以用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代码。我想这一点就不需要举例说明了吧。

转载自WEB开发者http://www.admin10000.com/document/6963.html#rd?sukey=7f8f3cb2e9b0da456a3388a0aefffe1a63f64bb0a32e873e33e72bfa4acd2ee980dd36e44c89357f79d68e87c37f8c1f

7 个 jQuery 最佳实践的更多相关文章

  1. 【转】jQuery最佳实践

    上周,我整理了<jQuery设计思想>. 那篇文章是一篇入门教程,从设计思想的角度,讲解"怎么使用jQuery".今天的文章则是更进一步,讲解"如何用好jQu ...

  2. JQuery系列(7) - JQuery最佳实践

    上篇文章是一篇入门教程,从设计思想的角度,讲解"怎么使用jQuery".今天的文章则是更进一步,讲解"如何用好jQuery". 我主要参考了Addy Osman ...

  3. jQuery最佳实践(转载)

    本文转载于阮一峰的博文. 上周,我整理了<jQuery设计思想>. 那篇文章是一篇入门教程,从设计思想的角度,讲解“怎么使用jQuery”.今天的文章则是更进一步,讲解“如何用好jQuer ...

  4. jQuery最佳实践:如何用好jQuery

    一.用对选择器 在jQuery中,你可以用多种选择器,选择同一个网页元素.每种选择器的性能是不一样的,你应该了解它们的性能差异. (1)最快的选择器:id选择器和元素标签选择器 举例来说,下面的语句性 ...

  5. jQuery最佳实践(不断更新中...)

    1. 处理cdn失效 <script type="text/javascript" src="http://xxx.com/jquery.min.js " ...

  6. JQuery最佳实践及常见错误(转自 简书)

    1 使用JQuery的ready处理器 如果你的代码操作DOM,则需要DOM加载完成后再运行代码.推荐使用如下的第一种写法,第二种写法在JQuery3.x中已经不推荐使用了. $(function ( ...

  7. jQuery最佳实践

    1:事件的委托处理(Event Delegation) javascript的事件模型,采用"冒泡"模式,也就是说,子元素的事件会逐级向上"冒泡",成为父元素的 ...

  8. JQuery高性能最佳实践

    [使用最佳选择器] 使用JQuery时,你可以使用多种选择器,选择同一个元素,各种方法之间的性能是不一样的,有时候差异会特别大. 通常比较常用的选择器有以下几个: ID选择器 $("#id& ...

  9. jQuery插件的编写相关技术 设计总结和最佳实践

    原文:http://www.itzhai.com/jquery-plug-in-the-preparation-of-related-technical-design-summary-and-best ...

随机推荐

  1. hadoop(二)

    三 Hive和Hbase #安装配置Hbase环境#主要参考https://my.oschina.net/zc741520/blog/388718网站配置的是集群,这里是伪分布,将网站中涉及多个主机的 ...

  2. Linux中一些简单命令(一)

    1.查看当前用户:who 2.显示当前目录:pwd 3.查看当前服务器的时间:date 4.查看日历:cal+year; 例如:cal 2016 5.计算器:bc  退出计算器:quit或者ctrl+ ...

  3. MySQL之索引优化

    很多数据库系统性能不理想是因为系统没有经过整体优化,存在大量性能低下的SQL 语句.这类SQL语句性能不好的首要原因是缺乏高效的索引.没有索引除了导致语句本身运行速度慢外,更是导致大量的磁盘读写操作, ...

  4. db2 表空间容器调整

    1.查看当前容器的分布,并确定如何调整 db2look -d sample -l -cor -dp -o dd.sql 2.给表空间添加容器 db2 "alter tablespace tb ...

  5. GraphLab介绍[转]

    GraphLab介绍 原文链接:http://blog.jasonding.top/2015/06/08/Machine%20Learning/%E5%BC%80%E6%BA%90%E5%9B%BE% ...

  6. laravel5 MAC is invalid

    如果本机的环境更换过,项目中用来加密Crypt组件中的参数会变更. 如果出现这个问题,得更换数据库中加密后的变量 stackoverflow上找到的解决方法都是 composer dump-autol ...

  7. Python笔记4-20151029

    一.切片 L = [''Michael','Sarah','Tracy','Bob','Jack'] 取前N个元素,也就是索引为0-(N-1)的元素,可以用循环: >>> r = [ ...

  8. Quartz(任务调度)- Cron

    参照:http://www.cnblogs.com/linjiqin/archive/2013/07/08/3178452.html 工具:在线生成Cron 语法规则: Seconds Minutes ...

  9. css实现遮罩层,父div透明,子div不透明

    使用元素的opacity 属性,设置遮罩层的效果, 主要 样式是:background-color: #ooo; opacity:0.3; <div style="width:500p ...

  10. 图片的 base64 编码

    图片的 base64 编码就是将一幅图片编码成一串字符串,使用该字符串代替图像地址.我们所看到的网页上的图片,都是需要消耗一个 http 请求下载而来的:(所有才有了 csssprites 技术< ...