Newbie-friendly advice: Don't dive too deep into jQuery

As an editor for Nettuts, I get to review a lot of code from submitted tutorials. Even though jQuery has been around for many years, there's one common mistake I still see most often.

---

Example#1

Consider the following code:

$('.nav a').click(function() {
  $(this).hide();
  $(this).css('color', 'red');
  $(this).show();

  alert('something else');

  $(this).hide();

  return false;
});

The code above is too complex for a number of reasons. Don't worry about what the code actually does (it's gibberish). Instead, I want you to look at all references to $(this).

Think of the DOM as a pool.

Think of the DOM as a pool. Remember when you were a kid and you would jump into the pool looking for coins while your parents acted like they were watching? This will be our comparison in the real world.

Every time you use $('.someClass'), jQuery will jump into the pool (DOM) and search for that coin (or node). So when you reference it multiple times in a function, you're going to need a lot of diving. Or, from a real-world comparison, wasteful and unnecessary. Why call jQuery if it's not needed? You should do what we call "caching".

$('.nav a').click(function(e) {
   var anchor = $(this);

   anchor
      .hide()
     .css('color', 'red')
     .show();

   alert('something else');

   anchor.hide();

   e.preventDefault();

});

This is much cleaner. While modern browser engines are now incredibly fast and will do their best to compensate for your poor coding, you should still strive to write efficient code and avoid wasting all your energy jumping around in the pool. Now, technically speaking, if you pass jQuery a DOM node, like this, it won't requery the DOM. It just returns a jQuery object.

Honestly, since the performance difference between the two is negligible, we write ourselves clean code.

Example 2

Let's consider a slightly more complex example: tabs.

$('.tabs li').css('position', 'relative');

$('.tabs li').click(function() {
   $('.tabs li').removeClass('active');
   $(this).addClass('active');
   $(this).load('someHref', function() {} ); // example
   $(this).css('top', '1px');
});

This code is everywhere. It's ugly and inefficient. The first solution is to get rid of all CSS. Styles can only be placed in JavaScript if the value is created dynamically. For example, if you need to calculate the exact position of an element on the screen, you can use .css('left',calculatedValue). In this case, you can export it all to an external style sheet. This leaves us with:

$('.tabs li').click(function() {
   $('.tabs li').removeClass('active');
   $(this).load('someHref', function() {} ); // example
   $(this).addClass('active');
});

Next, why do we continue to query .tabs li and $(this) in the DOM? Stop jumping in the pool. Let's "cache" the location of .tabs li.

var tabs = $('.tabs li');

tabs.click(function() {
   tabs.removeClass('active');
   $(this).load('someHref', function() {} ); // example
   $(this).addClass('active');
});

is better, but we still call $(this) twice, no big deal. However, in my experience, if this is not nipped in the bud early, this number can quickly increase.

var tabs = $('.tabs li');

tabs.click(function() {
   var tab = $(this);
   tabs.removeClass('active');
   tab.addClass('active')
     .load('someHref', function() {} ); // example
});

filter

Another (less optimized) option is to use filtering.

var tabs = $('.tabs li');

tabs.click(function() {
   tabs.removeClass('active')
       .filter(this)
       .addClass('active')
       .load('someHref', function() {} ); // example
});

The difference in this example is that instead of referencing $(this), we use the filter() method to reduce the collection of list items to only the clicked items .

---

What should you take

Yes, the world does not end if you reference $('.tabs) multiple times in a function. JavaScript engines are very fast these days. If you were to test the performance of doing this thousands of times, the difference in execution could be a few hundred milliseconds. But the question remains: why would you do this?

Sometimes, when we work with a lot of abstractions like jQuery, it's easy to forget that $('.tabs') is an actual function that runs a lot of code. It should also be noted that these concepts apply to JavaScript in general, not just jQuery.

Write yourself cleaner code using the caching techniques above.

The above is the detailed content of Newbie-friendly advice: Don't dive too deep into jQuery. For more information, please follow other related articles on the PHP Chinese website!