A Web frontend javascript application, in production, will have little to nothing "exposed", that is, declared as a global var or attached to window.
- all code minimized and appended to one (or a few) js file(s);
- little to nothing "exposed", that is, declared as a global var or attached to
window.
During development, though, life is easier if the code is readable, split in several files, and also if prototypes and relevant instances are accessible from console.
To be more clear (leaving aside minimization, which is easy obtained with a number of different tools), in production I'll have something like:
(function() {
var Greeter = function() {
};
Greeter.prototype.msg = function() {
return 'Hello, world!';
};
Greeter.prototype.greet = function() {
console.log(this.msg());
};
new Greeter().greet();
}());
This way, my code will do its stuff without exposing anything: neither the Greeter object nor its instances are accessible to other code.
(Of course this is just one of many ways to accomplish this, but that's not the point of the question).
Debugging this code, though, is hard, and unit testing is impossible.
In order to allow both debugging and testing, I would usually attach both Greeter and its instance to the window object, or to some other object.
So, during development, I'll use something like:
(function() {
var Greeter = function() {
};
Greeter.prototype.msg = function() {
return 'Hello, world!';
};
Greeter.prototype.greet = function() {
console.log(this.msg());
};
window.Greeter = Greeter;
window.greeter = new Greeter();
window.greeter.greet();
}());
This way I'll be able to unit test Greeter, and also to interrogate it from the browser's console to check its status.
Is there a tool, or a set of tools, or some different way to organize my code, so that it's possible to pass from the development version to the production one (which will also be minimized)?
