PageRenderTime 113ms CodeModel.GetById 1ms app.highlight 99ms RepoModel.GetById 2ms app.codeStats 0ms

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