/red/docs/class.html

http://github.com/ff0000/rosy · 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 &hellip;         <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">&#182;</a>               </div>               <h2>Simple JavaScript Inheritance</h2>
    2. 

  2. 

  3. <ul>
    4. 

  4. <li>By John Resig http://ejohn.org/</li>
    5. 

  5. <li>MIT Licensed.</li>
    6. 

  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">&#182;</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. 

  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">&#182;</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. 

  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. 

  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. 

  10. 			<span class="kd">var</span> <span class="nx">xyz</span><span class="p">;</span>
    11. 

  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. 

  12. 	</pre></div>             </td>           </tr>                               <tr id="section-4">             <td class="docs">               <div class="pilwrap">                 <a class="pilcrow" href="#section-4">&#182;</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">&#182;</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. 

  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. 

  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">&#182;</a>               </div>               <p>Instantiate a base class (but only create the instance,
    15. 

  15. don'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. 

  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. 

  17. 		<span class="nx">initializing</span> <span class="o">=</span> <span class="kc">false</span><span class="p">;</span>
    18. 

  18. 		</pre></div>             </td>           </tr>                               <tr id="section-7">             <td class="docs">               <div class="pilwrap">                 <a class="pilcrow" href="#section-7">&#182;</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. 

  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. 

  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">&#182;</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">&quot;function&quot;</span><span class="p">)</span> <span class="o">&amp;&amp;</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">&quot;function&quot;</span><span class="p">)</span> <span class="o">&amp;&amp;</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. 

  21. 					<span class="k">return</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
    22. 

  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">&#182;</a>               </div>               <p>Add a new .sup() method that is the same method
    23. 

  23. but 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">&#182;</a>               </div>               <p>The method only need to be bound temporarily, so we
    24. 

  24. remove 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. 

  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. 

  26. 

  27. 						<span class="k">return</span> <span class="nx">ret</span><span class="p">;</span>
    28. 

  28. 					<span class="p">};</span>
    29. 

  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. 

  30. 			<span class="p">}</span>
    31. 

  31. 		<span class="p">}</span>
    32. 

  32. 		
    33. 

  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. 

  34. 			</pre></div>             </td>           </tr>                               <tr id="section-11">             <td class="docs">               <div class="pilwrap">                 <a class="pilcrow" href="#section-11">&#182;</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. 

  35. 			
    36. 

  36. 			<span class="k">if</span><span class="p">(</span><span class="nx">vars</span><span class="p">)</span> <span class="p">{</span>
    37. 

  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. 

  38. 			<span class="p">}</span>
    39. 

  39. 						</pre></div>             </td>           </tr>                               <tr id="section-12">             <td class="docs">               <div class="pilwrap">                 <a class="pilcrow" href="#section-12">&#182;</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">&amp;&amp;</span> <span class="k">this</span><span class="p">.</span><span class="nx">init</span><span class="p">)</span> <span class="p">{</span>
    40. 

  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. 

  41. 			<span class="p">}</span>
    42. 

  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">&#182;</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">&#182;</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">&#182;</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. 

  43. 

  44. 		<span class="k">return</span> <span class="nx">Class</span><span class="p">;</span>
    45. 

  45. 	<span class="p">};</span>
    46. 

  46. <span class="p">}());</span>
    47. 

  47. 

  48. </pre></div>             </td>           </tr>                </tbody>     </table>   </div> </body> </html>
    49.