JavaScript: Design Patterns 04 – Module Reveal Pattern

Module Reveal Pattern

Solves the following problems within the Module Pattern

  • Ensuring private members cannot interact with public ones
  • Reduce complexity introduced by the Module Pattern

Unlike the Module Pattern, the Module Reveal Pattern, does not place functions
and variables in the returned API object directly. Everything is created
within the private scope of the anonymous function.

Since both public and private members are within the same scope now, it is
important to differentiate between the two. This is commonly done by placing
an underscore in front of variable names that are private, to note them as such.
This of course requires that the developer be extra careful when using and
calling variables, making sure he is using the correct public or private one.

// IIFE will execute and return an object literal
var myLibrary = (function(){

// Private scope as everything within the anonymous function is hidden
// Private variables
let _privateData = 'this is private stuff';

// Private functions
function _doSomethingPrivate(){
console.log('Just did something private.')
}

// Public API functions
function doThis(){
console.log('This was done.');
}
function doThat(){
console.log('That was done.');
_doSomethingPrivate();
}

// The returned object contains the public API to the library
return {
doThis,
doThat
}

})();

// Accessible because they are on the API object
myLibrary.doThis();
myLibrary.doThat();

// NOT accessible because it is hidden within the scope of the anonymous function
// doSomethingPrivate(); // Uncommenting this line will throw an error

Published by

Tim Clark

Experienced Business Owner, Chief Information Officer, Vice President, Chief Software Architect, Application Architect, Project Manager, Software Developer, Senior Web Developer, Graphic Designer & 3D Modeler, University Instructor, University Program Chair, Academic Director. Specialties: Ruby, Ruby on Rails, JavaScript, JQuery, AJAX, Node.js, React.js, Angular.js, MySQL, PostgreSQL, MongoDB, SQL Server, Responsive Design, HTML5, XHTML, CSS3, C#, ASP.net, Project Management, System Design/Architecture, Web Design, Web Development, Adobe CS6 (Photoshop, Illustrator)

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s