title: how to structure javascript files?
body: <p>I have</p>
  
  <ul>
  <li><code>base.html</code></li>
  <li><code>pageA.html</code></li>
  <li><code>pageB.html</code></li>
  <li><code>pageA.js</code></li>
  <li><p><code>pageB.js</code></p>
  
  <ol>
  <li><code>pageA.js</code> has code for <code>pageA.html</code>, <code>pageB.js</code> has code for <code>pageB.html</code>.</li>
  <li>both <code>pageA.js</code> and <code>pageB.js</code> uses <code>jQuery</code>.</li>
  </ol></li>
  </ul>
  
  <p>currently I am including all of the scripts in base.html, like so:</p>
  
  <pre><code>&lt;html&gt;
    &lt;body&gt;
      &lt;div id="contents"&gt;
        &lt;!-- pageA.html / pageB.html comes here --&gt;
      &lt;/div&gt;
      &lt;script src="js/jquery.js"&gt;&lt;/script&gt;
      &lt;script src="js/pageA.js"&gt;&lt;/script&gt;
      &lt;script src="js/pageB.js"&gt;&lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I'd like to load <code>pageA.js</code> only for <code>pageA.html</code> and <code>pageB.js</code> for <code>pageB.html</code>, as the code in each file is not needed in the other page.</p>
  
  <p>I've looked into <a href="http://requirejs.org" rel="nofollow">requires.js</a> library, but I'm not sure yet if it is the right solution for my problem. What are the best practices for structuring javascript files in this type of situation?</p>