I am reading A JavaScript Module Pattern, and wondering why bother to do the module assignment by firing an immediate anonymous function call like this:
YAHOO.myProject.myModule = function () {
return {
myPublicProperty: "I'm accessible as YAHOO.myProject.myModule.myPublicProperty.",
myPublicMethod: function () {
YAHOO.log("I'm accessible as YAHOO.myProject.myModule.myPublicMethod.");
}
};
}();
instead of directly assign the object to YAHOO.myProject.myModule like this:
YAHOO.myProject.myModule = {
myPublicProperty: "I'm accessible as YAHOO.myProject.myModule.myPublicProperty.",
myPublicMethod: function () {
YAHOO.log("I'm accessible as YAHOO.myProject.myModule.myPublicMethod.");
}
};
In that example, there isn't any point. You didn't read enough of the document you linked to.
Section 3 is Add "private" methods and variables in the anonymous function prior to the return statement., and that demonstrates why you would want to use an IEFF here.
It is so you can define local variables which are accessible to the functions you are making public, but aren't directly accessible themselves.
Related
I'm creating a wrapper for an API that will be used in a couple different applications.
I'm using a global object and placing the various functions into that object as different keys. So I'll have:
window.globalContainer = {
APIEndpoint1: function(){
make API call and resolve result
},
APIEndpoint2: function(){},
...
}
All the meat of the API calls are directly in the functions. That is, you could go to window.globalContainer.APIEndpoint1 from the console and see the entire function.
Is this generally bad practice for something that's used across multiple applications and acts as a helper library? Or is this acceptable? I looked at jQuery in the console and it seemed to do much of the same. If it is frowned upon, how do I implement private functions within the global object?
A good place to start is anonymous closures:
(function (global) {
var foo = global.foo || {};
//accessible
foo.publicVar = 5;
foo.publicFcn = function (a, b) {
privateFcn(a, b);
...
};
//not accessible
var privateVar = 5;
function privateFcn(a, b) {
...
}
global.foo = foo;
})(window)
With these you can pretty intuitively build a library and not pollute the namespace.
You explicitly say which variables and functions you want to be made accessible.
You can use an IIFE to implement private functions/properties.
window.globalContainer = function () {
//what ever you define here is not accessible outside. Only the API in
//the returned object is accessible outside
function private1() {
make API call and resolve result
}
return {
APIEndpoint1: function(){
private1();
},
APIEndpoint2: function(){},
...
}
}();
I am learning JavaScript and have come across of the structure below:
var Test = (function () {
function func1() {
//do something.....
}
function func2() {
//do something.....
}
function func3() {
//do something.....
}
return {
func1: func1,
func2: func2,
func3: func3
};
})();
I am wondering what the return block is doing. Is this a very commonly used JavaScript structure? Please let me know where can I get more information about this.
This is the Revealing Module Pattern.
The returned object contains references to the functions defined inside the IIFE. So the functions defined inside are private to the anonymous function.
But if you want to use the inner functions outside, you can use the returned object.
The value of Test will be
var Test = {
func1: func1,
func2: func2,
func3: func3
};
And you can call func1 from outside as
Test.func1();
This is the way Javascript emulate class. As there is no visibility specifiers using Module pattern, variables/methods can be make public/private.
The revealing module pattern is inspired from Module pattern. In revealing module pattern, only reference to the private variables/methods is returned in an object.
The main idea behind the pattern is avoiding evil global variables. This looks similar to IIFE except an object is returned instead of function. The variables/methods defined inside the IIFE are private to the function. To access any variable/method inside the IIFE, it needs to be added in the returned object and then it can be accessed from outside of IIFE. This pattern takes advantage of closures, so the variables/methods defined inside the IIFE are accessible even after the object is returned.
From Addy Osmani's book Learning Javascript Design patterns
The Revealing Module pattern came about as Heilmann was frustrated with the fact that he had to repeat the name of the main object when we wanted to call one public method from another or access public variables. He also disliked the Module pattern’s requirement for having to switch to object literal notation for the things he wished to make public.
The result of his efforts was an updated pattern where we would simply define all of our functions and variables in the private scope and return an anonymous object with pointers to the private functionality we wished to reveal as public.
Advantages:
Encapsulation. The code inside the IIFE is encapsulated from outside world
Clean, organized and reusable code
Privacy. It allows to create private variables/methods. The private variables/methods cannot be touched from outside of the IIFE.
Disadvantages:
If a private function refers to a public function, that public function can't be overridden
Further Reading:
https://en.wikipedia.org/wiki/Module_pattern
https://carldanley.com/js-revealing-module-pattern/
How to use Revealing module pattern in JavaScript
EDIT
From comment from #Mike
It's of note that it's common to create an object (eg, var me = {};) and then declare the would-be public members on it (me.func1 = function() { /* ... */ };), returning that object at the end (return me;). This avoids the repetition that we see in the return statement of OP's code (where all the public stuff is repeated).
It's a literal object in the return statement. It's like creating an object and then returning it:
var obj = {
func1: func1,
func2: func2,
func3: func3
};
return obj;
The literal object syntax creates an object and sets its properties, just like:
var obj = new Object();
obj.func1 = func1;
obj.func2 = func2;
obj.func3 = func3;
return obj;
The purpose of returning the object is to reveal the functions inside the function to the code outside, while creating a scope for private variables that the functions can use.
When not using private variables, the code does the same thing as:
var Test = {
func1: function() {
//do something.....
},
func2: function() {
//do something.....
},
func3: function() {
//do something.....
}
};
Private variables are declared inside the function scope, and are only reachable by the functions inside it. Example:
var Test = (function () {
var name;
function setName(str) {
name = str;
}
function getName() {
return name;
}
return {
setName: setName,
getName: getName
};
})();
Test.setName("John Doe");
var name = Test.getName();
That works like a class in other programming languages. Therefore, you can access the public func1 member using Test.func1 and call it like a normal function using Test.func1().
I am learning JavaScript and have come across of the structure below:
var Test = (function () {
function func1() {
//do something.....
}
function func2() {
//do something.....
}
function func3() {
//do something.....
}
return {
func1: func1,
func2: func2,
func3: func3
};
})();
I am wondering what the return block is doing. Is this a very commonly used JavaScript structure? Please let me know where can I get more information about this.
This is the Revealing Module Pattern.
The returned object contains references to the functions defined inside the IIFE. So the functions defined inside are private to the anonymous function.
But if you want to use the inner functions outside, you can use the returned object.
The value of Test will be
var Test = {
func1: func1,
func2: func2,
func3: func3
};
And you can call func1 from outside as
Test.func1();
This is the way Javascript emulate class. As there is no visibility specifiers using Module pattern, variables/methods can be make public/private.
The revealing module pattern is inspired from Module pattern. In revealing module pattern, only reference to the private variables/methods is returned in an object.
The main idea behind the pattern is avoiding evil global variables. This looks similar to IIFE except an object is returned instead of function. The variables/methods defined inside the IIFE are private to the function. To access any variable/method inside the IIFE, it needs to be added in the returned object and then it can be accessed from outside of IIFE. This pattern takes advantage of closures, so the variables/methods defined inside the IIFE are accessible even after the object is returned.
From Addy Osmani's book Learning Javascript Design patterns
The Revealing Module pattern came about as Heilmann was frustrated with the fact that he had to repeat the name of the main object when we wanted to call one public method from another or access public variables. He also disliked the Module pattern’s requirement for having to switch to object literal notation for the things he wished to make public.
The result of his efforts was an updated pattern where we would simply define all of our functions and variables in the private scope and return an anonymous object with pointers to the private functionality we wished to reveal as public.
Advantages:
Encapsulation. The code inside the IIFE is encapsulated from outside world
Clean, organized and reusable code
Privacy. It allows to create private variables/methods. The private variables/methods cannot be touched from outside of the IIFE.
Disadvantages:
If a private function refers to a public function, that public function can't be overridden
Further Reading:
https://en.wikipedia.org/wiki/Module_pattern
https://carldanley.com/js-revealing-module-pattern/
How to use Revealing module pattern in JavaScript
EDIT
From comment from #Mike
It's of note that it's common to create an object (eg, var me = {};) and then declare the would-be public members on it (me.func1 = function() { /* ... */ };), returning that object at the end (return me;). This avoids the repetition that we see in the return statement of OP's code (where all the public stuff is repeated).
It's a literal object in the return statement. It's like creating an object and then returning it:
var obj = {
func1: func1,
func2: func2,
func3: func3
};
return obj;
The literal object syntax creates an object and sets its properties, just like:
var obj = new Object();
obj.func1 = func1;
obj.func2 = func2;
obj.func3 = func3;
return obj;
The purpose of returning the object is to reveal the functions inside the function to the code outside, while creating a scope for private variables that the functions can use.
When not using private variables, the code does the same thing as:
var Test = {
func1: function() {
//do something.....
},
func2: function() {
//do something.....
},
func3: function() {
//do something.....
}
};
Private variables are declared inside the function scope, and are only reachable by the functions inside it. Example:
var Test = (function () {
var name;
function setName(str) {
name = str;
}
function getName() {
return name;
}
return {
setName: setName,
getName: getName
};
})();
Test.setName("John Doe");
var name = Test.getName();
That works like a class in other programming languages. Therefore, you can access the public func1 member using Test.func1 and call it like a normal function using Test.func1().
I was just looking at the code of a simple demonstration of modular pattern, have a look :
// Global module
var myModule = (function ( jQ, _ ) {
function privateMethod1(){
jQ(".container").html("test");
}
function privateMethod2(){
console.log( _.min([10, 5, 100, 2, 1000]) );
}
return{
publicMethod: function(){
privateMethod1();
}
};
// Pull in jQuery and Underscore
})( jQuery, _ );
myModule.publicMethod();
The code is pretty straightforward, what I don't understand is what's the need for a publicMethod? Why are privateMethod1 and privateMethod2 inaccessible? I understand that privateMethod1 and privateMethod2 are classic js functions and publicMethod is more of a variable assigned to hold a function.
privateMethod1() and privateMethod2() are local functions declared inside the module function wrapper. As such, they are only visible and callable from within that function wrapper. They can't be reached from outside the module wrapper.
This is the same as a local variable inside a function.
function someFunc() {
// a function declared inside another function is ONLY available
// inside that function
function localFunc() {
// do something
}
// this is just like a local variable which is only available within
// the scope of the function itself
var myVariable = 2;
}
// can't call localFunc here - this will be an error
// because it is defined in a different scope and not available here
localFunc();
Private methods can be useful when you want to create functions or methods that the public methods can use, but you do not want outside callers to be able to also call or use those functions/methods.
Private variables can be used to store state that the public methods or private methods want to reference, but you don't want the outside callers to have access to or be able to mess with.
I have a bunch of functions in my script which resides in a .js file.
How can avoid conflicts with the names of my functions within the same page if some other script written by some other guys use the same function names as in my script ?
Is there a way to do this?
If you don't need access to those functions outside of your script you can wrap the whole script in an immediately invoked function expression:
(function () {
// Your code here
}());
This introduces a new scope, so any declarations within it are not visible outside of it.
If you do need access outside of that scope, expose your functions as methods of a "namespace":
var YourStuff = (function () {
// Private functions etc...
// Expose public methods
return {
someMethod: function () {}
};
}());
By taking this approach you only introduce a single global identifier, reducing the chances of a conflict. You can call the method as follows:
YourStuff.someMethod();
Use namespaces..
var company = {};
company.doSomething = function() {
};
company.project = {};
company.project.submodule = {};
company.project.submodule.doSomething = function() {};