Using patterns to organize your javascript code better.

In order write good maintainable and readable code in JavaScript we should follow some sort of structural design pattern while writing JavaScript code which will make our code more organized and easy to understand.

1. The Object Literal Pattern

An object literal is perhaps the simplest way to encapsulate related code. It doesn’t offer any privacy for properties or methods, but it’s useful for eliminating anonymous functions from your code, centralizing configuration options, and easing the path to reuse and refactoring.

Object Literal Pattern Example

[code language=”js”]

var MyObject = {
//Internal module object properties.
config: {
Field1: 1,
Field2: "xyz"
},

privateMethod: function () {
//
// Some JavaScript Statements
//
},

// Public method
publicMethod1: function () {
//
// Some JavaScript Statements
//
},

// Public method
publicMethod2: function () {
//
// Some JavaScript Statements
//
}
};

[/code]

Advantages of Object Literal Pattern
  • Improves clarity i.e. where to change it and things will be much easier to locate.
  • Eliminated the use of anonymous functions.
  • Moved configuration options out of the body of the code and put them in a central location.

2. The Revealing Module Pattern

The module pattern overcomes some of the limitations of the object literal, offering privacy for variables and functions while exposing a public API if desired.

Revealing Module Pattern Example

[code language=”js”]

var MyModule = (function () {
//Internal module object properties.
var Field1 = 1;
var Field2 = ‘xyz’;
// Private method not accessible from outside
var privateMethod = function () {
//
// Some js Statements
//
};

// Public method accessible from outside
var publicMethod1 = function () {
//
// Some js Statements
//
};

// Public method accessible from outside
var publicMethod2 = function () {
//
// Some js Statements
//
};

// Exposing only public methods so that
// they will be accessible from outside
return {
someMethod: publicMethod1,
anotherMethod: publicMethod2
};

})();

[/code]

Advantages of Revealing Module Pattern
  • Private members live in the closure
  • Public members are exposed in the return object.
Combining revealing module pattern with object literal pattern so that we can achieve benefits of both pattern, consider following example.

[code language=”js”]

//Define public SampleModule function.
var SampleModule = function () {
‘use strict’;

//Define private or internal SampleInternal object.
var SampleInternal = {
//Internal module object properties.
config: {
Field1: 2,
Field2: "xyz"
},

//Internal module object method.
Init: function (settings) {
$.extend(SampleInternal.config, settings);
SampleInternal.config.Field2 = "hello world";
//
// Some JavaScript Statements
//
},

//Internal module object method.
PublicFunction: function () {
//
// Some JavaScript Statements
//
SampleInternal.PrivateFunction1();
SampleInternal.PrivateFunction2();
//
// Some JavaScript Statements
//
},

//Internal module object method.
PrivateFunction1: function () {
//
// Some JavaScript Statements
//
},

//Internal module object method.
PrivateFunction2: function () {
//
// Some JavaScript Statements
//
}
};

//Returning only required properties and\or methods, other
//properties and methods will be private and hidden from outside.
return {
Init: SampleInternal.Init,
PublicFunction: SampleInternal.PublicFunction
};
}();

//Use SampleModule in following way
$(function () {
‘use strict’;
//Initialize setting object
var settings = {
Field1: parseInt($("#Field1").val()),
Field2: parseInt($("#Field2").val())
};

//Accessing public methods exposed by SampleModule
SampleModule.Init(settings);
SampleModule.PublicFunction();
});

[/code]

Please note that in above js code I have used ‘use strict’; command which tells javascript engine to execute code in strict mode.

There are many benefits of using ‘use strict’; some of them are
  • Duplicate keys in object.
  • Variables without var.
  • Duplicate arguments, and many others.

Please do visit the following links to learn more about ‘use strict’; command.
http://stackoverflow.com/questions/21814335/benefits-of-use-strict-in-js
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode

References

https://learn.jquery.com/code-organization/concepts/
https://addyosmani.com/resources/essentialjsdesignpatterns/book/

Leave a Reply

Your email address will not be published. Required fields are marked *