How can I split my javascript code into separate files?
class, dependencies, hierarchy, javascript
Solution
You should have one global namespacing object which every module has to access and write to. Modify your files like so:
// employe.js
window.myNameSpace = window.myNameSpace || { };
myNameSpace.Employee = function() {
this.name = "";
this.dept = "general";
};
and Manager.js could look like
// Manager.js
window.myNameSpace = window.myNameSpace || { };
myNameSpace.Manager = function() {
this.reports = [];
}
myNameSpace.Manager.prototype = new myNameSpace.Employee;
This is of course a very simplified example. Because the order of loading files and dependencies is not child-play. There are some good librarys and patterns available, I recommend you looking at requireJS and AMD or CommonJS module patterns. http://requirejs.org/
Problem
I'm reading the Javascript Guide 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 ) so here is the hierarchy: But i just can't figure out how to properly make it works how do i simply go from ``` //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; ``` to this : ``` // 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; ```