I was reading javascript Modular pattern from this url http://viralpatel.net/blogs/javascript-module-pattern/ and
http://www.codeproject.com/Articles/247241/Javascript-Module-Pattern
and some time confusion arise in my mind. so here i am putting things where i get some confusion. please help me to understand all.
see the below code. all private variable and function declared in module with var keyword. here pub object also declared with var keyword. it means pub is private. so when pub is private then how people can call pub related function from out side like below code
calling syntax
CalcModule.add(2,10);
CalcModule.add(5,15);
CalcModule = (function(){
var pub = {};
var mem = new Array(); //private variable
var storeInMemory = function(val) { //private function
mem.push(val);
};
pub.add = function(a, b) {
var result = a + b;
storeInMemory(result); //call to private function
return result;
};
pub.sub = function(a, b) {
var result = a - b;
storeInMemory(result); //call to private function
return result;
};
pub.retrieveFromMemory = function() {
return mem.pop();
};
return pub;
})();
CalcModule.add(2,10);
CalcModule.add(5,15);
console.log(CalcModule.retrieveFromMemory()); //outputs 20
console.log(CalcModule.retrieveFromMemory()); //outputs 12
Separating Module across different JS files: Augmentation
var CalcModule = (function($, pub){
//jQuery will still be available via $
var mem = new Array(); //private variable
pub.storeInMemory = function(val){
mem.push(val);
};
pub.retrieveFromMemory = function(){
return mem.pop();
};
return pub;
})(jQuery, CalcModule || {});
var CalcModule = (function($, pub){
//jQuery will still be available via $
pub.add = function(a,b){
var result = a + b;
pub.storeInMemory(result);
return result;
};
pub.sub = function(a,b){
var result = a - b;
pub.storeInMemory(result);
return result;
};
return pub;
}(jQuery, CalcModule || {}));
see this function($, pub) syntax. why dollar sign is there and why pub need to pass there.
what is the difference between module Augmentation and sub module ?
var Module1 = ( function (oldModule) {
var
//assigning oldmodule in to a local variable.
parent = oldModule;
//overriding the existing privileged method.
parent.privilegedMethod = function ( ){
//do something different by overriding the old method.
};
//private method accessing privileged method of parent module.
var privateMethod2 = function ( ) {
parent.privilegedMethod();//can access privileged method of Module
parent.publicMethod1(); //can access public method of Module
}
return {
newMethod : function ( ) {
///do something for this brand new module.
///use some functionality of parent module.
/// parent.privilegedMethod( );
}
};
} )(Module);//
Module object is the existing module that I want to extend.
how anyone can understand the above code extend the module. just by this syntax (Module) ?
if we write module in 5 separate js file then which file we need load first. what will be the order of loading those module related s file ?
Because at the end it's returning pub so you'll have access to all its methods
CalcModule = (function(){ return pub; }());
CalcModules === pub
function($, pub)
This is the declaration of the anonymous function that is called at the end of the code
Here we have the effective call passing jQuery and your module
(jQuery, CalcModule || {}));
We are passing jQuery as first parameter and CalcModule as second only if exist otherwise an empty object (CalcModule OR {}). The first time the function is called CalcModule doesn't exist and so you'll end up passing an empty object, the second time CalcModule exist because has been created by the previous call. This is done to make it order agnostic.
So we can deduce
$ === jQuery
pub === {}
$ === jQuery
pub === CalcModule
You have to pass CalcModule to the function so it can be expanded.
This
(function($, pub){...}(jQuery, CalcModule || {}));
is exactly equal to this
var anonFunc = function($, pub){...};
anonfunc(jQuery, CalcModule || {});
Augmentation: you are adding functionality to the same module
pub.add = function(a,b){}
pub.sub = function(a,b){}
Sub-Module: you are adding a module to another module
subModule.add = function(a,b){}
subModule.sub = function(a,b){}
pub.subModule = function(a,b){ return mySubModule; }
You are passing Module but it's creating a brand new module that can USE the Module you have passed, this is more like a sort of Inheritance than Augmentation
Depends, but generally it's indifferent because you're just declaring the functionalities of your Module. The only case where you need to respect an order is when a functionality construction depends on another functionality of the module.