What's the best way to add jQuery enhancements to a website?
<p>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?</p>

<p>Up until now, I've done something similar to the following:</p>

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

<p>However, I've since seen JavaScript file layouts like this:</p>

<pre><code>$(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
    });
};
</code></pre>

<p>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?</p>
