Is there a better way to organise javascript in a single file with specific code for multiple pages?
<p>I have a couple of websites where I use a relatively small amount of jQuery to do various things on the pages. Generally we're talking about a couple of dozen lines of code per page. </p>

<p>I keep all of my JS in one file so far as it's not huge and fairly clearly defined. That said, what I have trended towards is organizing it like so:</p>

<pre><code>$(document).ready(function(){
  var onPage1 = $("#id_thing_on_1").length === 1;
  if( onPage1 ){
    var usefulPage1Function = function(){}; //blah
    $("a").click(function(){}); //etc
  }
});

$(document).ready(function(){
  var onPage2 = $("#id_of_page_2").length === 1;
  if( onPage2 ){
    $(".someClass").fadeIn().click(function(){}); //etc
  }
});
</code></pre>

<p>Anything that <em>is</em> used on multiple pages gets taken out into a library, but for page specific stuff, this is the pattern I've been following. Is there a better approach, or is this an acceptable practice for keeping your JS in one file and loading it on multiple pages?</p>
