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

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?

"—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.

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

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.

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.

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.