<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <h2>Chaining pattern in JS</h2> <h3> Refer js code for example</h3> <code>var Calc = function(start){ </br> this.add = function(x){</br> start+= x;</br> return this; </br> }</br> this.mul = function(x){</br> start *= x </br> return this;</br> </br> }</br> this.equals = function(callback){</br> callback(start)</br> return this; </br> </br> }</br> </br> }</br> </br> new Calc(0)</br> .add(1)</br> .add(2)</br> .mul(3)</br> .equals(function(result){</br> document.write(result); })</code> </br> <samp >Output</samp> <div id="output"></div> </div> </div>

h3{color: brown;}

$( document ).ready(function() { var Calc = function(start){ this.add = function(x){ start+= x; return this; } this.mul = function(x){ start *= x return this; } this.equals = function(callback){ callback(start) return this; } } new Calc(0) .add(1) .add(2) .mul(3) .equals(function(result){ document.getElementById("output").innerHTML = result; }) });