/red/docs/class.html
HTML | 48 lines | 42 code | 6 blank | 0 comment | 0 complexity | 6fa7d3c95a4c1083ba7c395ed909b800 MD5 | raw file
1<!DOCTYPE html> <html> <head> <title>class.js</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link rel="stylesheet" media="all" href="docco.css" /> </head> <body> <div id="container"> <div id="background"></div> <div id="jump_to"> Jump To … <div id="jump_wrapper"> <div id="jump_page"> <a class="source" href="class.html"> class.js </a> <a class="source" href="page-control.html"> page-control.js </a> <a class="source" href="module.html"> module.js </a> <a class="source" href="ticker.html"> ticker.js </a> <a class="source" href="history.html"> history.js </a> <a class="source" href="site.html"> site.js </a> </div> </div> </div> <table cellpadding="0" cellspacing="0"> <thead> <tr> <th class="docs"> <h1> class.js </h1> </th> <th class="code"> </th> </tr> </thead> <tbody> <tr id="section-1"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-1">¶</a> </div> <h2>Simple JavaScript Inheritance</h2> 2 3<ul> 4<li>By John Resig http://ejohn.org/</li> 5<li>MIT Licensed.</li> 6</ul> </td> <td class="code"> <div class="highlight"><pre><span class="cm">/* class.js */</span></pre></div> </td> </tr> <tr id="section-2"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-2">¶</a> </div> <p>Custom <a href="http://jslint.com">JSLint</a> settings.</p> </td> <td class="code"> <div class="highlight"><pre><span class="cm">/*global $: true, console: true, Class: true */</span> 7<span class="cm">/*jslint browser: true, onevar: true */</span></pre></div> </td> </tr> <tr id="section-3"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-3">¶</a> </div> <p>Inspired by base2 and Prototype</p> </td> <td class="code"> <div class="highlight"><pre><span class="p">(</span><span class="kd">function</span> <span class="p">()</span> <span class="p">{</span> 8 <span class="kd">var</span> <span class="nx">initializing</span> <span class="o">=</span> <span class="kc">false</span><span class="p">,</span> 9 <span class="nx">fnTest</span> <span class="o">=</span> <span class="p">(</span><span class="sr">/xyz/</span><span class="p">).</span><span class="nx">test</span><span class="p">(</span><span class="kd">function</span> <span class="p">()</span> <span class="p">{</span> 10 <span class="kd">var</span> <span class="nx">xyz</span><span class="p">;</span> 11 <span class="p">})</span> <span class="o">?</span> <span class="p">(</span><span class="sr">/\bsup\b/</span><span class="p">)</span> <span class="o">:</span> <span class="p">(</span><span class="sr">/.*/</span><span class="p">);</span> 12 </pre></div> </td> </tr> <tr id="section-4"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-4">¶</a> </div> <p>The base Class implementation (does nothing)</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">this</span><span class="p">.</span><span class="nx">Class</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{};</span></pre></div> </td> </tr> <tr id="section-5"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-5">¶</a> </div> <p>Create a new Class that inherits from this class</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">Class</span><span class="p">.</span><span class="nx">extend</span> <span class="o">=</span> <span class="kd">function</span> <span class="nx">extend</span><span class="p">(</span><span class="nx">prop</span><span class="p">)</span> <span class="p">{</span> 13 <span class="kd">var</span> <span class="nx">sup</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">prototype</span><span class="p">,</span> 14 <span class="nx">prototype</span><span class="p">,</span> <span class="nx">name</span><span class="p">,</span> <span class="nx">tmp</span><span class="p">,</span> <span class="nx">ret</span><span class="p">,</span> <span class="nx">func</span><span class="p">;</span></pre></div> </td> </tr> <tr id="section-6"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-6">¶</a> </div> <p>Instantiate a base class (but only create the instance, 15don't run the init constructor)</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">initializing</span> <span class="o">=</span> <span class="kc">true</span><span class="p">;</span> 16 <span class="nx">prototype</span> <span class="o">=</span> <span class="k">new</span> <span class="k">this</span><span class="p">();</span> 17 <span class="nx">initializing</span> <span class="o">=</span> <span class="kc">false</span><span class="p">;</span> 18 </pre></div> </td> </tr> <tr id="section-7"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-7">¶</a> </div> <p>Copy the properties over onto the new prototype</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">for</span> <span class="p">(</span><span class="nx">name</span> <span class="k">in</span> <span class="nx">prop</span><span class="p">)</span> <span class="p">{</span> 19 <span class="k">if</span> <span class="p">(</span><span class="nx">prop</span><span class="p">.</span><span class="nx">hasOwnProperty</span><span class="p">(</span><span class="nx">name</span><span class="p">))</span> <span class="p">{</span> 20 <span class="nx">func</span> <span class="o">=</span> <span class="nx">prop</span><span class="p">[</span><span class="nx">name</span><span class="p">];</span></pre></div> </td> </tr> <tr id="section-8"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-8">¶</a> </div> <p>Check if we're overwriting an existing function</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">prototype</span><span class="p">[</span><span class="nx">name</span><span class="p">]</span> <span class="o">=</span> <span class="p">(</span><span class="k">typeof</span> <span class="nx">func</span> <span class="o">===</span> <span class="s2">"function"</span><span class="p">)</span> <span class="o">&&</span> <span class="p">(</span><span class="k">typeof</span> <span class="nx">sup</span><span class="p">[</span><span class="nx">name</span><span class="p">]</span> <span class="o">===</span> <span class="s2">"function"</span><span class="p">)</span> <span class="o">&&</span> <span class="nx">fnTest</span><span class="p">.</span><span class="nx">test</span><span class="p">(</span><span class="nx">func</span><span class="p">)</span> <span class="o">?</span> <span class="p">(</span><span class="kd">function</span> <span class="p">(</span><span class="nx">name</span><span class="p">,</span> <span class="nx">fn</span><span class="p">)</span> <span class="p">{</span> 21 <span class="k">return</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span> 22 <span class="nx">tmp</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">sup</span><span class="p">;</span></pre></div> </td> </tr> <tr id="section-9"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-9">¶</a> </div> <p>Add a new .sup() method that is the same method 23but on the super-class</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">this</span><span class="p">.</span><span class="nx">sup</span> <span class="o">=</span> <span class="nx">sup</span><span class="p">[</span><span class="nx">name</span><span class="p">];</span></pre></div> </td> </tr> <tr id="section-10"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-10">¶</a> </div> <p>The method only need to be bound temporarily, so we 24remove it when we're done executing</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">ret</span> <span class="o">=</span> <span class="nx">fn</span><span class="p">.</span><span class="nx">apply</span><span class="p">(</span><span class="k">this</span><span class="p">,</span> <span class="nx">arguments</span><span class="p">);</span> 25 <span class="k">this</span><span class="p">.</span><span class="nx">sup</span> <span class="o">=</span> <span class="nx">tmp</span><span class="p">;</span> 26 27 <span class="k">return</span> <span class="nx">ret</span><span class="p">;</span> 28 <span class="p">};</span> 29 <span class="p">}(</span><span class="nx">name</span><span class="p">,</span> <span class="nx">func</span><span class="p">))</span> <span class="o">:</span> <span class="nx">func</span><span class="p">;</span> 30 <span class="p">}</span> 31 <span class="p">}</span> 32 33 <span class="nx">prototype</span><span class="p">.</span><span class="nx">vars</span> <span class="o">=</span> <span class="nx">$</span><span class="p">.</span><span class="nx">extend</span><span class="p">(</span><span class="kc">true</span><span class="p">,{},</span><span class="k">this</span><span class="p">.</span><span class="nx">prototype</span><span class="p">.</span><span class="nx">vars</span><span class="p">,</span><span class="nx">prototype</span><span class="p">.</span><span class="nx">vars</span><span class="p">);</span> <span class="c1">// inherit vars</span> 34 </pre></div> </td> </tr> <tr id="section-11"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-11">¶</a> </div> <p>The dummy class constructor</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">function</span> <span class="nx">Class</span><span class="p">(</span><span class="nx">vars</span><span class="p">)</span> <span class="p">{</span> 35 36 <span class="k">if</span><span class="p">(</span><span class="nx">vars</span><span class="p">)</span> <span class="p">{</span> 37 <span class="nx">$</span><span class="p">.</span><span class="nx">extend</span><span class="p">(</span><span class="kc">true</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">vars</span><span class="p">,</span><span class="nx">vars</span><span class="p">);</span> <span class="c1">// override this.vars object with passed argument</span> 38 <span class="p">}</span> 39 </pre></div> </td> </tr> <tr id="section-12"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-12">¶</a> </div> <p>All construction is actually done in the init method</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">initializing</span> <span class="o">&&</span> <span class="k">this</span><span class="p">.</span><span class="nx">init</span><span class="p">)</span> <span class="p">{</span> 40 <span class="k">this</span><span class="p">.</span><span class="nx">init</span><span class="p">.</span><span class="nx">apply</span><span class="p">(</span><span class="k">this</span><span class="p">,</span> <span class="nx">arguments</span><span class="p">);</span> 41 <span class="p">}</span> 42 <span class="p">}</span></pre></div> </td> </tr> <tr id="section-13"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-13">¶</a> </div> <p>Populate our constructed prototype object</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">Class</span><span class="p">.</span><span class="nx">prototype</span> <span class="o">=</span> <span class="nx">prototype</span><span class="p">;</span></pre></div> </td> </tr> <tr id="section-14"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-14">¶</a> </div> <p>Enforce the constructor to be what we expect</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">Class</span><span class="p">.</span><span class="nx">constructor</span> <span class="o">=</span> <span class="nx">Class</span><span class="p">;</span></pre></div> </td> </tr> <tr id="section-15"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-15">¶</a> </div> <p>And make this class extendable</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">Class</span><span class="p">.</span><span class="nx">extend</span> <span class="o">=</span> <span class="nx">extend</span><span class="p">;</span> 43 44 <span class="k">return</span> <span class="nx">Class</span><span class="p">;</span> 45 <span class="p">};</span> 46<span class="p">}());</span> 47 48</pre></div> </td> </tr> </tbody> </table> </div> </body> </html>