7个jQuery最佳实践

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应用程序，真正的帮助到大家。

最后

以上就是专注酸奶为你收集整理的7个jQuery最佳实践的全部内容，希望文章能够帮你解决7个jQuery最佳实践所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。