Method Chaining

Let's talk about Method Chaining concept. In Method Chaining you perform certain action on Object/DOM element and then make the same reference (state of object) to be available where another action can be performed on the same object and so on.

That is you can fire multiple command on same object(s)/element(s) one after another.

If you have used JQuery, then you are definitely using method chaining feature in your project, because it is heavily used in JQuery.

Chaining Method is also called Cascading, where you can call one method after another on an object continuously.

for example:

$("#elementId").css("color", "green").slideUp(2000).slideDown(2000);
 
 or
 
 var str = "My Name is Deepak";
 str.replace("Deepak", "Deepak Singh").toUpperCase().substr(11, str.length);    
 
Example

After Click!!

<html>
 <body>
  <p id="elementId">After Click!!</p>
  <input id="button" type="button" value="Click Me!">
 </body>
</html>

<script>
  $(document).ready(function(){
  $("#button").click(function(){
  $("#elementId").css("color", "green")
	 .slideUp(2000)
	 .slideDown(2000);
	});
 });
</script>

 

 


 

How to create your own Method Chaining.

Member: Robert sahu

ID: 103

Email: This email address is being protected from spambots. You need JavaScript enabled to view it.

// Student data store:
var studentInfo = [
{firstName:"Deepak", lastName:"Singh", email:"This email address is being protected from spambots. You need JavaScript enabled to view it.", id:102},
{firstName:"Nihal", lastName:"Singh", email:"This email address is being protected from spambots. You need JavaScript enabled to view it.", id:103},
{firstName:"Robert", lastName:"sahu", email:"This email address is being protected from spambots. You need JavaScript enabled to view it.", id:104}
];

 
/** 
 If you see in the code each JavaScript method is returning 'this' 
 that means we are making the same object instance available for 
 other methods which in turn can apply method call on same object.
 And this is how method chaining can be achieved.
**/
// Object with the chainable methods.

 var studentController = {

  currentStudent:"",
  findStudent:function (email) {
   var arrayLength = studentInfo.length, i;
   for (i = arrayLength - 1; i >= 0; i--) {
    if (studentInfo[i].email === email) {
     this.currentStudent = studentInfo[i];
     break;
   }
 }

 return this;
},
formatName:function () {
 if (this.currentStudent) {
  this.currentStudent.fullName = this.currentStudent.firstName + " " 
		+ this.currentStudent.lastName;
}
return this;

},

createLayout:function () {
 if (this.currentStudent) {
  this.currentStudent.viewData = "<h2>Member: " + this.currentStudent.fullName 
	+ "</h2>"  + "<p>ID: " + this.currentStudent.id 
	+ "</p>" + "<p>Email: " + this.currentStudent.email + "</p>";
}
return this;
},

displayStudent:function () {
 if (!this.currentStudent) return;

 $(".members-wrapper").append(this.currentStudent.viewData);

}
};

// Now, use the chaninable methods with expressiveness:
studentController.findStudent("This email address is being protected from spambots. You need JavaScript enabled to view it.").formatName().createLayout().displayStudent();
<!DOCTYPE html>
<html>
    <head>
      <script src="http://code.jquery.com/jquery-latest.js"></script>
      <meta charset=utf-8 />
      <title>Javascript chaining method</title>
    </head>
    <body>
      <div class="members-wrapper"></div>
    </body>
	  
    <script type="text/javascript" src="chainmethods.js"></script>
    
</html>