What's the best way to add jQuery enhancements to a website?

Question

For a while now, I'm been using jQuery to offer enhancements via JavaScript on my websites. However, I'm now beginning to ponder—from a performance point of view—what is the best way to organise my file of functions?

Up until now, I've done something similar to the following:

$(document).ready(function() {
    foo();
    bar();
});
function foo() {
    // do something here
};
function bar() {
    // do something else here, and so on...
};

However, I've since seen JavaScript file layouts like this:

$(document).ready(function() {
    $(selector).foo();
    $(selector).bar();
});
$.fn.foo = function() {
    $(this).each(function() {
        // do something here and return
    });
};
$.fn.bar = function() {
    $(this).each(function() {
        // do something here and return
    });
};

Is it better practice to extend jQuery and assign methods to a selector as in the second example? Or is it still OK to define individual functions as the first example?

score 2 · Answer 1 · answered Jul 24 '10 at 13:12

"—from a performance point of view—" it makes no difference whether you add a function(plugin) into the jQuery.fn object or you just create that function globally directly under the window object.

From a methodical / logical way it does like a lot, but that's another story I guess.

score 1 · Answer 2 · answered Jul 24 '10 at 13:14

1

I don't know the exact answer to this but I don't see logic in adding to the jquery method each time. A good way to test that code would be to use the Net panel in firebug. Run the two bits of code and see which one performs better.

answered Jul 24 '10 at 13:14

Mike Rifgin

10,409
21
75
111

Thanks. It's for a fairly large social networking website I'm looking to improve the performance of (it belongs to the company and I'm the appointed developer, so don't hassle me for trying to create the next Facebook `;-)`) – Martin Bean Jul 24 '10 at 13:19
Ah i've been interested in that lately. Found some useful posts here and a question I asked yesterday also turned up some good info: http://stackoverflow.com/questions/46214/good-ways-to-improve-jquery-selector-performance http://stackoverflow.com/questions/3316113/why-do-i-have-to-use-this-closed and this is also good info: http://www.artzstudio.com/2009/04/jquery-performance-rules/ – Mike Rifgin Jul 24 '10 at 13:24

score 1 · Answer 3 · answered Jul 24 '10 at 13:20

If your functions operate on sets of elements, and you want them to be portable, go the plugin route (and make sure they're in an external file the user isn't downloading every page load). If they don't do things to set of elements (e.g. any jQuery chain), it doesn't make any sense to make them plugins IMO.

I would suggest if your functions aren't needed outside the document.ready scope, then place them in there to cleanup the global namespace a bit, like this:

$(document).ready(function() {
  foo();
  bar();
  function foo() {
    // do something here
  }
  function bar() {
    // do something else here, and so on...
  }
});

As a bit broader of an answer, there are lots of things that affect the speed of a page, Google has a pretty good resource with a rundown of each.

score 1 · Accepted Answer · answered Jul 24 '10 at 13:29

It very much depends (the catch-all answer!). If a piece of functionality makes sense as a plugin i.e. can be reused in different ways on your site, then make it a plugin. Similarly, if a function is useful all over the place e.g. a date parsing function, make it a utility function.

There are a couple of points that I think are really worth bearing in mind - scope and pollution

scope
If a function needs to be in a scope that makes it accessible to functions in other scopes, then make it so. If it doesn't, don't. Which leads onto

pollution
try not to pollute the global namespace/object with numerous different functions. Organise your code into related functions by utilising object literals such that only one property is created on the global object that contains objects with properties containing related functions. For example,

var date = {
    parse : function(s) {
        // some date parsing function
    },
    format : function(date, patten) {
        // some date formatting function
    }
}

In summary,

attach to the jQuery object when it make sense to (reusable plugin, common utility function)
declare functions in the narrowest scope that provides the accessibility to them that is required (use closures where necessary).
use object literals to group related functions and prevent pollution

score 0 · Answer 5 · answered Jul 24 '10 at 13:34

Performance isn't just a measure of how fast the computer can interpret and run a piece of code. It's a matter of cleanliness. Think also about how efficient a programmer can be maintaining and extending the code. A slew of functions in the global namespace can quickly become a nightmare to maintain.

Let's use an analogy.

The first approach is equivalent to that of a teenager's clothing system: strewn all over the floor in a jumbled mess. If you were to try and find a particular item of clothing in their room, where would you start?

What they should really be doing is putting those clothes in drawers, each drawer containing similar things -- socks in the top drawer, pants in the bottom, etc.

It follows that your best bet is to try and encapsulate as many "like" functions as possible inside a container of some sorts, such as a jQuery plugin. Not only will you find it easier to find and re-use the functions, when it comes time to alter the way some of your functionality behaves, you'll find it much easier to chop and change your code too.

What's the best way to add jQuery enhancements to a website?

5 Answers5