What is the Module in JS
Module is an integral piece of any quality application’s architecture and can help in keeping the units of code for a your project both cleanly separated and organized.
This pattern is used to mimic classes in traditional software engineering and create on public and private access to methods & variables. The module pattern was improved by the reduction of global scope variables, thus decreasing the chances of collision with other code throughout an application.
The module pattern use many projects such as jQuery, Dojo, ExtJS and YUI.
The Module patterns were originally defined as a ways to provide both private and public encapsulation for classes in conventional software engineering.
Let’s looking at an example implementation of the Module pattern by creating a module which is self-contained.
var testModule = (function () { var i = 0; return { increment: function () { return i++; }, reset: function () { console.log( "counter value prior to reset: " + i ); i = 0; } }; })(); // Example of usage: // Increment our counter testModule.increment(); // Check the counter value and reset // Outputs: counter value prior to reset: 1 testModule.reset();
Above, other parts of the code are unable to directly read the value of our methods increment()
or reset()
. But i variable is fully shielded from our global scope
Example Module Pattern JavaScript
We may find useful example, that can to define a simple template that we use for getting started with it.
Below we can see example that covers namespacing, public and private variables.
var myNamespace = (function () { var myPrivateVar, myPrivateMethod; // A private counter variable myPrivateVar = 0; // A private function which logs any arguments myPrivateMethod = function( foo ) { console.log( foo ); }; return { // A public variable myPublicVar: "foo", // A public function utilizing privates myPublicFunction: function( bar ) { // Increment our private counter myPrivateVar++; // Call our private method using bar myPrivateMethod( bar ); } }; })();
Let’s begin looking at another example, below we can see a shopping basket implemented using module pattern. This module is self-contained in a global variable called basketModule
and has private array basket
and so other parts of our application are unable to directly read it. So the only methods (ie. addItem()
, getItemCount()
etc) able to access it are those with access to its scope.
var basketModule = (function () { // privates var basket = []; function doSomethingPrivate() { //...do something } // Return an object exposed to the public return { // Add items to our basket addItem: function( values ) { basket.push(values); }, // Get the count of items in the basket getItemCount: function () { return basket.length; }, // Public alias to a private function doSomething: doSomethingPrivate, // Get the total value of items in the basket getTotal: function () { var q = this.getItemCount(), p = 0; while (q--) { p += basket[q].price; } return p; } }; })(); // Usage // basketModule returns an object with a public API we can use basketModule.addItem({ item: "milk", price: 1.5 }); basketModule.addItem({ item: "butter", price: 0.8 }); // Outputs: 2 console.log( basketModule.getItemCount() ); // Outputs: 0.8 console.log( basketModule.getTotal() ); // However, the following will not work: // Outputs: undefined // This is because the basket itself is not exposed as a part of our // the public APIs console.log( basketModule.basket ); // This also won't work as it only exists within the scope of our // basketModule closure, but not the returned public object console.log( basket );
This article has 1 Comment