title: javascript BEST PRACTICE - managing scripts / code reuse
body: <p>From reading many articles, such as <a href="https://stackoverflow.com/questions/950087/include-javascript-file-inside-javascript-file">How do I include a JavaScript file in another JavaScript file?</a> - it is apparently <strong>not possible</strong> to include one script into another.</p>
  
  <p>So here's my question - I'm concerned about JS bloat. or having too much unused code loading with pages that don't use/need it. However, occasionally, I'll need the same functions on multiple pages, but not all pages.</p>
  
  <p>If we look at making logical sections of an online application into objects, such as 'customers' or 'items' - we may have a bunch of code that is specific to each of these 'objects'.</p>
  
  <p>As an example, I could have a 'profile' group of code that allows me to manage my profile, it may have multiple div-pop-ups that make use of Ajax, and for the sake of the example, lets say I've got a couple functions that control my "shipping address", they control the div-pop-up, they handle the Ajax specific to that information. - lets say I have 4 functions for that purpose. But that is only part of a much larger 'profile.js' file that handles ALL of my 'profile' crud...</p>
  
  <p>Now I've got another section of the application - such as a shopping cart - where I need to allow the user access to the "shipping address" div-pop-up and all the Ajax functionality. </p>
  
  <p>I think I'd like to re-use just those functions from the profile.js - because It seems like 'bad form' to 're-write' code that does the same thing - because then I'd have long term code maintenance issues - if I made a change - I have to remember everywhere I used that code.</p>
  
  <p>So <strong>if I'm left to deduce</strong> a 'best practice' - given the limitations of how these technologies work - I can't 'nest' and re-use js like I do server side includes OR CSS.</p>
  
  <p>My code is going to have to be broken into separate files, and (theoretically) lots of smaller .js files will be used</p>
  
  <p>So my <code>&lt;head&gt;</code> will look like this</p>
  
  <pre><code>&lt;head&gt;
  &lt;script src='smallfile_1.js'...&gt;
  &lt;script src='smallfile_2.js'...&gt;
  ...
  &lt;script src='smallfile_10.js'...&gt;
  &lt;head&gt;
  </code></pre>
  
  <p>and "IF" I need a section in another page</p>
  
  <pre><code>&lt;head&gt;
  &lt;script src='that_other_object_/smallfile_3.js'...&gt;
  &lt;/head&gt;
  </code></pre>
  
  <p>...doesn't the repeated TTP calls to these smaller files become overhead? In a heavy traffic application - it seems like the network and server overhead might start to become a concern, or am just making a mountain out of a mole hill?</p>
  
  <p>Does 100k requests for 10 5k files, REALLY equal - 100k requests for 1 50k file?</p>
  
  <p>Now that I write it out - and think about it - <strong>every</strong> image on a page IS a separate call to the server too - so maybe I'm making an issue out of something that isn't an issue. </p>
  
  <p>Can I get some feedback as to what other people are doing about JS code reuse across modules - without making a "huge" file shared across modules.</p>