atom.xml

<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">

  <title><![CDATA[#akai]]></title>
  <link href="http://akai.github.com/atom.xml" rel="self"/>
  <link href="http://akai.github.com/"/>
  <updated>2011-12-09T14:06:17+08:00</updated>
  <id>http://akai.github.com/</id>
  <author>
    <name><![CDATA[akai]]></name>
    
  </author>
  <generator uri="http://octopress.org/">Octopress</generator>

  
  <entry>
    <title type="html"><![CDATA[JavaScript Design Patterns]]></title>
    <link href="http://akai.github.com/blog/js-patterns/"/>
    <updated>2011-12-01T14:16:00+08:00</updated>
    <id>http://akai.github.com/blog/js-patterns</id>
    <content type="html"><![CDATA[<p>Writing code that’s expressive, encapsulated &amp; structured</p>

<h2>1. Module Pattern</h2>

<p>Interchangeable single-parts of a larger system that can be easily re-used.</p>

<h3>Stepping stone: IIFE</h3>

<p>Immediately invoked function expressions (or self-executing anonymous functions)</p>

<figure class='code'> <div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
<span class='line-number'>13</span>
<span class='line-number'>14</span>
<span class='line-number'>15</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
</span><span class='line'>    <span class="c1">// code to be immediately invoked</span>
</span><span class='line'><span class="p">}());</span> <span class="c1">// Crockford recommends this way</span>
</span><span class='line'>
</span><span class='line'><span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
</span><span class='line'>    <span class="c1">// code to be immediately invoked</span>
</span><span class='line'><span class="p">})();</span> <span class="c1">// This is just as valid</span>
</span><span class='line'>
</span><span class='line'><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nb">window</span><span class="p">,</span> <span class="nb">document</span><span class="p">,</span> <span class="kc">undefined</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>    <span class="c1">//code to be immediately invoked</span>
</span><span class='line'><span class="p">})(</span><span class="k">this</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nb">document</span><span class="p">);</span>
</span><span class='line'>
</span><span class='line'><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">global</span><span class="p">,</span> <span class="kc">undefined</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>    <span class="c1">//code to be immediately invoked</span>
</span><span class='line'><span class="p">})(</span><span class="k">this</span><span class="p">);</span>
</span></code></pre></td></tr></table></div></figure>


<h3>Simulate privacy</h3>

<p>The typical module pattern is where immediately invoked function expressions (IIFEs) use <strong>execution context</strong> to create ‘privacy’. Here, <strong>objects</strong> are returned instead of functions.</p>

<figure class='code'> <div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
<span class='line-number'>13</span>
<span class='line-number'>14</span>
<span class='line-number'>15</span>
<span class='line-number'>16</span>
<span class='line-number'>17</span>
<span class='line-number'>18</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="kd">var</span> <span class="nx">basketModule</span> <span class="o">=</span> <span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
</span><span class='line'>    <span class="kd">var</span> <span class="nx">basket</span> <span class="o">=</span> <span class="p">[];</span> <span class="c1">//private</span>
</span><span class='line'>    <span class="k">return</span> <span class="p">{</span> <span class="c1">//exposed to public</span>
</span><span class='line'>        <span class="nx">addItem</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">values</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>            <span class="nx">basket</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="nx">values</span><span class="p">);</span>
</span><span class='line'>        <span class="p">},</span>
</span><span class='line'>        <span class="nx">getItemCount</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
</span><span class='line'>            <span class="k">return</span> <span class="nx">basket</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span>
</span><span class='line'>        <span class="p">},</span>
</span><span class='line'>        <span class="nx">getTotal</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
</span><span class='line'>            <span class="kd">var</span> <span class="nx">q</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">getItemCount</span><span class="p">(),</span> <span class="nx">p</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span>
</span><span class='line'>            <span class="k">while</span> <span class="p">(</span><span class="nx">q</span><span class="o">--</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>                <span class="nx">p</span> <span class="o">+=</span> <span class="nx">basket</span><span class="p">[</span><span class="nx">q</span><span class="p">].</span><span class="nx">price</span><span class="p">;</span>
</span><span class='line'>            <span class="p">}</span>
</span><span class='line'>            <span class="k">return</span> <span class="nx">p</span><span class="p">;</span>
</span><span class='line'>        <span class="p">}</span>
</span><span class='line'>    <span class="p">}</span>
</span><span class='line'><span class="p">}());</span>
</span></code></pre></td></tr></table></div></figure>


<ul>
<li>In the pattern, variables declared are only available inside the module.</li>
<li>Variables de ned within the returning object are available to everyone</li>
<li>This allows us to simulate privacy</li>
</ul>


<h3>Sample usage</h3>

<p>Inside the module, you&#8217;ll notice we return an object. This gets automatically assigned to basketModule so that you can interact with it as follows:</p>

<figure class='code'> <div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="c1">//basketModule is an object with properties which can also be methodsbas</span>
</span><span class='line'><span class="nx">basketModule</span><span class="p">.</span><span class="nx">addItem</span><span class="p">({</span><span class="nx">item</span><span class="o">:</span> <span class="s1">&#39;bread&#39;</span><span class="p">,</span><span class="nx">price</span><span class="o">:</span> <span class="mf">0.5</span><span class="p">});</span>
</span><span class='line'><span class="nx">basketModule</span><span class="p">.</span><span class="nx">addItem</span><span class="p">({</span><span class="nx">item</span><span class="o">:</span> <span class="s1">&#39;butter&#39;</span><span class="p">,</span><span class="nx">price</span><span class="o">:</span> <span class="mf">0.3</span><span class="p">});</span>
</span><span class='line'>
</span><span class='line'><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">basketModule</span><span class="p">.</span><span class="nx">getItemCount</span><span class="p">());</span>
</span><span class='line'><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">basketModule</span><span class="p">.</span><span class="nx">getTotal</span><span class="p">());</span>
</span><span class='line'>
</span><span class='line'><span class="c1">//however, the following will not work:</span>
</span><span class='line'><span class="c1">// (undefined as not inside the returned object)</span>
</span><span class='line'><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">basketModule</span><span class="p">.</span><span class="nx">basket</span><span class="p">);</span>
</span><span class='line'><span class="c1">//(only exists within the module scope)</span>
</span><span class='line'><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">basket</span><span class="p">);</span>
</span></code></pre></td></tr></table></div></figure>


<h3>Module Pattern: jQuery</h3>

<p>In the following example, a <strong>library</strong> function is defined which declares a new library and automatically binds up the <strong>init</strong> function to document.ready when new libraries (ie. modules) are created.</p>

<figure class='code'> <div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
<span class='line-number'>13</span>
<span class='line-number'>14</span>
<span class='line-number'>15</span>
<span class='line-number'>16</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="kd">function</span> <span class="nx">library</span><span class="p">(</span><span class="nx">module</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>    <span class="nx">$</span><span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
</span><span class='line'>        <span class="k">if</span> <span class="p">(</span><span class="nx">module</span><span class="p">.</span><span class="nx">init</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>            <span class="nx">module</span><span class="p">.</span><span class="nx">init</span><span class="p">();</span>
</span><span class='line'>        <span class="p">}</span>
</span><span class='line'>    <span class="p">});</span>
</span><span class='line'>    <span class="k">return</span> <span class="nx">module</span><span class="p">;</span>
</span><span class='line'><span class="p">}</span>
</span><span class='line'>
</span><span class='line'><span class="kd">var</span> <span class="nx">myLibrary</span> <span class="o">=</span> <span class="nx">library</span><span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
</span><span class='line'>    <span class="k">return</span> <span class="p">{</span>
</span><span class='line'>        <span class="nx">init</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
</span><span class='line'>        <span class="cm">/*implementation*/</span>
</span><span class='line'>        <span class="p">}</span>
</span><span class='line'>    <span class="p">};</span>
</span><span class='line'><span class="p">}());</span>
</span></code></pre></td></tr></table></div></figure>


<h3>AMD + jQuery</h3>

<p>A very simple AMD module using jQuery and the color plugin</p>

<figure class='code'> <div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
<span class='line-number'>13</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="nx">define</span><span class="p">([</span><span class="s2">&quot;jquery&quot;</span><span class="p">,</span> <span class="s2">&quot;jquery.color&quot;</span><span class="p">,</span> <span class="s2">&quot;jquery.bounce&quot;</span><span class="p">],</span> <span class="kd">function</span><span class="p">(</span><span class="nx">$</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>    <span class="c1">//the jquery.color and jquery.bounce plugins have been loaded</span>
</span><span class='line'>    <span class="c1">// not exposed to other modules</span>
</span><span class='line'>    <span class="nx">$</span><span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
</span><span class='line'>        <span class="nx">$</span><span class="p">(</span><span class="s1">&#39;#container&#39;</span><span class="p">)</span>
</span><span class='line'>            <span class="p">.</span><span class="nx">animate</span><span class="p">({</span><span class="s1">&#39;backgroundColor&#39;</span><span class="o">:</span> <span class="s1">&#39;#ccc&#39;</span><span class="p">},</span> <span class="mi">500</span><span class="p">)</span>
</span><span class='line'>            <span class="p">.</span><span class="nx">bounce</span><span class="p">();</span>
</span><span class='line'>    <span class="p">});</span>
</span><span class='line'>    <span class="c1">// exposed to other modules</span>
</span><span class='line'>    <span class="k">return</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
</span><span class='line'>        <span class="c1">// your modules functionality</span>
</span><span class='line'>    <span class="p">};</span>
</span><span class='line'><span class="p">});</span>
</span></code></pre></td></tr></table></div></figure>


<h3>AMD/UMD jQuery Plugin</h3>

<p><strong>Recommended</strong> by Require.js author James Burke</p>

<figure class='code'> <div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
<span class='line-number'>13</span>
<span class='line-number'>14</span>
<span class='line-number'>15</span>
<span class='line-number'>16</span>
<span class='line-number'>17</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">root</span><span class="p">,</span> <span class="nx">factory</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>    <span class="k">if</span> <span class="p">(</span><span class="k">typeof</span> <span class="nx">exports</span> <span class="o">===</span> <span class="s1">&#39;object&#39;</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>        <span class="c1">// Node/CommonJS</span>
</span><span class='line'>        <span class="nx">factory</span><span class="p">(</span><span class="nx">require</span><span class="p">(</span><span class="s1">&#39;jquery&#39;</span><span class="p">));</span>
</span><span class='line'>    <span class="p">}</span> <span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="k">typeof</span> <span class="nx">define</span> <span class="o">===</span> <span class="s1">&#39;function&#39;</span> <span class="o">&amp;&amp;</span> <span class="nx">define</span><span class="p">.</span><span class="nx">amd</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>        <span class="c1">// AMD. Use a named plugin in case this</span>
</span><span class='line'>        <span class="c1">// file is loaded outside an AMD loader,</span>
</span><span class='line'>        <span class="c1">// but an AMD loader lives on the page.</span>
</span><span class='line'>        <span class="nx">define</span><span class="p">(</span><span class="s1">&#39;myPlugin&#39;</span><span class="p">,</span> <span class="p">[</span><span class="s1">&#39;jquery&#39;</span><span class="p">],</span> <span class="nx">factory</span><span class="p">);</span>
</span><span class='line'>    <span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
</span><span class='line'>        <span class="c1">// Browser globals</span>
</span><span class='line'>        <span class="nx">factory</span><span class="p">(</span><span class="nx">root</span><span class="p">.</span><span class="nx">jQuery</span><span class="p">);</span>
</span><span class='line'>    <span class="p">}</span>
</span><span class='line'><span class="p">}(</span><span class="k">this</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">$</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>    <span class="nx">$</span><span class="p">.</span><span class="nx">fn</span><span class="p">.</span><span class="nx">myPlugin</span> <span class="o">=</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
</span><span class='line'>    <span class="p">};</span>
</span><span class='line'><span class="p">}));</span>
</span></code></pre></td></tr></table></div></figure>


<h3>CommonJS Modules</h3>

<p>They basically contain two parts: an <strong>exports</strong> object that contains the objects a module wishes to expose and a <strong>require</strong> function that modules can use to import the exports of other modules</p>

<figure class='code'> <div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="cm">/* here we achieve compatibility with AMD and CommonJS</span>
</span><span class='line'><span class="cm">using some boilerplate around the CommonJS module format*/</span>
</span><span class='line'><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">define</span><span class="p">){</span>
</span><span class='line'>    <span class="nx">define</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">require</span><span class="p">,</span><span class="nx">exports</span><span class="p">){</span>
</span><span class='line'>        <span class="cm">/*module contents*/</span>
</span><span class='line'>        <span class="kd">var</span> <span class="nx">dep1</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s2">&quot;foo&quot;</span><span class="p">);</span>
</span><span class='line'>        <span class="kd">var</span> <span class="nx">dep2</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s2">&quot;bar&quot;</span><span class="p">);</span>
</span><span class='line'>         <span class="nx">exports</span><span class="p">.</span><span class="nx">hello</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(){...};</span>
</span><span class='line'>         <span class="nx">exports</span><span class="p">.</span><span class="nx">world</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(){...};</span>
</span><span class='line'>    <span class="p">});</span>
</span><span class='line'><span class="p">})(</span><span class="k">typeof</span> <span class="nx">define</span> <span class="o">==</span> <span class="s2">&quot;function&quot;</span> <span class="o">?</span> <span class="nx">define</span> <span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">factory</span><span class="p">)</span> <span class="p">{</span> <span class="nx">factory</span><span class="p">(</span><span class="nx">require</span><span class="p">,</span> <span class="nx">exports</span><span class="p">)</span> <span class="p">});</span>
</span></code></pre></td></tr></table></div></figure>


<h2>2. Facade Pattern</h2>

<p>Convenient, high-level interfaces to larger bodies of code that hide underlying complexity</p>

<h3>Facade Implementation</h3>

<p>A higher-level facade is provided to our underlying module, without directly exposing methods.</p>

<figure class='code'> <div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
<span class='line-number'>13</span>
<span class='line-number'>14</span>
<span class='line-number'>15</span>
<span class='line-number'>16</span>
<span class='line-number'>17</span>
<span class='line-number'>18</span>
<span class='line-number'>19</span>
<span class='line-number'>20</span>
<span class='line-number'>21</span>
<span class='line-number'>22</span>
<span class='line-number'>23</span>
<span class='line-number'>24</span>
<span class='line-number'>25</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="kd">var</span> <span class="nx">module</span> <span class="o">=</span> <span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
</span><span class='line'>    <span class="kd">var</span> <span class="nx">_private</span> <span class="o">=</span> <span class="p">{</span>
</span><span class='line'>        <span class="nx">i</span><span class="o">:</span> <span class="mi">5</span><span class="p">,</span>
</span><span class='line'>        <span class="nx">get</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
</span><span class='line'>            <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;current value:&#39;</span> <span class="o">+</span> <span class="k">this</span><span class="p">.</span><span class="nx">i</span><span class="p">);</span>
</span><span class='line'>        <span class="p">},</span>
</span><span class='line'>        <span class="nx">set</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">val</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>            <span class="k">this</span><span class="p">.</span><span class="nx">i</span> <span class="o">=</span> <span class="nx">val</span><span class="p">;</span>
</span><span class='line'>        <span class="p">},</span>
</span><span class='line'>        <span class="nx">run</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
</span><span class='line'>            <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;running&#39;</span><span class="p">);</span>
</span><span class='line'>        <span class="p">},</span>
</span><span class='line'>        <span class="nx">jump</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
</span><span class='line'>            <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;jumping&#39;</span><span class="p">);</span>
</span><span class='line'>        <span class="p">}};</span>
</span><span class='line'>    <span class="k">return</span> <span class="p">{</span>
</span><span class='line'>        <span class="nx">facade</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">args</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>            <span class="nx">_private</span><span class="p">.</span><span class="nx">set</span><span class="p">(</span><span class="nx">args</span><span class="p">.</span><span class="nx">val</span><span class="p">);</span>
</span><span class='line'>            <span class="nx">_private</span><span class="p">.</span><span class="nx">get</span><span class="p">();</span>
</span><span class='line'>            <span class="k">if</span> <span class="p">(</span><span class="nx">args</span><span class="p">.</span><span class="nx">run</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>                <span class="nx">_private</span><span class="p">.</span><span class="nx">run</span><span class="p">();</span>
</span><span class='line'>            <span class="p">}</span>
</span><span class='line'>        <span class="p">}}</span>
</span><span class='line'><span class="p">}());</span>
</span><span class='line'><span class="nx">module</span><span class="p">.</span><span class="nx">facade</span><span class="p">({</span><span class="nx">run</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span><span class="nx">val</span><span class="o">:</span> <span class="mi">10</span><span class="p">});</span> <span class="c1">//outputs current value: 10, running</span>
</span></code></pre></td></tr></table></div></figure>


<h2>3. Mediator Pattern</h2>

<p>Encapsulates how disparate modules interact with each other by acting as an intermediary</p>

<h3>Mediator Implementation</h3>

<p>One possible implementation, exposing publish and subscribe capabilities.</p>

<figure class='code'> <div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
<span class='line-number'>13</span>
<span class='line-number'>14</span>
<span class='line-number'>15</span>
<span class='line-number'>16</span>
<span class='line-number'>17</span>
<span class='line-number'>18</span>
<span class='line-number'>19</span>
<span class='line-number'>20</span>
<span class='line-number'>21</span>
<span class='line-number'>22</span>
<span class='line-number'>23</span>
<span class='line-number'>24</span>
<span class='line-number'>25</span>
<span class='line-number'>26</span>
<span class='line-number'>27</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="kd">var</span> <span class="nx">mediator</span> <span class="o">=</span> <span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
</span><span class='line'>    <span class="kd">var</span> <span class="nx">subscribe</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">channel</span><span class="p">,</span> <span class="nx">fn</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>        <span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">mediator</span><span class="p">.</span><span class="nx">channels</span><span class="p">[</span><span class="nx">channel</span><span class="p">])</span> <span class="nx">mediator</span><span class="p">.</span><span class="nx">channels</span><span class="p">[</span><span class="nx">channel</span><span class="p">]</span> <span class="o">=</span> <span class="p">[];</span>
</span><span class='line'>        <span class="nx">mediator</span><span class="p">.</span><span class="nx">channels</span><span class="p">[</span><span class="nx">channel</span><span class="p">].</span><span class="nx">push</span><span class="p">({</span> <span class="nx">context</span><span class="o">:</span> <span class="k">this</span><span class="p">,</span> <span class="nx">callback</span><span class="o">:</span> <span class="nx">fn</span> <span class="p">});</span>
</span><span class='line'>        <span class="k">return</span> <span class="k">this</span><span class="p">;</span>
</span><span class='line'>    <span class="p">},</span>
</span><span class='line'>
</span><span class='line'>    <span class="nx">publish</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">channel</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>        <span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">mediator</span><span class="p">.</span><span class="nx">channels</span><span class="p">[</span><span class="nx">channel</span><span class="p">])</span> <span class="k">return</span> <span class="kc">false</span><span class="p">;</span>
</span><span class='line'>        <span class="kd">var</span> <span class="nx">args</span> <span class="o">=</span> <span class="nb">Array</span><span class="p">.</span><span class="nx">prototype</span><span class="p">.</span><span class="nx">slice</span><span class="p">.</span><span class="nx">call</span><span class="p">(</span><span class="nx">arguments</span><span class="p">,</span> <span class="mi">1</span><span class="p">);</span>
</span><span class='line'>        <span class="k">for</span> <span class="p">(</span><span class="kd">var</span> <span class="nx">i</span> <span class="o">=</span> <span class="mi">0</span><span class="p">,</span> <span class="nx">l</span> <span class="o">=</span> <span class="nx">mediator</span><span class="p">.</span><span class="nx">channels</span><span class="p">[</span><span class="nx">channel</span><span class="p">].</span><span class="nx">length</span><span class="p">;</span> <span class="nx">i</span> <span class="o">&lt;</span> <span class="nx">l</span><span class="p">;</span> <span class="nx">i</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>            <span class="kd">var</span> <span class="nx">subscription</span> <span class="o">=</span> <span class="nx">mediator</span><span class="p">.</span><span class="nx">channels</span><span class="p">[</span><span class="nx">channel</span><span class="p">][</span><span class="nx">i</span><span class="p">];</span>
</span><span class='line'>            <span class="nx">subscription</span><span class="p">.</span><span class="nx">callback</span><span class="p">.</span><span class="nx">apply</span><span class="p">(</span><span class="nx">subscription</span><span class="p">.</span><span class="nx">context</span><span class="p">,</span> <span class="nx">args</span><span class="p">);</span>
</span><span class='line'>        <span class="p">}</span>
</span><span class='line'>        <span class="k">return</span> <span class="k">this</span><span class="p">;</span>
</span><span class='line'>    <span class="p">};</span>
</span><span class='line'>
</span><span class='line'>    <span class="k">return</span> <span class="p">{</span>
</span><span class='line'>        <span class="nx">channels</span><span class="o">:</span> <span class="p">{},</span>
</span><span class='line'>        <span class="nx">publish</span><span class="o">:</span> <span class="nx">publish</span><span class="p">,</span>
</span><span class='line'>        <span class="nx">subscribe</span><span class="o">:</span> <span class="nx">subscribe</span><span class="p">,</span>
</span><span class='line'>        <span class="nx">installTo</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">obj</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>            <span class="nx">obj</span><span class="p">.</span><span class="nx">subscribe</span> <span class="o">=</span> <span class="nx">subscribe</span><span class="p">;</span>
</span><span class='line'>            <span class="nx">obj</span><span class="p">.</span><span class="nx">publish</span> <span class="o">=</span> <span class="nx">publish</span><span class="p">;</span>
</span><span class='line'>        <span class="p">}</span>
</span><span class='line'>    <span class="p">};</span>
</span><span class='line'><span class="p">}());</span>
</span></code></pre></td></tr></table></div></figure>


<h3>Example</h3>

<p>Usage of the implementation from the last slide.</p>

<figure class='code'> <div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
<span class='line-number'>13</span>
<span class='line-number'>14</span>
<span class='line-number'>15</span>
<span class='line-number'>16</span>
<span class='line-number'>17</span>
<span class='line-number'>18</span>
<span class='line-number'>19</span>
<span class='line-number'>20</span>
<span class='line-number'>21</span>
<span class='line-number'>22</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="c1">//Pub/sub on a centralized mediator</span>
</span><span class='line'>
</span><span class='line'><span class="nx">mediator</span><span class="p">.</span><span class="nx">name</span> <span class="o">=</span> <span class="s2">&quot;tim&quot;</span><span class="p">;</span>
</span><span class='line'><span class="nx">mediator</span><span class="p">.</span><span class="nx">subscribe</span><span class="p">(</span><span class="s1">&#39;nameChange&#39;</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">arg</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>    <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">name</span><span class="p">);</span>
</span><span class='line'>    <span class="k">this</span><span class="p">.</span><span class="nx">name</span> <span class="o">=</span> <span class="nx">arg</span><span class="p">;</span>
</span><span class='line'>    <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">name</span><span class="p">);</span>
</span><span class='line'><span class="p">});</span>
</span><span class='line'>
</span><span class='line'><span class="nx">mediator</span><span class="p">.</span><span class="nx">publish</span><span class="p">(</span><span class="s1">&#39;nameChange&#39;</span><span class="p">,</span> <span class="s1">&#39;david&#39;</span><span class="p">);</span> <span class="c1">//tim, david</span>
</span><span class='line'>
</span><span class='line'><span class="c1">//Pub/sub via third party mediator</span>
</span><span class='line'>
</span><span class='line'><span class="kd">var</span> <span class="nx">obj</span> <span class="o">=</span> <span class="p">{</span><span class="nx">name</span><span class="o">:</span> <span class="s1">&#39;sam&#39;</span><span class="p">};</span>
</span><span class='line'><span class="nx">mediator</span><span class="p">.</span><span class="nx">installTo</span><span class="p">(</span><span class="nx">obj</span><span class="p">);</span>
</span><span class='line'><span class="nx">obj</span><span class="p">.</span><span class="nx">subscribe</span><span class="p">(</span><span class="s1">&#39;nameChange&#39;</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">arg</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>    <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">name</span><span class="p">);</span>
</span><span class='line'>    <span class="k">this</span><span class="p">.</span><span class="nx">name</span> <span class="o">=</span> <span class="nx">arg</span><span class="p">;</span>
</span><span class='line'>    <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">name</span><span class="p">);</span>
</span><span class='line'><span class="p">});</span>
</span><span class='line'>
</span><span class='line'><span class="nx">obj</span><span class="p">.</span><span class="nx">publish</span><span class="p">(</span><span class="s1">&#39;nameChange&#39;</span><span class="p">,</span> <span class="s1">&#39;john&#39;</span><span class="p">);</span> <span class="c1">//sam, john</span>
</span></code></pre></td></tr></table></div></figure>


<p><em>Form http://www.slideshare.net/AddyOsmani/futureproofing-your-javascript-apps-compact-edition</em></p>
]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[Installing Rails on  Mac OS X]]></title>
    <link href="http://akai.github.com/blog/bootstrap/"/>
    <updated>2011-09-10T14:47:00+08:00</updated>
    <id>http://akai.github.com/blog/bootstrap</id>
    <content type="html"><![CDATA[<ol>
    <li>
        <p>Run software update</p>
    </li>
    <li>
        <p>Form Mac App Store download &amp; install <a href="http://itunes.apple.com/us/app/xcode/id448457090?mt=12">XCode</a></p>
    </li>
    <li>
        <p>Install Homebrew</p>

<figure class='code'> <div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class='bash'><span class='line'>/usr/bin/ruby -e <span class="s2">&quot;$(curl -fsSL https://raw.github.com/gist/323731)&quot;</span>
</span></code></pre></td></tr></table></div></figure>

    </li>
    <li>
        <p>Install Git</p>

<figure class='code'> <div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class='bash'><span class='line'>brew install git
</span></code></pre></td></tr></table></div></figure>

    </li>
    <li>
        <p>Install rbenv &amp; ruby-build</p>

<figure class='code'> <div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
</pre></td><td class='code'><pre><code class='bash'><span class='line'>brew install rbenv
</span><span class='line'>brew install ruby-build
</span></code></pre></td></tr></table></div></figure>

    </li>
    <li>
        <p>Install Ruby</p>

<figure class='code'> <div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
</pre></td><td class='code'><pre><code class='bash'><span class='line'>rbenv install 1.9.2-p290
</span><span class='line'>rbenv global 1.9.2-p290
</span></code></pre></td></tr></table></div></figure>

    </li>
    <li>
        <p>Install MySQL</p>

<figure class='code'> <div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class='bash'><span class='line'>brew install mysql
</span></code></pre></td></tr></table></div></figure>

    </li>
    <li>
        <p>Install Rails</p>

<figure class='code'> <div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class='bash'><span class='line'>gem install rails --no-rdoc --no-ri
</span></code></pre></td></tr></table></div></figure>

    </li>
    <li>
        <p>Enjoy!</p>
    </li>
</ol>



]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[用 rbenv 来管理 Ruby 的安装]]></title>
    <link href="http://akai.github.com/blog/rbenv/"/>
    <updated>2011-08-22T10:43:00+08:00</updated>
    <id>http://akai.github.com/blog/rbenv</id>
    <content type="html"><![CDATA[<p>如果你 Ruby 开发者，应该知道用 <a href="http://beginrescueend.com/">RVM</a> 来安装/管理 Ruby 版本，同时也能用它的 gemset 功能来管理各个工程的 gems。</p>

<p>最近，<a href="http://37signals.com">37Signals</a> 的 <a href="http://sstephenson.us/">Sam Stephenson</a> 也创建了一个类似的软件，叫做 <a href="https://github.com/sstephenson/rbenv">rbenv</a>。不过它功能非常简单，简单到只是用来管理 Ruby 版本，连安装的功能也没提供。</p>

<p><em>注意：rbenv 和 RVM 是不兼容的，所以安装 rbenv 之前要先把 RVM 卸载了。</em></p>

<h2>1 安装</h2>

<h3>1.1 安装 rbenv</h3>

<p>rbenv 的源代码托管在 <a href="http://github.com">GitHub</a> 下，安装只需要简单的 <code>clone</code> 下来就可以来。</p>

<p>把 rbenv clone 到 <code>~/.rbenv</code> 下：</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class='bash'><span class='line'>git clone https://github.com/sstephenson/rbenv ~/.rbenv
</span></code></pre></td></tr></table></div></figure>


<p>然后让 shell 加载 rbenv：</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
</pre></td><td class='code'><pre><code class='bash'><span class='line'><span class="nb">echo</span> <span class="s1">&#39;export PATH=&quot;$HOME/.rbenv/bin:$PATH&quot;&#39;</span> &gt;&gt; ~/.bash_profile
</span><span class='line'><span class="nb">echo</span> <span class="s1">&#39;eval &quot;$(rbenv init -)&quot;&#39;</span> &gt;&gt; ~/.bash_profile
</span></code></pre></td></tr></table></div></figure>


<p><em>如果用 Zsh，就用 <code>~/.zshrc</code> 替换 <code>~/.bash_profile</code>。</em></p>

<p>重启 shell， 或者运行 <code>exec $SHELL</code>，就可以开始用 rbenv 了。</p>

<h3>1.2 安装 ruby-build</h3>

<p>由于 rbenv 本身并不能用来安装 Ruby，为了方便我们还需要用到 <a href="https://github.com/sstephenson/ruby-build">ruby-build</a>，它的安装也非常简单：</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
</pre></td><td class='code'><pre><code class='bash'><span class='line'>git clone git://github.com/sstephenson/ruby-build.git
</span><span class='line'><span class="nb">cd </span>ruby-build
</span><span class='line'>./install.sh
</span></code></pre></td></tr></table></div></figure>


<h3>1.3 安装 Ruby</h3>

<p>安装好 ruby-build 后，就可以用简单的一条命令来安装 Ruby：</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class='bash'><span class='line'>ruby-build 1.9.3-p0 ~/.rbenv/versions/1.9.3-p0
</span></code></pre></td></tr></table></div></figure>


<p><em>注意：Ruby 需要安装在 <code>~/.rbenv/versions/</code> 下</em></p>

<p>同时 ruby-build 还提供了一个 <code>rbenv install</code> 命令给 rbenv，所以上面的命令可以变成：</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class='bash'><span class='line'>rbenv install 1.9.3-p0
</span></code></pre></td></tr></table></div></figure>


<h2>2 rbenv 的常用命令</h2>

<p>rbenv 提供了很多命令，这里列几个常用的：</p>

<h3>2.1 rbenv global</h3>

<p>来用设置 Ruby 的全局版本。</p>

<p>上面安装好 Ruby 后，还需要运行一下这条命令：</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class='bash'><span class='line'>rbenv global 1.9.3-p0
</span></code></pre></td></tr></table></div></figure>


<p>这样默认就会用 1.9.3-p0 了。但如果当前目录下有 <code>.rbenv-version</code> 文件，就会用文件里显示的版本。</p>

<h3>2.2 rbenv local</h3>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class='bash'><span class='line'>rbenv <span class="nb">local </span>1.9.2-p290
</span></code></pre></td></tr></table></div></figure>


<p>会在当前目录下生成 <code>.rbenv-version</code> 文件，此文件会覆盖 rbenv global 设定。</p>

<p>如果想取消的话，可以这样：</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class='bash'><span class='line'>rbenv <span class="nb">local</span> --unset
</span></code></pre></td></tr></table></div></figure>


<h3>2.3  rbenv versions</h3>

<p>显示所有版本，前面加 * 的为当前激活的版本。</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class='bash'><span class='line'>rbenv versions
</span></code></pre></td></tr></table></div></figure>


<h3>2.4  rbenv rehash</h3>

<p>每当安装新的 Ruby 版本，或 gem 都要运行一下，不然有可能会出现新安装的不起作用的现象：</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class='bash'><span class='line'>rbenv rehash
</span></code></pre></td></tr></table></div></figure>


<h3>2.5 其它</h3>

<p>当然还有其它命令，具体可以用 <code>rbenv help</code> 查看。</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class='bash'><span class='line'>rbenv <span class="nb">help</span>
</span></code></pre></td></tr></table></div></figure>


<h2>3 最后</h2>

<p>虽然 rbenv 提供的功能非常少，但对我来说者正是我需要的，less is more，其它的功能我根本不需要。</p>

<p>喜欢用 RVM gemset 的人，可以安装 <a href="https://github.com/jamis/rbenv-gemset">rbenv-gemset</a> 插件来实现同样的功能。但还是用 <a href="http://gembundler.com/">Bundler</a> 来管理应用依赖吧。</p>

<h3>更新</h3>

<p>如果你有安装 <a href="http://mxcl.github.com/homebrew/">Homebrew</a> 的话，可以用以下命令来安装 rbenv 和 ruby-build：</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
</pre></td><td class='code'><pre><code class='bash'><span class='line'>brew update
</span><span class='line'>brew install rbenv
</span><span class='line'>brew install ruby-build
</span></code></pre></td></tr></table></div></figure>

]]></content>
  </entry>
  
</feed>