7 jQuery Best Practices_jquery

With the growth in the number of rich web applications and users' high expectations for fast interactive responses, developers have begun to use JavaScript libraries to complete some repetitive tasks quickly and efficiently. One of the most popular JavaScript libraries is jQuery. But the large number of applications of jQuery has brought another question: What are the best practices and what are the bad practices when using JavaScript libraries?

Background

In this article, I will introduce you to some good practices (at least in my opinion) when writing, debugging and reviewing JavaScript code. In fact, I selected 7 of the most common scenarios.

1. Use CDN and its fallback address (fallback)

CDN stands for Content Delivery Network and is a server that caches JavaScript files. After using a CDN, your application can use the CDN cache instead of reloading the library files from your server every time a new user initiates a request. Google, Microsoft and JQuery all provide CDN services.

Given that the network is not always 100% reliable and the server may go down for some reason, you must ensure that your application can still run normally even if these things happen. At this time we need to use the fallback address: when the application cannot find the cache library, it will fall back and use the server file.

Google CDN is like this:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script>

Microsoft CDN is like this:

<script src="//ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.min.js"> </script>

It should be noted that we did not specify the URL protocol as http but used //. This is because the CDN server supports http and https. If your website has SSL certification, you can load files normally without modification.

Also, like I mentioned before, we also need a fallback address in case there is a problem with the CDN server.

<script>Window.JQuery || document.write(&lsquo;<script src=&rdquo;script/localsourceforjquery&rdquo;></script>&rsquo;)

Of course, you can also use Require to configure the jQuery you need, but I think this is good.

2. Limit DOM interaction

Manipulating the DOM tree with JavaScript has a performance cost. The same goes for jQuery. So, try to minimize interaction with the DOM. When I was helping a colleague of mine improve the speed of displaying data, I saw him using a selector inside a loop. This is a performance killer! This is what he wrote:

containerDiv = $("#contentDiv");
for(var d =0; d < TotalActions; d++)
{
 containerDiv.append("<div><span class='brilliantRunner'>" + d + "</span></div>");
}

What’s the problem? At first glance, there’s nothing wrong with it. And my colleagues also said that this code is very fun to run! I'm really pissed off! When TotalActions is less than 50, no problem is noticed; but when it reaches 25,000, the speed slows down a lot. The reason (I also found it through Google) is that DOM interaction is placed in the loop.

For this feature, (after many failed attempts) I replaced the direct DOM interaction in the loop with a push operation on an array, and then joined the arrays with an empty string as the delimiter. In the end, the program certainly became smoother and more efficient.

var myContent=[];
for(var d = 0; d < TotalActions; d++)
{
 myContent.push("<div><span class='brilliantRunner'>" + d + "</span></div>");
}
containerDiv.html(myContent.join(""));

3. Cache

The most important and distinctive thing about jQuery is its selector and the way to find HTML elements in the DOM tree. However, I have seen many times that some developers call the same selector multiple times in the same function, such as $("#divid"). Although jQuery selects elements very quickly, don't look for the same element every time. So, you can cache your elements like this:

var $divId = $("#divId")

Then in the following code, you can use $divId.

For the code below:

var thefunction = function()
{
 $("#mydiv").ToggleClass("zclass");
 $("#mydiv").fadeOut(800);
}

var thefunction2 = function()
{
 $("#mydiv").addAttr("name");
 $("#mydiv").fadeIn(400);
}

We can modify it like this and use chain syntax to make it look more beautiful:

var mydiv =$("#mydiv");
var thefunction = function()
{
 mydiv.ToggleClass("zclass").fadeOut(800);
}

var thefunction2 = function()
{
 mydiv.addAttr("name").fadeIn(400);
}

But then again, you don’t have to cache everything every time. Look at the example below:

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