title: splitting a large javascript file into several smaller files
body: <p>I'm using jQuery and jQuery UI to operate on DOM elements, and find myself in this situation.</p>
  
  <p><strong>index.html</strong>:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;link href="dashboard.css" rel="stylesheet"&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;script src="dashboard.js"&gt;&lt;/script&gt;
  &lt;body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>dashboard.js</strong>:</p>
  
  <pre><code>function addAccordian() {
    // some logic here
  }
  
  function addConnectedSortable() {
    // more logic here
  }
  
  function addPiecharts() {
    // a huge chunk of logic here
  
    // for example, 
  
    // several ...
    // hundred ...
    // line ...
    // of code
  
  }
  
  function readyFn(jQuery) {
    addAccordian();
    addConnectedSortable();
    addPiecharts();
  }
  
  $(document).ready(readyFn);
  </code></pre>
  
  <p>I can only picture the <code>dashboard.js</code> file grow bigger and bigger with time.</p>
  
  <p><strong>Question</strong>: Is there a way to split it into several smaller javascript files, and somehow <code>include</code>/<code>import</code> them? </p>
  
  <p>I am coming from a Java background, so forgive me if the question does not make much sense.</p>
  
  <p>I'm open to any suggestions, since this project is still early and we are flexible with technologies we use.</p>