Patterns in Java Script

Introduction :-

In Java script we have different  types of pattern to write our code.  We all web developer write many java script code every day and we do not know how much clean and safety our code. So today in this article I am going to tell you about basic JS Patterns which helps to write an effective java script code; and we also going to see many OOPs concept while we go through the different patterns.

Background :-

Let’s starts a deep drive in to Java script patterns;

We have three types of pattern in JavaScript these are :-

  1. Function as Abstraction Pattern.(Abstraction in Java script)
  2. Function to Build Module Pattern. (Encapsulation in Java script)
  3. Function to avoid Global variable Pattern. (Anonymous function in Java script)

Let’s see one by one with live examples;

  1. Function as Abstraction Pattern:-

If you are coming from C# language or any object oriented programming language background then we probably all know about abstraction.

Let me once again quick remind!!!

Abstraction :-  Hidings the details and providing only what is necessary.

To understand above let’s jumps to our demo;

Note :- Here I am not going to create any project in visual studio. You can use any editor to write this simple java script function or else you directly open you browser window and open the console window in browser by pressing F12 then press CTL+L in Chrome and CTL+Shift+L in Firefox to clear the console window and pest these bellow code.

Abstraction Partern Demo :-



//Function as abstraction

var Do=function(){

console.log("Do is Called !!!");

}

var DoSomething=function(f){

console.log("Before Do function executed !!!");

try{

f();

}

catch(ex){

console.log(ex)

}

console.log("After Do function executed !!!");

}

DoSomething (Do);

//End of Abstraction


Explanation :- In the above program we have declare two variable called as Do and DoSomething .Using this two variable I declare two functions.

So, What I am doing here is hiding the details of Do Function inside DoSomething Function. While calling I am only call DoSomething function which automatically get executed Do function.

Now what is it’s advantage ?

Advantage of this pattern is if you want to execute some block of code before and after the specific JavaScript function executed then it’s much helpful.

  1. Function to Build Module Pattern:-

In this pattern we are going to understand how we do encapsulation in JavaScript while write function in JavaScript.

Note :- It’s very useful pattern while doing JavaScript program, I recommended use this pattern while writing JavaScript code.

Let’s Jump in to Demo;

//Function to Build Module
var Do= function() {  //This is Global variable

var Job1 = function() {  //This is Local varibale.

console.log("Job1 is Called !!");

};

var Job2= function() {

console.log("Job2 is called !!");

};

return {

process1:Job1,

process2: Job2

};

};

var objDo= new Do();

objDo.process1();

objDo.process2();

//End Build Module

Explanation :-

In the above program I have declare a function using Do variable. Inside this function I have again declare another two function using local variable called as Job1 and Job2. Here I declare two function you can declare as many number as your requirement.

Hence this Job1 and Job2 are local under this Do function; so we cannot access this function outside of  Do function. Job1 and Job2 are only accessible inside the Do function only. Here Do is encapsulated both Job1 and Job2 function.

Remind Oops what saying about encapsulation ??

Hence here we achieve encapsulation as well.

Well; here it’s important to understand that how I am calling Job1 and Job2.

See above what I am doing is that I am returning job1 and Job2 function from Do function.

Always remember every function in Javascript always return some value by default.

To call the function we need to create an object of Do function and using this object I can call all the function define under Do.

Let’s discuss what is the advantages of this pattern?

  • Providing security over our code.
  • More clean code.
  • Avoid duplicate code and write the code specific to our page/view.

Based on my experience:-

Last point which I say above is “Avoid duplicate code and write the code specific to our page”; this is really useful if you are working as a web developer then you might understand this point very clearly.

In my working life what I see is that many programmer write the function but while giving name we are not sure that whether the name is used by someone else or not ??So while calling it’s get confuse that why our function not get executed rather executing someone else function; that due to same name of function.

So if we follow this above pattern we never ever face this problem.

 Hence I always recommended to all of you please follow this pattern.

  1. Function to avoid Global variable.

In this pattern we are going to see how to write a Global function also we see Immediately Invoked Function (IIF).

Let’s see this in demo;


var DoMain = function() {  //This is Global variable.

var Do= function() {

var Job1= function() {  //This is Local varibale.

console.log("Job1 is Called");

};

var Job2= function() {

console.log("Job2 is called");

};

return {

Process1:Job1,

Process2: Job2

};

};

var objDo= new Do();

objDo.Process1 ();

objDo.Process2 ();

}

DoMain();

Explanation :-

If we analysis from first pattern program to this program then what I did in this is I write all the code inside one global variable called as DOMain and making it as a function.

So it’s easy to understand that I am just calling the DoMain() function and we get the same output as previous program.

So what you think nothing is new here right??

Yes….no…  🙂

Let see the new thing bellow :-

//Anonymous function or IIF function

(function(){

var DoMain= function() {  //This is Global variable.

var Do= function() {

var Job1= function() {  //This is Local varibale.

console.log("Job1 is Called");

};

var Job2= function() {

console.log("Job2 is called");

};

return {

Process1:Job1,

Process2: Job2

};

};

var objDo= new Do();

objDo.Process1 ();

objDo.Process2 ();

}

DoMain();

}()); 

Explanation :-

If we analysis above example then we see that there is no variable I deified to store the function; rather I define a self-function which is similar to the anonymous function in C# language.

This type of Function basically called as Immediately invoked function (IIF) in Java script.

So while we writing this type of function then that function get executed immediately after DOM element loaded.

Note :- Basically this type of pattern used in case of developing plug in. We also see many plugin has this type pattern, if you see jquery.flowchart.Js plugin then you can get a clear picture that whole plugin developed using this pattern only.

Conclusion:-

So this all about our java script patterns and their purpose of uses.

Hope this is help full to you understanding all these patterns with simple example.

Above explanation based on my own experience and learning; so if you found anything mistake in that or any example not work then feel free to give you feedback.

Please say about what you feel about this article; which helps me to improve myself.

Thanks all.

Happy Coading.

🙂

Advertisements

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s