I'm reading the book Learning JavaScript Design Patterns recently. What I don't get is the difference between module pattern and revealing module pattern. I feel they are the same thing. Anyone can give an example?
The Revealing Module pattern is a design pattern for Javascript applications that elegantly solves this problem. The central principle of the Revealing Module pattern is that all functionality and variables should be hidden unless deliberately exposed.
The biggest advantage of revealing module pattern as compared to the module pattern is the code readability aspect. The revealing module pattern is used to provide an abstraction over private implementations by providing public APIs.
Revealing module pattern is a design pattern, which let you organise your javascript code in modules, and gives better code structure. It gives you power to create public/private variables/methods (using closure), and avoids polluting global scope (If you know how to avoid that).
In software engineering, the module pattern is a design pattern used to implement the concept of software modules, defined by modular programming, in a programming language with incomplete direct support for the concept.
There are at least three different ways to implement the Module Pattern, but the Revealing Module Pattern is the only Module Pattern descendant that has an official name.
The Module Pattern must satisfy the following:
But there's a lot of ambiguity in this definition. By resolving the ambiguity differently, you get variants of the Module Pattern.
The Revealing Module Pattern is the most famous and most popular of the Module Pattern variants. It has a number of advantages over the other alternatives, such as
The RMP satisfies three additional conditions in addition to those in the original:
The following example shows how it's used
var welcomeModule = (function(){ var name = "John"; var hello = function(){ console.log("Hello, " + name + "!");} var welcome = function() { console.log( hello() + " Welcome to StackOverflow!");} return { name: name, sayHello: hello, sayWelcome: welcome } })();
If you wanted to make name
and sayHello
private, you just need to comment out the appropriate lines in the return object.
var welcomeModule = (function(){ var name = "John"; var hello = function(){ console.log("Hello, " + name + "!");} var welcome = function() { console.log( hello() + " Welcome to StackOverflow!");} return { //name: name, //sayHello: hello, sayWelcome: welcome } })();
This is probably the oldest variant of the Module Pattern. Unlike RMP, there's no sexy official name for this variant.
It satisfies the following conditions, in addition to the original:
this
, whenever possible.In the following example, you can see how, in contrast to RMP, the function definitions are actually in the return object literal, and references to members are qualified by this
.
var welcomeModule = (function(){ return { name: "John", sayHello: function(){ console.log("Hello, " + this.name + "!");} sayWelcome: function() { console.log( this.hello() + " Welcome to StackOverflow!");} } })();
Note that unlike RMP, in order to make name
and sayHello
private, the references pointing to name
and sayHello
in the various function body definitions also have to be changed.
var welcomeModule = (function(){ var name = "John"; var sayHello = function(){ console.log("Hello, " + name + "!");}; return { //name: "John", //sayHello: function(){ console.log("Hello, " + this.name + "!");} sayWelcome: function() { console.log( hello() + " Welcome to StackOverflow!");} } })();
This variant also has no official name.
It satisfies the following conditions, in addition to the original:
Using our old example, you can see that public members are directly added to the stub object.
var welcomeModule = (function(){ var stub = {}; stub.name = "John"; stub.sayHello = function(){ console.log("Hello, " + stub.name + "!");} stub.sayWelcome = function() { console.log( stub.hello() + " Welcome to StackOverflow!");} return stub; })();
If you want to make name
and sayHello
private as before, the references to the now-private members have to be changed.
var welcomeModule = (function(){ var stub = {}; var name = "John"; var sayHello = function(){ console.log("Hello, " + name + "!");} stub.sayWelcome = function() { console.log( hello() + " Welcome to StackOverflow!");} return stub; })();
The differences between the Revealing Module Pattern and the other variants of the Module Pattern is primarily in how public members are referenced. As a result, RMP is much easier to use and modify, which accounts for its popularity. However, these advantages come at a great cost (in my opinion), which Addy Osmani alludes to in his post on the Revealing Module Pattern,
A disadvantage of this pattern is that if a private function refers to a public function, that public function can't be overridden if a patch is necessary. This is because the private function will continue to refer to the private implementation and the pattern doesn't apply to public members, only to functions.
Public object members which refer to private variables are also subject to the no-patch rule notes above.
As a result of this, modules created with the Revealing Module pattern may be more fragile than those created with the original Module pattern, so care should be taken during usage.
and which I've talked about in some other posts.
Short answer, In Module pattern we define functions in returning object.
In Revealing Module pattern, we define functions in closure area and only use variable names in returning object.
Doing this simplifies the code and has lot of other advantages
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