title: How can I split my javascript code into separate files?
body: <p>I'm reading the Javascript <a href="https://developer.mozilla.org/en-US/docs/JavaScript/Guide/Details_of_the_Object_Model" rel="noreferrer">Guide</a> from Mozilla
  And when they contrasted JS to Java , It got me thinking, Java code is easily split up with each class in his own file. after futher search , I understand that the same can be accomplished in JS with namespacing and module pattern - I messed around with it but got very confused ( especially with calling a constructor declared in File1.js into File2.js )</p>
  
  <p>so here is the hierarchy:
  <img src="https://i.stack.imgur.com/wWZ37.png" alt=" class organization "></p>
  
  <p>But i just can't figure out how to properly make it works</p>
  
  <p>how do i simply go from </p>
  
  <pre><code>//employe.js
  function Employee () {
    this.name = "";
    this.dept = "general";
  }
  
  function Manager () {
    this.reports = [];
  }
  Manager.prototype = new Employee;
  
  function WorkerBee () {
    this.projects = [];
  }
  WorkerBee.prototype = new Employee;
  
  function SalesPerson () {
    this.dept = "sales";
    this.quota = 100;
  }
  SalesPerson.prototype = new WorkerBee;
  </code></pre>
  
  <p>to this :</p>
  
  <pre><code> // employe.js
  function Employee () {
    this.name = "";
    this.dept = "general";
  }
  
   // Manager.js   
  function Manager () {
    this.reports = [];
  }
  Manager.prototype = new Employee;
  
   // WorkerBee.js     
  function WorkerBee () {
    this.projects = [];
  }
  WorkerBee.prototype = new Employee;
  
   // SalesPerson.js      
  function SalesPerson () {
   this.dept = "sales";
   this.quota = 100; 
   }
  SalesPerson.prototype = new WorkerBee;
  </code></pre>