Is this a smart way to organize code in jQuery?
<p>for the longest time I was writing all my code inside like this ... </p>

<pre><code>$(document).ready(function(){
    $('.show_module').click(function(){

    });
     ...

});
</code></pre>

<p>putting all sorts of click handlers in there. But recently I was introduced to a new way of doing things and I wanted to get a feel for if its a smart way of going about it.</p>

<p>the idea is to have all the handlers in related functions and then have minimal code in document.ready above. </p>

<p>So for example ...</p>

<pre><code>$(document).ready(function(){
    page_handler(); // other functions follow
});

function page_handler(){
    $('.show_module').click(function(){

    });
     ...
}
</code></pre>

<p>This seems to allow organization of related handlers in functions  and use document.ready as more of an initializer.</p>

<p>I know in JavaScript functions and variables are 'hoisted' before code starts executing so </p>

<pre><code>do_something();
function do_something(){

}
</code></pre>

<p>works for this reason, since the function is ready to use before do_something() is actually called, even though it appears before the actual function definition.</p>

<p>I was wondering if the same thing happens here and how 'good' this idea/way of doing things is.</p>
