edit-article

Article Description: by Don Sagrott, founder @sospep.com - a look at how you can use function chaining to execute a series of methods on your javascript objects

Chapter ID/Name:

Status: Write Writing Written

Add Photo:

Owner ID:

Content: use HTML Edit Content <h1 style="text-align: center;">function/method chaining</h1> <h2>[WHAT]</h2> <ol> <li>]&nbsp;a common practice//technique in javascript development&nbsp;, that can be used to simplify code in scenarios that involve calling multiple functions on the same object consecutively</li> </ol> <h2>[WHY]</h2> <ol> <li>]&nbsp;can tidy up code quite a bit, write a single line of code versus multiple lines of code,</li> <li>] avoid duplication, DRY</li> </ol> <h2>[WHERE]</h2> <ol> <li>] wherever you would call multiple methods on the same object</li> </ol> <h2>[WHEN]</h2> <ol> <li>]</li> </ol> <h2>[EXAMPLE]</h2> <ol> <li>] myCar.start().windowsDown().musicOn().shift('D').accelerate(10)</li> </ol> <h2>[HOW-TO]</h2> <ol> <li><strong>] CREATE</strong></li> <ol> <li><span class="p"><span class="kd">] var</span>&nbsp;Car <span class="o">=</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span><br />&nbsp; <span class="k">this</span><span class="p">.type</span> <span class="o">=</span> <span class="s1">'sports'</span><span class="p">;</span><br />&nbsp; <span class="k">this</span><span class="p">.</span><span class="nx">color</span> <span class="o">=</span> <span class="s1">'brown'</span><span class="p">;</span><br />&nbsp; <span class="k">this</span><span class="p">.started</span> <span class="o">=</span> false<span class="p">;</span><br /><span class="p">};</span></span></li> <li><span class="p">Car.</span><span class="nx">prototype</span><span class="p">.</span><span class="nx">start</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="p">)</span> <span class="p">{</span><br />&nbsp; <span class="k">this</span><span class="p">.started</span> <span class="o">=</span> true<span class="p">;</span></li> <li><span class="p">&nbsp;&nbsp;console.log = 'the car has started:'+this.started ;</span><br /><span class="p">};</span></li> </ol> <li><strong>] USE </strong></li> <ol> <li>] use the .dot operator to chain multiple functions together, see example above</li> </ol></ol> <h2>[REFERENCE]</h2> <ol> <li>] <a href="http://schier.co/blog/2013/11/14/method-chaining-in-javascript.html" target="_blank">http://schier.co/blog/2013/11/14/method-chaining-in-javascript.html</a>&nbsp;</li> <li>] <em>also known as the </em><a href="http://en.wikipedia.org/wiki/Fluent_interface" target="_blank"><em>Fluent Interface</em></a><em> pattern.</em></li> </ol> <h1 style="text-align: center;">&nbsp;</h1>