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;
You can keep the JavaScript code in a separate external file and then point to that file from your HTML document.
To avoid multiple server requests, group your JavaScript files into one. Whatever you use for performance, try to minify JavaScript to improve the load time of the web page. If you are using single page application, then group all the scripts in a single file.
JavaScript in <head> or <body> You can place any number of scripts in an HTML document. Scripts can be placed in the <body> , or in the <head> section of an HTML page, or in both.
You can write your JS in separate files, but when it comes to deploying, it's more efficient to minify them all into a single file. For each script you load in your browser, you make a round-trip to the server, so it makes sense to minimize those.
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/
You don't need to do anything differently. Just include the script files and they work as if it was a single file.
Javascript doesn't have file scope. Once the code is parsed it doesn't matter where the code came from.
For small and medium projects like a website or game, the native namespacing and constructors work very well. They are a poor choice when the loading order is too complex to handle without some sort of autoloading.
index.html:
<script src="Employee.js"></script>
<script src="Manager.js"></script>
Manager.js:
var Manager = function() {
var employee1 = new window.Employee(this);
var employee2 = new window.Employee(this);
};
Employee.js:
var Employee = function(boss) {
// work stuff here
this.wage = 5;
};
Note, properties inside the employee constructor function are visible to the manager. The new
word signals a constructor. This is also possible without a constructor by returning an object with properties instead of a function as shown above.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With