atom.xml

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

  <title><![CDATA[Feng erdong's Blog]]></title>
  <link href="http://fedcuit.github.com/atom.xml" rel="self"/>
  <link href="http://fedcuit.github.com/"/>
  <updated>2016-03-14T22:27:33+08:00</updated>
  <id>http://fedcuit.github.com/</id>
  <author>
    <name><![CDATA[Feng erdong]]></name>
    <email><![CDATA[fedcuit@gmail.com]]></email>
  </author>
  <generator uri="http://octopress.org/">Octopress</generator>

  
  <entry>
    <title type="html"><![CDATA[在JS string.replace() 中使用捕获组]]></title>
    <link href="http://fedcuit.github.com/blog/2016/03/14/js-string-replace/"/>
    <updated>2016-03-14T21:34:00+08:00</updated>
    <id>http://fedcuit.github.com/blog/2016/03/14/js-string-replace</id>
    <content type="html"><![CDATA[<p>上周在写代码的时候要在<code>componentWillUpdate</code>方法中判断一下当前<code>state</code>/<code>props</code>有没有改变, 这个判断其实跟<code>PureRenderMixin</code>干的是完全一样的事情, 但是<code>PureRenderMixin</code>是在<code>shouldComponentUpdate</code>这个life cycle method里执行的, 所以并不能直接拿来用. 跑去看了一下<code>PureRenderMixin</code>的实现, 发现它对<code>state</code>/<code>props</code>的比较是依赖于一个<code>shallowEqual</code>方法, 而这个方法在<code>fbjs</code>里面, <a href="https://github.com/facebook/fbjs">fbjs</a>是Facebook维护的一个实用类库的集合, 所以今天决定读一读这个项目, 希望能从中学到一些新的东西.</p>

<p>那先来分享一下学到的第一个新东西吧.</p>

<h2><code>String.replace()</code></h2>

<p>之前对这个函数的认识比较简单, 只知道可能将指定的字符串或pattern替换成另外一个字符串, 如:</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='javascript'><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;AlphaGo vs Lee Sedol&#39;</span><span class="p">.</span><span class="nx">replace</span><span class="p">(</span><span class="s1">&#39;Go&#39;</span><span class="p">,</span> <span class="s1">&#39;Google&#39;</span><span class="p">))</span>
</span><span class='line'><span class="c1">// &quot;AlphaGoogle vs Lee Sedol&quot;</span>
</span></code></pre></td></tr></table></div></figure>


<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>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
</pre></td><td class='code'><pre><code class='javascript'><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;188-0000-0000&#39;</span><span class="p">.</span><span class="nx">replace</span><span class="p">(</span><span class="sr">/-/</span><span class="p">,</span> <span class="s1">&#39;+&#39;</span><span class="p">))</span>
</span><span class='line'><span class="c1">// &quot;188+0000+0000&quot;</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;188-0000-0000&#39;</span><span class="p">.</span><span class="nx">replace</span><span class="p">(</span><span class="sr">/-/g</span><span class="p">,</span> <span class="s1">&#39;+&#39;</span><span class="p">))</span>
</span><span class='line'><span class="c1">// &quot;188+0000+0000&quot;</span>
</span></code></pre></td></tr></table></div></figure>


<p>需要注意的是, 正则表达式没有使用<code>g</code>选项的时候, <code>replace</code>只会替换第一处匹配.</p>

<p>今天学到的高级用法是<code>replace</code>函数还可以用一个函数来返回替换量, 而且这个函数的参数是整个匹配还有这个匹配中的所有捕获组, 比如<code>fbjs</code>中的<a href="https://github.com/facebook/fbjs/blob/master/src/core/camelize.js#L24">camelize</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>
<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='javascript'><span class='line'><span class="kr">const</span> <span class="nx">_hyphenPattern</span> <span class="o">=</span> <span class="sr">/-(.)/g</span><span class="p">;</span>
</span><span class='line'>
</span><span class='line'><span class="cm">/**</span>
</span><span class='line'><span class="cm"> * Camelcases a hyphenated string, for example:</span>
</span><span class='line'><span class="cm"> *</span>
</span><span class='line'><span class="cm"> *   &gt; camelize(&#39;background-color&#39;)</span>
</span><span class='line'><span class="cm"> *   &lt; &quot;backgroundColor&quot;</span>
</span><span class='line'><span class="cm"> *</span>
</span><span class='line'><span class="cm"> * @param {string} string</span>
</span><span class='line'><span class="cm"> * @return {string}</span>
</span><span class='line'><span class="cm"> */</span>
</span><span class='line'><span class="kd">function</span> <span class="nx">camelize</span><span class="p">(</span><span class="nx">string</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>  <span class="k">return</span> <span class="nx">string</span><span class="p">.</span><span class="nx">replace</span><span class="p">(</span><span class="nx">_hyphenPattern</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">_</span><span class="p">,</span> <span class="nx">character</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>    <span class="k">return</span> <span class="nx">character</span><span class="p">.</span><span class="nx">toUpperCase</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>


<p>这里 <code>_hyphenPattern</code> 用来匹配连字符写法, 并将连字符写法替换成驼峰写法, 我们无法通过简单将<code>-</code>替换成空白字符来实现, 因为我们还需要将<code>-</code>后面的字母大写, 这个时候可以接受捕获组的函数上可以出场了. 在 <code>_hyphenPattern</code> 的定义里面, <code>-</code>后面的那个字母是被定义成一个捕获组, 它会作为第二个参数传入replacement function(第一个参数是匹配的字符串), replacement function将这个字母大写之后返回, 就实现了将<code>-</code> + 任意字母 替换成了一个大写之后的字母的.</p>
]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[JSX里的那些个坑]]></title>
    <link href="http://fedcuit.github.com/blog/2015/07/23/jsx-gotchas/"/>
    <updated>2015-07-23T21:52:00+08:00</updated>
    <id>http://fedcuit.github.com/blog/2015/07/23/jsx-gotchas</id>
    <content type="html"><![CDATA[<p>最近在项目上使用<code>Backbone</code> + <code>React</code>作为前端框架, Backbone主要是用来作为<code>Model</code>来与后台的Restful API进行交互, React则负责<code>View</code>, 也算是发挥了各自的优势: Backbone的Model和Collection只需要指定对应Resource的url, 就可以直接读取/更新/删除记录, 而不需要手动去发送对应的AJAX请求, 另外借助于寄生在Model/Collection上的<code>underscore</code>方法, 操作数据也很方便; React接收Backbone的Model/Collection作为<code>state</code>或<code>props</code>, 通过<code>Virtual DOM</code>来高效的DOM更新, 与其他的View技术相比较, React功能更单一, 概念更少更易理解, 而且有更高的性能. 这一切看下来都是那么的美好, 但是使用React还是在它的代价的, 代价就是<code>JSX</code>.</p>

<p>简单讲, <code>JSX</code>也就是一段写在JavaScript中的XML, 它是由React提供的一种更简洁的生成Virtual DOM的方法, 通过使用<code>JSX</code>我们可以像书写<code>HTML</code>一样来编写React Component, 然后再使用对应的编译器将<code>JSX</code>定义的Component Tree<em>翻译</em>成不易读的<code>React.createElement(...)</code> (Virtual DOM就是由<code>React.createElemnt()</code>创建出来的)</p>

<p>正是因为<code>JSX</code>代码会最终被翻译成对应的Javascript代码, 所以在书写<code>JSX</code>代码的时候, 虽然我们说他的形式像是<code>HTML</code>一样, 但是我们并不能完全遵照HTML规范来书写, 在<code>JSX</code>中使用HTML的属性还是有一些限制(坑)的:</p>

<h2>避免出现Javascript关键字</h2>

<p>因为<code>JSX</code>会被编译成JS代码供浏览器执行, 所以如果在<code>JSX</code>中使用了Javascript的关键字的话, 那么很可能导致生成的代码无法被正确解释.(在IE上这个问题格外严重, 但在强大的Chrome上, 这种情况可以被很智能地处理).</p>

<p>一看下面的例子就明白了:</p>

<p>这段<code>JSX</code>代码生成一个表单, 其中有一个Label和对应的Input用来输入用户的名字,</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>
<span class='line-number'>4</span>
</pre></td><td class='code'><pre><code class='html'><span class='line'><span class="nt">&lt;form&gt;</span>
</span><span class='line'>   <span class="nt">&lt;label</span> <span class="na">for=</span><span class="s">&quot;name&quot;</span><span class="nt">&gt;</span>Your name:<span class="nt">&lt;/label&gt;</span>
</span><span class='line'>   <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">&quot;text&quot;</span><span class="nt">/&gt;</span>
</span><span class='line'><span class="nt">&lt;/form&gt;</span>
</span></code></pre></td></tr></table></div></figure>


<p>根据它编译生成的Javascript代码长这个样子:</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>
<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>
</pre></td><td class='code'><pre><code class='javascript'><span class='line'><span class="nx">React</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="s2">&quot;form&quot;</span><span class="p">,</span> <span class="kc">null</span><span class="p">,</span>
</span><span class='line'>    <span class="nx">React</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="s2">&quot;label&quot;</span><span class="p">,</span> <span class="p">{</span>
</span><span class='line'>        <span class="k">for</span><span class="o">:</span> <span class="s2">&quot;name&quot;</span>
</span><span class='line'>    <span class="p">},</span> <span class="s2">&quot;Your name:&quot;</span><span class="p">),</span>
</span><span class='line'>    <span class="nx">React</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="s2">&quot;input&quot;</span><span class="p">,</span> <span class="p">{</span>
</span><span class='line'>        <span class="nx">type</span><span class="o">:</span> <span class="s2">&quot;text&quot;</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>


<p>通过比较我们基本上可以总结出这个<em>翻译</em>的过程, 对于一个<code>JSX Tag</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>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
</pre></td><td class='code'><pre><code class='html'><span class='line'><span class="nt">&lt;tagName</span> <span class="na">attr1=</span><span class="s">val1</span> <span class="na">attr2=</span><span class="s">val2</span><span class="nt">&gt;</span>
</span><span class='line'>  [childrenComponents]
</span><span class='line'><span class="nt">&lt;/tagName&gt;</span>
</span></code></pre></td></tr></table></div></figure>


<p>它生成的Javascript应该是:</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='javascript'><span class='line'><span class="nx">React</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="s2">&quot;tagName&quot;</span><span class="p">,</span> <span class="p">{</span><span class="nx">attr1</span><span class="o">:</span> <span class="nx">val1</span><span class="p">,</span> <span class="nx">attr2</span><span class="o">:</span> <span class="nx">val2</span><span class="p">},</span> <span class="p">[</span><span class="nx">childrenReactComponents</span><span class="p">]);</span>
</span></code></pre></td></tr></table></div></figure>


<p>可以看出其中<code>TagName</code>是最安全的, 因为它在生成的JS中是一个字符串, 但是HTML Attribute就没有这么幸运了, 如果它碰巧是一个Javascript关键字, 那么恭喜你, 你掉到坑里去了. 比如上例中<code>label</code>上面的<code>for</code>属性在被编译后的Javascript代码中就很可能被浏览器当作是<em>循环</em>的那个for, 从而报出一个语法错误出来.</p>

<p>为了解决类似这种问题, React为这些&#8221;不幸&#8221;的属性定义了对应的&#8221;替身&#8221;, 它们中的一些是(不完全版):</p>

<table>
<thead>
<tr>
<th align="left">Native HTML Attribute </th>
<th align="left"> React Version </th>
</tr>
</thead>
<tbody>
<tr>
<td align="left"><code>for</code>                 </td>
<td align="left"> <code>htmlFor</code>       </td>
</tr>
<tr>
<td align="left"><code>class</code>               </td>
<td align="left"> <code>className</code>       </td>
</tr>
</tbody>
</table>


<h2>另类的inlineStyle</h2>

<p>inline style估计是最让React的初学者头痛的问题了, 如果我们按照HTML规范来使用的话, 是无法将想要的样式apply到元素上的, 至于为什么, 我们看一下由JSX编译成的JS代码就明白了:</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='html'><span class='line'><span class="nt">&lt;div</span> <span class="na">style=</span><span class="s">&quot;color: yellow&quot;</span><span class="nt">&gt;</span>Hello World<span class="nt">&lt;/div&gt;</span>
</span></code></pre></td></tr></table></div></figure>


<p>我们在JSX中定义了一个DIV元素, 并且想通过inline style将它里面的文字颜色设为<em>yellow</em>, 然而这个DIV甚至都无法被渲染到页面中, 因为React认为它是不合法的:</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='javascript'><span class='line'><span class="nx">React</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="s2">&quot;div&quot;</span><span class="p">,</span> <span class="p">{</span><span class="nx">style</span><span class="o">:</span> <span class="s2">&quot;color: yellow&quot;</span><span class="p">},</span> <span class="s2">&quot;Hello World&quot;</span><span class="p">);</span>
</span></code></pre></td></tr></table></div></figure>


<p>在上面这段生成的JS里面, 用于设置<code>style</code>的值是一个字符串, 这显然是无法工作的, 因为<code>style</code>这个属性与其他属性不一样, 它比较特殊, 一般的属性的值都是一个普通的字符串, 比如<code>type="text"</code>, <code>name="fieldName"</code>, 这些属性值都是可以被浏览器直接使用的, 而style它传递的是一组样式属性, 它在这里已经不是一般的字符串, 而是可以被解析的一个样式对象, 说到这里, 估计你也猜到了, 我们不能直接使用一个普通字符串给style, 我们要传递的应该是一个JS对象(JSON)才对:</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='html'><span class='line'><span class="nt">&lt;div</span> <span class="na">style=</span><span class="s">&quot;{color: yellow}&quot;</span><span class="nt">&gt;</span>Hello World<span class="nt">&lt;/div&gt;</span>
</span></code></pre></td></tr></table></div></figure>


<p>但是将代码改成这样之后还是无法将这个DIV渲染出来, 再次查看生成的JS代码:</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='javascript'><span class='line'><span class="nx">React</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="s2">&quot;div&quot;</span><span class="p">,</span> <span class="p">{</span><span class="nx">style</span><span class="o">:</span> <span class="s2">&quot;{color: yellow}&quot;</span><span class="p">},</span> <span class="s2">&quot;Hello World&quot;</span><span class="p">);</span>
</span></code></pre></td></tr></table></div></figure>


<p>style的值还是一个字符串! 这里正好引出了JSX的一条很重要的规则, 即被放在<code>{}</code>中的都作为Javascript代码来处理, 但是如果<code>{}</code>被引号包围起来, 那么它当作一个字符串处理. 这可能是JSX让人感觉比较困惑的地方, 当在JSX中使用<code>{}</code>来引用JS变量的时候, 很容易让人感觉<code>JSX</code>似乎是模板引擎, 而对于模板引擎来说(比如Freemarker, JSP等), 它们会将所模板中所有的变量都替换成对应的值, 不管它们是不是在一对双引号中:</p>

<p>如在Freemarker中, 如果变量 <code>userName</code>的值是 &#8216;Erdong FENG&#8217;, 使用的模板是</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='html'><span class='line'><span class="nt">&lt;div</span> <span class="na">data-name=</span><span class="s">&quot;${userName}&quot;</span><span class="nt">&gt;</span>Welcome to our website<span class="nt">&lt;/div&gt;</span>
</span></code></pre></td></tr></table></div></figure>


<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='html'><span class='line'><span class="nt">&lt;div</span> <span class="na">data-name=</span><span class="s">&quot;Erdong FENG&quot;</span><span class="nt">&gt;</span>Welcome to our website<span class="nt">&lt;/div&gt;</span>
</span></code></pre></td></tr></table></div></figure>


<p>然而在JSX中并不是这样的, 因为<em><code>JSX不是模板引擎</code></em> (当然了, 大多数时候JSX表现的还是像一个模板引擎, 比如在一个DIV的文字结点中, 但是在一个Tag的属性值中使用变量的时候, 情况完全不一样)</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='html'><span class='line'><span class="nt">&lt;div</span> <span class="na">data-name=</span><span class="s">&quot;{userName}&quot;</span><span class="nt">&gt;</span>Welcome to our website<span class="nt">&lt;/div&gt;</span>
</span></code></pre></td></tr></table></div></figure>


<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='javascript'><span class='line'><span class="nx">React</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="s2">&quot;div&quot;</span><span class="p">,</span> <span class="p">{</span><span class="s2">&quot;data-name&quot;</span><span class="o">:</span> <span class="s2">&quot;{userName}&quot;</span><span class="p">},</span> <span class="s2">&quot;Welcome to our website&quot;</span><span class="p">);</span>
</span></code></pre></td></tr></table></div></figure>


<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='html'><span class='line'><span class="nt">&lt;div</span> <span class="na">data-name=</span><span class="s">&quot;{userName}&quot;</span><span class="nt">&gt;</span>Welcome to our website<span class="nt">&lt;/div&gt;</span>
</span></code></pre></td></tr></table></div></figure>


<p>当然了, 我们在innerHTML的位置还是可以将JSX当作模板引擎来使用的:</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='html'><span class='line'><span class="nt">&lt;div&gt;</span>Welcome to our website, &quot;{userName}&quot;<span class="nt">&lt;/div&gt;</span>
</span></code></pre></td></tr></table></div></figure>


<p>最终的JS跟HTML如下:</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='javascript'><span class='line'><span class="nx">React</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="s2">&quot;div&quot;</span><span class="p">,</span> <span class="kc">null</span><span class="p">,</span> <span class="s2">&quot;Welcome to our website, \&quot;&quot;</span><span class="p">,</span> <span class="nx">userName</span><span class="p">,</span> <span class="s2">&quot;\&quot;&quot;</span><span class="p">);</span>
</span></code></pre></td></tr></table></div></figure>


<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>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
</pre></td><td class='code'><pre><code class='html'><span class='line'><span class="nt">&lt;div&gt;</span>
</span><span class='line'>    <span class="nt">&lt;span&gt;</span>Welcome to our website, &quot;<span class="nt">&lt;/span&gt;</span>
</span><span class='line'>    <span class="nt">&lt;span&gt;</span>Erdong FENG<span class="nt">&lt;/span&gt;</span>
</span><span class='line'>    <span class="nt">&lt;span&gt;</span>&quot;<span class="nt">&lt;/span&gt;</span>
</span><span class='line'><span class="nt">&lt;/div&gt;</span>
</span></code></pre></td></tr></table></div></figure>


<p>一下子跑得有点偏了, 再回顾一下, 在JSX中, <code>{}</code>中的东西是当作JS来处理的, 因为在生成的HTML中这部分会被对应的JS表达式的值替换, 但是如果是在属性值中使用<code>{}</code>, 那么就一定不能用引号将它括起来了, 不然的话它就会当作字符串来处理!</p>

<p>再回到inline style的问题上, 基于上面的分析, 我们这次不给属性值加引号了</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='html'><span class='line'><span class="nt">&lt;div</span> <span class="na">style=</span><span class="s">{color:</span> <span class="na">yellow</span><span class="err">}</span><span class="nt">&gt;</span>Welcome to our website<span class="nt">&lt;/div&gt;</span>;
</span></code></pre></td></tr></table></div></figure>


<p>再编译一次, 这次直接就语法错误了, 因为<code>{}</code>里面的部分是被当作Javscript来处理的, 而<code>color: yellow</code>根本不是合法的JS语句, 再回顾一下, 我们这里需要的属性值是一个JSON, 那么应该是<code>{color: yellow}</code>才对, 再将这个JSON放到<code>{}</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='html'><span class='line'><span class="nt">&lt;div</span> <span class="na">style=</span><span class="s">{</span> <span class="err">{</span><span class="na">color:</span> <span class="na">yellow</span><span class="err">}</span> <span class="err">}</span><span class="nt">&gt;</span>Welcome to our website<span class="nt">&lt;/div&gt;</span>
</span></code></pre></td></tr></table></div></figure>


<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='javascript'><span class='line'><span class="nx">React</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="s2">&quot;div&quot;</span><span class="p">,</span> <span class="p">{</span><span class="nx">style</span><span class="o">:</span> <span class="p">{</span><span class="nx">color</span><span class="o">:</span> <span class="nx">yellow</span><span class="p">}},</span> <span class="s2">&quot;Welcome to our website&quot;</span><span class="p">);</span>
</span></code></pre></td></tr></table></div></figure>


<p>怎么还是有问题?! 原来是因为yellow被当作一个JS变量来解析, 但是却没有对应的变量存在, 所以这时候又引出了在JSX中使用inline style的另一条规则, 对于这些非字面量的值, 需要将他们用引号括起来, 表示他们是字符串:</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='html'><span class='line'><span class="nt">&lt;div</span> <span class="na">style=</span><span class="s">{</span> <span class="err">{</span><span class="na">color:</span> <span class="err">&#39;</span><span class="na">yellow</span><span class="err">&#39;}</span> <span class="err">}</span><span class="nt">&gt;</span>Welcome to our website<span class="nt">&lt;/div&gt;</span>
</span></code></pre></td></tr></table></div></figure>


<p>这样就可以了!</p>

<p>除此之外, 还有另一个需要注意的地方, 如果style的属性名中含有连字符<code>-</code>, 也需要做适当转换的, 因为属性名在编译后的JS代码中是JSON中的key, key要适合JS的变量名的定义, 因此是不能使用连字符<code>-</code>的, React的解决办法是使用它的camelPattern, 好的, 讲完了.</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='html'><span class='line'><span class="nt">&lt;div</span> <span class="na">style=</span><span class="s">{</span> <span class="err">{</span><span class="na">color:</span> <span class="err">&#39;</span><span class="na">yellow</span><span class="err">&#39;,</span> <span class="na">backgroundColor:</span> <span class="err">&#39;</span><span class="na">green</span><span class="err">&#39;}</span> <span class="err">}</span><span class="nt">&gt;</span>Welcome to our website<span class="nt">&lt;/div&gt;</span>
</span></code></pre></td></tr></table></div></figure>

]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[为什么你的Angular代码很难测试]]></title>
    <link href="http://fedcuit.github.com/blog/2015/06/11/angular-unit-test/"/>
    <updated>2015-06-11T15:56:00+08:00</updated>
    <id>http://fedcuit.github.com/blog/2015/06/11/angular-unit-test</id>
    <content type="html"><![CDATA[<p>Angular推出有好几年的时候了, 跟其他的MV*框架相比, 它的<code>双向绑定</code>, <code>无须显式声明Model</code>, <code>模块管理</code>, <code>依赖注入</code>等特点都给Web应用开发带来了极大的便利, 另外, 借助于它众多强大的原生<code>directive</code>, 我们几乎可以避免麻烦的DOM操作了, 除了这些, Angular还有一个很大的亮点, 那就是高度的可测试性.</p>

<p>今天的Web开发已经不同往日, 更多的交互与逻辑都需要在前端完成, 有时候, 前端的代码量甚至在后端之上. 怎么去保证如此多的前端逻辑不被破坏, 依赖于功能测试? 这显示不现实, 功能测试很耗时, 而且它的创建成本较高, 所以通常只用它来覆盖最基本的那部分逻辑, 另一方面, 功能测试是依赖于流程的, 如果你想验证购买页面上的某个前端逻辑, 那么你就不得不一路从产品详情页面老老实实点过来, 反馈时间太长了, 可能你要等一分多钟才知道某个功能出错了, 我们自然不想把宝贵的开发时间浪费在等待上.</p>

<p>我在过去一段比较长的时候里都在项目上使用Angular, 在感受到Angular带来的便利的同时, 也饱受了Angular测试的折磨, 因为我一直觉得Angular的单元测试很难写, 跟JUnit + Mockito比起来, Angular代码的单元测试真是感觉写起来不得心应手, 更别说用TDD的方式来驱动开发.</p>

<p>我一直在思考为什么Angular社区说Angular的测试性很高, 但是在项目上实现用起来却是另一番境地. 经过分析项目上的代码, 我觉得要想驱动测试开发Angular代码, 那么其实是对你的Angular代码提出了比较高的要求, 你要遵循Angular的风格来开发你的应用, 只有你了解了其中的思想, 你的测试写起来才会轻松.</p>

<p>如果你已经使用Angular有一段时间了, 但是还没有读过这篇文章, 那么我强烈推荐你去读一下: <a href="http://stackoverflow.com/questions/14994391/thinking-in-angularjs-if-i-have-a-jquery-background">Thinking in Angular</a>.</p>

<p>先来看一看怎么样的Angular代码才是苗正根红的Angular代码.</p>

<ul>
<li><strong>避免使用任何的DOM操作</strong></li>
</ul>


<p>像DOM操作这样的脏活累活都应该交给Angular的原生<code>directive</code>去做, 我们的Angular代码应该只处理与DOM无关的业务逻辑. 来看一个简单的例子, 我们想创建一个简单的邮箱地址验证的directive, 它要实现的功能是, 当焦点从邮箱地址输入框移出的时候, 对输入框中的邮箱地址进行验证, 如果验证失败, 则向输入框添加一个样式表示输入的地址不合法, 比较糟糕的实现可能是这样的</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='html'><span class='line'><span class="nt">&lt;label</span> <span class="na">for=</span><span class="s">&quot;email&quot;</span><span class="nt">&gt;</span>Your email:<span class="nt">&lt;/label&gt;</span>
</span><span class='line'><span class="nt">&lt;input</span> <span class="na">id=</span><span class="s">&quot;email&quot;</span> <span class="na">type=</span><span class="s">&quot;text&quot;</span> <span class="na">ng-model=</span><span class="s">&quot;email&quot;</span> <span class="na">validate-on-blur</span><span class="nt">/&gt;</span>
</span></code></pre></td></tr></table></div></figure>




<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>
<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='javascript'><span class='line'><span class="nx">angular</span><span class="p">.</span><span class="nx">module</span><span class="p">(</span><span class="s2">&quot;TheNG&quot;</span><span class="p">,</span> <span class="p">[])</span>
</span><span class='line'>        <span class="p">.</span><span class="nx">directive</span><span class="p">(</span><span class="s2">&quot;validateOnBlur&quot;</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">link</span><span class="o">:</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">scope</span><span class="p">,</span> <span class="nx">element</span><span class="p">,</span> <span class="nx">attrs</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>                    <span class="kd">var</span> <span class="nx">validate</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">email</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>                        <span class="k">return</span> <span class="nx">email</span><span class="p">.</span><span class="nx">indexOf</span><span class="p">(</span><span class="s1">&#39;@gmail.com&#39;</span><span class="p">)</span> <span class="o">!==</span> <span class="o">-</span><span class="mi">1</span><span class="p">;</span>
</span><span class='line'>                    <span class="p">};</span>
</span><span class='line'>
</span><span class='line'>                    <span class="nx">element</span><span class="p">.</span><span class="nx">on</span><span class="p">(</span><span class="s1">&#39;blur&#39;</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="o">!</span><span class="nx">validate</span><span class="p">(</span><span class="nx">scope</span><span class="p">.</span><span class="nx">email</span><span class="p">))</span> <span class="p">{</span>
</span><span class='line'>                            <span class="nx">element</span><span class="p">.</span><span class="nx">addClass</span><span class="p">(</span><span class="s1">&#39;error-box&#39;</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="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>


<p>上面的代码应该可以满足我们的要求(验证逻辑因为不是我们关注的重点, 所以并不完善), 而且这个directive实现起来也挺简单的, 但是现在让我们一起来分析一下为什么我们认为这种写法是比较糟糕的.</p>

<p>最简单的办法就是在你的directive里面去找所有与DOM操作相关的代码.</p>

<p>首先看到的就是<code>on()</code>这个事件监听器. 完全没有必要自己去监听发生在被directive修饰的元素上的事件, angular有一整套的原生directive来干这个事情, 这里正确的做法应该是使用<code>ng-blur</code>来处理<code>blur</code>事件.</p>

<p>下一个有问题的地方就是<code>addClass()</code>, angular除了提供了事件监听相关的directive外, 也提供了操作元素本身属性的directive, <code>ng-class</code>就可以用来替换<code>addClass()</code>方法.</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>
<span class='line-number'>2</span>
</pre></td><td class='code'><pre><code class='html'><span class='line'><span class="nt">&lt;label</span> <span class="na">for=</span><span class="s">&quot;email&quot;</span><span class="nt">&gt;</span>Your email:<span class="nt">&lt;/label&gt;</span>
</span><span class='line'><span class="nt">&lt;input</span> <span class="na">id=</span><span class="s">&quot;email&quot;</span> <span class="na">type=</span><span class="s">&quot;text&quot;</span> <span class="na">ng-model=</span><span class="s">&quot;email&quot;</span> <span class="na">ng-blur=</span><span class="s">&quot;validate()&quot;</span> <span class="na">ng-class=</span><span class="s">&quot;{&#39;error-box&#39;: !isValid}&quot;</span> <span class="na">validate-on-blur</span><span class="nt">/&gt;</span>
</span></code></pre></td></tr></table></div></figure>




<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>
<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='javascript'><span class='line'><span class="nx">angular</span><span class="p">.</span><span class="nx">module</span><span class="p">(</span><span class="s2">&quot;TheNG&quot;</span><span class="p">,</span> <span class="p">[])</span>
</span><span class='line'>    <span class="p">.</span><span class="nx">directive</span><span class="p">(</span><span class="s2">&quot;validateOnBlur&quot;</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">link</span><span class="o">:</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">scope</span><span class="p">,</span> <span class="nx">element</span><span class="p">,</span> <span class="nx">attrs</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>                <span class="nx">scope</span><span class="p">.</span><span class="nx">isValid</span> <span class="o">=</span> <span class="kc">true</span><span class="p">;</span>
</span><span class='line'>                <span class="nx">scope</span><span class="p">.</span><span class="nx">validate</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">scope</span><span class="p">.</span><span class="nx">isValid</span> <span class="o">=</span> <span class="nx">scope</span><span class="p">.</span><span class="nx">email</span><span class="p">.</span><span class="nx">indexOf</span><span class="p">(</span><span class="s1">&#39;@gmail.com&#39;</span><span class="p">)</span> <span class="o">!==</span> <span class="o">-</span><span class="mi">1</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="p">}</span>
</span><span class='line'><span class="p">);</span>
</span></code></pre></td></tr></table></div></figure>


<p>比较一下这两个版本的实现, 是不是修改后的版本更简短, 更容易理解一些. 在新的版本里面, 我们只处理了业务逻辑, 即判断一个邮箱地址是否合法, 至于何时触发验证, 验证失败或成功之后应该有怎样的样式, 我们都统统交给了angular原生directive去处理了.</p>

<p>从测试的角度来看, 如果想给第一个版本的实现写单元测试, 那么要准备和验证的东西都很多, 我们需要设法去触发对应元素的<code>blur</code>事件, 然后再验证这个元素上是否添加了<code>error-box</code>这个class, 根据我的经验, 有时候为了验证这些DOM更新, 你还不得不创建真实的DOM结构添加到DOM tree上去, 又增加了一部分工作量.</p>

<p>而版本二就简单多了, 只定义了一个Model值<code>isValid</code>来标识当前的邮箱地址是否合法, <code>validate()</code>方法会在每次失焦之后自动执行, 要为它添加单元测试, 则只需要调用一下它的<code>validate()</code>方法, 然后验证<code>isValid</code>的值就可以了. SO EASY!~</p>

<ul>
<li><strong>将所有第三方服务封装成Service</strong></li>
</ul>


<p>一个Web项目中总是无法避免地要使用一些第三方的服务, 这里讨论的主要是前端的一些第三方服务, 比如在线客服, 站点统计等, 这些代码都在我们的控制之外, 大多数时候下都是从服务提供商的服务器上下载下来的, 而我们需要在业务代码中调用这些代码.</p>

<p>如果我们每次都是赤裸裸地以全局变量的形式来使用这些服务, 那么造成的问题就是这样的代码很难测试, 因为这些代码是不存在于我们的代码库中的, 而且内容应该也是不定时更新的, 大多数情况很多人会因为这些原因放弃到对这类操作的测试.</p>

<p>假设我们现在需要在某些动作发生之后调用一个第三方服务, 这个第三方服务叫做<code>serviceLoadedFromExternal</code>, 它提供了一个API叫做<code>makeServiceCall</code>, 如果直接使用这个API, 那么在测试中很难去验证这个服务被执行了(因为在单元测试环境中这个服务根本不存在), 但是如果我们将这个服务包装成一个angular service, 那么就可以在测试中轻易地将它替换成一个mock对象, 然后验证这个mock对象上的方法被调用了就可以了.</p>

<p>比较下面的两段代码:</p>

<ul>
<li><em>直接使用第三方服务</em></li>
</ul>


<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>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
</pre></td><td class='code'><pre><code class='javascript'><span class='line'><span class="nx">angular</span><span class="p">.</span><span class="nx">module</span><span class="p">(</span><span class="s2">&quot;TheNG&quot;</span><span class="p">,</span> <span class="p">[])</span>
</span><span class='line'>    <span class="p">.</span><span class="nx">controller</span><span class="p">(</span><span class="s2">&quot;AController&quot;</span><span class="p">,</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">$scope</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>        <span class="nx">$scope</span><span class="p">.</span><span class="nx">someAction</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
</span><span class='line'>            <span class="c1">// handle some logic here</span>
</span><span class='line'>            <span class="nx">serviceLoadedFromExternal</span><span class="p">.</span><span class="nx">makeServiceCall</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>


<ul>
<li><em>使用封装成service的第三方服务</em></li>
</ul>


<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>
<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>
</pre></td><td class='code'><pre><code class='javascript'><span class='line'><span class="nx">angular</span><span class="p">.</span><span class="nx">module</span><span class="p">(</span><span class="s2">&quot;TheNG&quot;</span><span class="p">,</span> <span class="p">[])</span>
</span><span class='line'>    <span class="p">.</span><span class="nx">factory</span><span class="p">(</span><span class="s2">&quot;wrappedService&quot;</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">makeServiceCall</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">serviceLoadedFromExternal</span><span class="p">.</span><span class="nx">makeServiceCall</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="p">.</span><span class="nx">controller</span><span class="p">(</span><span class="s2">&quot;AController&quot;</span><span class="p">,</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">$scope</span><span class="p">,</span> <span class="nx">wrappedService</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>        <span class="nx">$scope</span><span class="p">.</span><span class="nx">someAction</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
</span><span class='line'>            <span class="c1">// handle some logic here</span>
</span><span class='line'>            <span class="nx">wrappedService</span><span class="p">.</span><span class="nx">makeServiceCall</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>


<p>Angular是高度模块化的, 它希望通过这种模块的形式来解决JS代码管理上的混乱, 并且使用依赖注入来自动装配, 这一点与Spring IOC很像, 带来的好处就是你的依赖是可以随意替换的, 这就极大的增加了代码的可测试性.</p>

<ul>
<li><strong>尽量将Ajax请求放到service中去做</strong></li>
</ul>


<p>Angular中使用service来组织那些可被复用的逻辑, 除此之外, 我们也可以将service理解为是对应一个领域对象的操作的集合, 因此, 通常会将一组Ajax操作放在一个service中去统一管理.</p>

<p>当然了,你也可以通过向你的directive或是controller中注入<code>$http</code>, 但是我个人不喜欢这种做法. 首先, <code>$http</code>是一个比较初级的依赖, 与其实注入的业务服务不是一个抽象层级, 如果在你的业务代码中直接操作http请求, 给人的一种感觉就像是在Spring MVC的request method中直接使用<code>HttpServeletRequest</code>一样, 有点突兀, 另外会让整个方法失衡, 因为这些操作的抽象层次是不一样的. 其次就是给测试带来的麻烦, 我们不得不使用<code>$httpBackend</code>来模拟一个HTTP请求的发送.</p>

<p>我们应该设法让测试更简单,通过将Ajax请求封装到service中, 我们只需要让被mock的service返回我们期望的结果就可以了. 只有这样大家才会喜欢写测试, 甚至是做到测试驱动开发, 要去mock<code>$http</code>这样的东西, 显然是增加了测试的负担.</p>

<ul>
<li><strong>使用Promise处理Ajax的返回值, 而不是传递回调函数</strong></li>
</ul>


<p>Angular中所有的Ajax请求默认都返回一个Promise对象, 不建议将处理Ajax返回值的逻辑通过回调函数的形式传递给发送http请求的service, 而应该是在调用service的地方利用返回的promise对象来决定如何处理.</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>
<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='javascript'><span class='line'><span class="nx">angular</span><span class="p">.</span><span class="nx">module</span><span class="p">(</span><span class="s2">&quot;TheNG&quot;</span><span class="p">,</span> <span class="p">[])</span>
</span><span class='line'>    <span class="p">.</span><span class="nx">service</span><span class="p">(</span><span class="s2">&quot;deliveryService&quot;</span><span class="p">,</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">$http</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">validateAddress</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">address</span><span class="p">,</span> <span class="nx">success</span><span class="p">,</span> <span class="nx">failure</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>            <span class="nx">$http</span><span class="p">.</span><span class="nx">post</span><span class="p">(</span><span class="s1">&#39;/unknown&#39;</span><span class="p">,</span> <span class="nx">address</span><span class="p">).</span><span class="nx">then</span><span class="p">(</span><span class="nx">success</span><span class="p">,</span> <span class="nx">failure</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 class="nx">controller</span><span class="p">(</span><span class="s2">&quot;DeliveryController&quot;</span><span class="p">,</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">$scope</span><span class="p">,</span> <span class="nx">deliveryService</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>        <span class="kd">var</span> <span class="nx">acceptAddress</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;address accepted&#39;</span><span class="p">);</span>
</span><span class='line'>        <span class="p">};</span>
</span><span class='line'>        <span class="kd">var</span> <span class="nx">rejectAddress</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;address rejected&#39;</span><span class="p">);</span>
</span><span class='line'>        <span class="p">};</span>
</span><span class='line'>        <span class="nx">$scope</span><span class="p">.</span><span class="nx">validateAddress</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">deliveryService</span><span class="p">.</span><span class="nx">validateAddress</span><span class="p">(</span><span class="nx">$scope</span><span class="p">.</span><span class="nx">address</span><span class="p">,</span> <span class="nx">acceptAddress</span><span class="p">,</span> <span class="nx">rejectAddress</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>


<p>这里的处理办法是将快递地址验证失败或成功之后的处理函数都传给了<code>deliveryService</code>, 当验证结果从服务器端返回之后, 相应的处理函数会被执行. 这做写法其实是比较常见的, 但是问题出在哪里呢?</p>

<p>其实, 作为一个service的接口, <code>validateAddress</code>应该只接收一个待验证的地址, 验证完成之后返回一个验证结果就可以了, 本来应该是一个很干净的接口, 我们之所以丑陋把对应的处理函数也传进去, 原因就在于这是一个异步的请求, 所以需要在发请求的时候就将对处理函数<em><code>绑定</code></em>上去.</p>

<p>你应该已经猜到了第二个问题我会说一说对它的测试, 通常来说, 如果一个service创建成本较高或是存在外部依赖/请求的话, 我们会将这个service mock掉, 通过让mocked service直接返回我们想要的结果来让我们只关注被验证的业务逻辑.我们回头看一下上面的实现, 如果我们把<code>deliveryService</code>的<code>validateAddress()</code>方法mock掉, 那么我们根本没有办法去验证<code>acceptAddress()</code>和<code>rejectAddress()</code>里面的逻辑!</p>

<p>所以, 如果你的处理函数是传递给service中的API的话, 那么你的测试其实就已经跟这个API的实现绑定了, 你只有去创建一个真实的service并且让它发送HTTP请求, 你的处理函数才会被执行到.</p>

<p>经过这一番折腾, 你一定要说, 这测试比实现代码难写多了. 正确的打开方式应该是这样的: service的API只需要返回promise, 对应的处理函数的<em><code>绑定</code></em>在这个返回的promise上, 这样我们只需要mock那个service的接口让它返回一个我们期望的promise, 然后控制promise的结果让对应的处理函数被执行:</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>
<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='javascript'><span class='line'><span class="nx">angular</span><span class="p">.</span><span class="nx">module</span><span class="p">(</span><span class="s2">&quot;TheNG&quot;</span><span class="p">,</span> <span class="p">[])</span>
</span><span class='line'>    <span class="p">.</span><span class="nx">service</span><span class="p">(</span><span class="s2">&quot;deliveryService&quot;</span><span class="p">,</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">$http</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">validateAddress</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">address</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>            <span class="k">return</span> <span class="nx">$http</span><span class="p">.</span><span class="nx">post</span><span class="p">(</span><span class="s1">&#39;/unknown&#39;</span><span class="p">,</span> <span class="nx">address</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 class="nx">controller</span><span class="p">(</span><span class="s2">&quot;DeliveryController&quot;</span><span class="p">,</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">$scope</span><span class="p">,</span> <span class="nx">deliveryService</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>        <span class="kd">var</span> <span class="nx">acceptAddress</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;address accepted&#39;</span><span class="p">);</span>
</span><span class='line'>        <span class="p">};</span>
</span><span class='line'>        <span class="kd">var</span> <span class="nx">rejectAddress</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;address rejected&#39;</span><span class="p">);</span>
</span><span class='line'>        <span class="p">};</span>
</span><span class='line'>        <span class="nx">$scope</span><span class="p">.</span><span class="nx">validateAddress</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">deliveryService</span><span class="p">.</span><span class="nx">validateAddress</span><span class="p">(</span><span class="nx">$scope</span><span class="p">.</span><span class="nx">address</span><span class="p">).</span><span class="nx">then</span><span class="p">(</span><span class="nx">acceptAddress</span><span class="p">,</span> <span class="nx">rejectAddress</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>


<hr />

<p>本来打算接下来介绍一下Angular代码的单元测试的各种模式的, 写着写着篇幅有点多了, 期待下一篇吧.</p>
]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[Call vs Apply vs Bind]]></title>
    <link href="http://fedcuit.github.com/blog/2015/06/10/bind-apply-call/"/>
    <updated>2015-06-10T11:29:00+08:00</updated>
    <id>http://fedcuit.github.com/blog/2015/06/10/bind-apply-call</id>
    <content type="html"><![CDATA[<p>在JavaScript中, 函数是一等公民, 可以作为参数传入另一个函数, 也可以作为返回值从另一个函数中返回, 不仅如此, 在JavaScript这门动态语言中, 函数可以被任意对象调用, 比如说<code>function1</code>是定义在<code>obj1</code>上的, 但是它还可以被<code>obj2</code>所调用, 怎么做到的? 有下面的三种办法:</p>

<ul>
<li><strong>Call</strong></li>
</ul>


<p>基本语法: <code>fnc.call(thisArg, arg1, arg2... argN)</code></p>

<ul>
<li><code>thisArg</code>将作为<code>this</code>对象传入到函数<code>fnc</code>中</li>
<li><code>arg1, arg2... argN</code>作为参数列表传入到函数中</li>
</ul>


<p>通过<code>call</code>方法可以让一个函数被任何的对象所使用, <code>call()</code>会立即返回使用<code>thisArg</code>作为<code>this</code>对象, 余下部分作为参数列表来调用原函数<code>fnc</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>
<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='javascript'><span class='line'><span class="kd">var</span> <span class="nx">person</span> <span class="o">=</span> <span class="p">{</span>
</span><span class='line'>  <span class="nx">toString</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">delimiter</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>    <span class="k">return</span> <span class="s2">&quot;height=&quot;</span> <span class="o">+</span> <span class="k">this</span><span class="p">.</span><span class="nx">height</span> <span class="o">+</span> <span class="nx">delimiter</span> <span class="o">+</span> <span class="s2">&quot; weight=&quot;</span> <span class="o">+</span> <span class="k">this</span><span class="p">.</span><span class="nx">weight</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><span class='line'><span class="nx">person</span><span class="p">.</span><span class="nx">height</span> <span class="o">=</span> <span class="s2">&quot;180&quot;</span><span class="p">;</span>
</span><span class='line'><span class="nx">person</span><span class="p">.</span><span class="nx">weight</span> <span class="o">=</span> <span class="s2">&quot;80&quot;</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">person</span><span class="p">.</span><span class="nx">toString</span><span class="p">(</span><span class="s2">&quot;,&quot;</span><span class="p">));</span>
</span><span class='line'><span class="c1">//&quot;height=180, weight=80&quot;</span>
</span><span class='line'>
</span><span class='line'><span class="kd">var</span> <span class="nx">dog</span> <span class="o">=</span> <span class="p">{};</span>
</span><span class='line'><span class="nx">dog</span><span class="p">.</span><span class="nx">height</span> <span class="o">=</span> <span class="s2">&quot;40&quot;</span><span class="p">;</span>
</span><span class='line'><span class="nx">dog</span><span class="p">.</span><span class="nx">weight</span> <span class="o">=</span> <span class="s2">&quot;30&quot;</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">person</span><span class="p">.</span><span class="nx">toString</span><span class="p">.</span><span class="nx">call</span><span class="p">(</span><span class="nx">dog</span><span class="p">,</span> <span class="s2">&quot;:&quot;</span><span class="p">));</span>
</span><span class='line'><span class="c1">//&quot;height=40: weight=30&quot;</span>
</span></code></pre></td></tr></table></div></figure>


<ul>
<li><strong>Apply</strong></li>
</ul>


<p>上面的例子里<code>toString</code>只是返回了身高与体重的数值, 但是只有数值是没有意义的, 我们还需要单位, 出于演示的目的我们打算将单位传为参数传入<code>toString</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>
<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='javascript'><span class='line'><span class="kd">var</span> <span class="nx">person</span> <span class="o">=</span> <span class="p">{</span>
</span><span class='line'>  <span class="nx">toString</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">delimiter</span><span class="p">,</span> <span class="nx">heightUnit</span><span class="p">,</span> <span class="nx">weightUnit</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>    <span class="k">return</span> <span class="s2">&quot;height=&quot;</span> <span class="o">+</span> <span class="k">this</span><span class="p">.</span><span class="nx">height</span> <span class="o">+</span> <span class="nx">heightUnit</span> <span class="o">+</span> <span class="nx">delimiter</span> <span class="o">+</span> <span class="s2">&quot; weight=&quot;</span> <span class="o">+</span> <span class="k">this</span><span class="p">.</span><span class="nx">weight</span> <span class="o">+</span> <span class="nx">weightUnit</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><span class='line'><span class="nx">person</span><span class="p">.</span><span class="nx">height</span> <span class="o">=</span> <span class="s2">&quot;180&quot;</span><span class="p">;</span>
</span><span class='line'><span class="nx">person</span><span class="p">.</span><span class="nx">weight</span> <span class="o">=</span> <span class="s2">&quot;80&quot;</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">person</span><span class="p">.</span><span class="nx">toString</span><span class="p">(</span><span class="s2">&quot;,&quot;</span><span class="p">,</span> <span class="s2">&quot;cm&quot;</span><span class="p">,</span> <span class="s2">&quot;kg&quot;</span><span class="p">));</span>
</span><span class='line'><span class="c1">//&quot;height=180cm, weight=80kg&quot;</span>
</span><span class='line'>
</span><span class='line'><span class="kd">var</span> <span class="nx">dog</span> <span class="o">=</span> <span class="p">{};</span>
</span><span class='line'><span class="nx">dog</span><span class="p">.</span><span class="nx">height</span> <span class="o">=</span> <span class="s2">&quot;40&quot;</span><span class="p">;</span>
</span><span class='line'><span class="nx">dog</span><span class="p">.</span><span class="nx">weight</span> <span class="o">=</span> <span class="s2">&quot;30&quot;</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">person</span><span class="p">.</span><span class="nx">toString</span><span class="p">.</span><span class="nx">call</span><span class="p">(</span><span class="nx">dog</span><span class="p">,</span> <span class="s2">&quot;:&quot;</span><span class="p">,</span> <span class="s2">&quot;cm&quot;</span><span class="p">,</span> <span class="s2">&quot;kg&quot;</span><span class="p">));</span>
</span><span class='line'><span class="c1">//&quot;height=40cm: weight=30kg&quot;</span>
</span></code></pre></td></tr></table></div></figure>


<p>现在在调用<code>call</code>的时候需要传入三个参数(除去thisArg不算),  还不错, 不过接下来我们打算将更进一步, 我们希望在dog对象上添加一个方法<code>justDoIt</code>, 不管这个<code>justDoIt</code>接收什么参数, 都要将对<code>justDoIt</code>函数的调用代理到<code>toString</code>方法上去, 先试试看<code>call</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>
<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='javascript'><span class='line'><span class="kd">var</span> <span class="nx">person</span> <span class="o">=</span> <span class="p">{</span>
</span><span class='line'>  <span class="nx">toString</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">delimiter</span><span class="p">,</span> <span class="nx">heightUnit</span><span class="p">,</span> <span class="nx">weightUnit</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>    <span class="k">return</span> <span class="s2">&quot;height=&quot;</span> <span class="o">+</span> <span class="k">this</span><span class="p">.</span><span class="nx">height</span> <span class="o">+</span> <span class="nx">heightUnit</span> <span class="o">+</span> <span class="nx">delimiter</span> <span class="o">+</span> <span class="s2">&quot; weight=&quot;</span> <span class="o">+</span> <span class="k">this</span><span class="p">.</span><span class="nx">weight</span> <span class="o">+</span> <span class="nx">weightUnit</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><span class='line'><span class="nx">person</span><span class="p">.</span><span class="nx">height</span> <span class="o">=</span> <span class="s2">&quot;180&quot;</span><span class="p">;</span>
</span><span class='line'><span class="nx">person</span><span class="p">.</span><span class="nx">weight</span> <span class="o">=</span> <span class="s2">&quot;80&quot;</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">person</span><span class="p">.</span><span class="nx">toString</span><span class="p">(</span><span class="s2">&quot;,&quot;</span><span class="p">,</span> <span class="s2">&quot;cm&quot;</span><span class="p">,</span> <span class="s2">&quot;kg&quot;</span><span class="p">));</span>
</span><span class='line'><span class="c1">//&quot;height=180cm, weight=80kg&quot;</span>
</span><span class='line'>
</span><span class='line'><span class="kd">var</span> <span class="nx">dog</span> <span class="o">=</span> <span class="p">{</span>
</span><span class='line'>  <span class="nx">justDoIt</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">person</span><span class="p">.</span><span class="nx">toString</span><span class="p">.</span><span class="nx">call</span><span class="p">(</span><span class="k">this</span><span class="p">,</span> <span class="nx">arguments</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="nx">dog</span><span class="p">.</span><span class="nx">height</span> <span class="o">=</span> <span class="s2">&quot;40&quot;</span><span class="p">;</span>
</span><span class='line'><span class="nx">dog</span><span class="p">.</span><span class="nx">weight</span> <span class="o">=</span> <span class="s2">&quot;30&quot;</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">dog</span><span class="p">.</span><span class="nx">justDoIt</span><span class="p">(</span><span class="s2">&quot;:&quot;</span><span class="p">,</span> <span class="s2">&quot;cm&quot;</span><span class="p">,</span> <span class="s2">&quot;kg&quot;</span><span class="p">));</span>
</span><span class='line'><span class="c1">//&quot;height=40undefined[object Arguments] weight=30undefined&quot;</span>
</span></code></pre></td></tr></table></div></figure>


<p>可以看到<code>arguments</code>这个数组被赋值给了第一个参数<code>delimiter</code>, 而<code>heightUnit</code>, <code>weightUnit</code>都没有被正确的赋值, 所以他们都是<code>undefined</code>.</p>

<p>要解决上面的问题, 就需要<code>apply</code>出场了, <code>apply</code>与<code>call</code>非常的相似, 唯一的区别就是<code>call</code>需要明确地为每一个参数传值, 而<code>apply</code>只需要一个参数数组就可以了, 当原函数被调用的时候, <code>apply</code>会将这个参数数组<code>unpack</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>
<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='javascript'><span class='line'><span class="kd">var</span> <span class="nx">person</span> <span class="o">=</span> <span class="p">{</span>
</span><span class='line'>  <span class="nx">toString</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">delimiter</span><span class="p">,</span> <span class="nx">heightUnit</span><span class="p">,</span> <span class="nx">weightUnit</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>    <span class="k">return</span> <span class="s2">&quot;height=&quot;</span> <span class="o">+</span> <span class="k">this</span><span class="p">.</span><span class="nx">height</span> <span class="o">+</span> <span class="nx">heightUnit</span> <span class="o">+</span> <span class="nx">delimiter</span> <span class="o">+</span> <span class="s2">&quot; weight=&quot;</span> <span class="o">+</span> <span class="k">this</span><span class="p">.</span><span class="nx">weight</span> <span class="o">+</span> <span class="nx">weightUnit</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><span class='line'><span class="nx">person</span><span class="p">.</span><span class="nx">height</span> <span class="o">=</span> <span class="s2">&quot;180&quot;</span><span class="p">;</span>
</span><span class='line'><span class="nx">person</span><span class="p">.</span><span class="nx">weight</span> <span class="o">=</span> <span class="s2">&quot;80&quot;</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">person</span><span class="p">.</span><span class="nx">toString</span><span class="p">(</span><span class="s2">&quot;,&quot;</span><span class="p">,</span> <span class="s2">&quot;cm&quot;</span><span class="p">,</span> <span class="s2">&quot;kg&quot;</span><span class="p">));</span>
</span><span class='line'><span class="c1">//&quot;height=180cm, weight=80kg&quot;</span>
</span><span class='line'>
</span><span class='line'><span class="kd">var</span> <span class="nx">dog</span> <span class="o">=</span> <span class="p">{</span>
</span><span class='line'>  <span class="nx">justDoIt</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">person</span><span class="p">.</span><span class="nx">toString</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>
</span><span class='line'>  <span class="p">}</span>
</span><span class='line'><span class="p">};</span>
</span><span class='line'><span class="nx">dog</span><span class="p">.</span><span class="nx">height</span> <span class="o">=</span> <span class="s2">&quot;40&quot;</span><span class="p">;</span>
</span><span class='line'><span class="nx">dog</span><span class="p">.</span><span class="nx">weight</span> <span class="o">=</span> <span class="s2">&quot;30&quot;</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">dog</span><span class="p">.</span><span class="nx">justDoIt</span><span class="p">(</span><span class="s2">&quot;:&quot;</span><span class="p">,</span> <span class="s2">&quot;cm&quot;</span><span class="p">,</span> <span class="s2">&quot;kg&quot;</span><span class="p">));</span>
</span><span class='line'><span class="c1">//&quot;height=40cm: weight=30kg&quot;</span>
</span></code></pre></td></tr></table></div></figure>


<ul>
<li><strong>Bind</strong></li>
</ul>


<p>如果你对函数式编程有所了解, 那么你应该知道<code>柯里化(currying function)</code>与<code>偏函数(partial function)</code>, 它们有个共同之处就是都是从一个函数上产生出的另一个新的函数.</p>

<p>偏函数可以视为是针对某种情况简化之后的函数, 比如说现在有一个函数<code>awesomeFunction(arg1, arg2, arg3)</code>, 而对这个函数的调用过程中, 第一个参数几乎都是相同的, 作为眼睛里容不得重复的程序员, 我们应该有一种办法可以消除这种重复, 这个时候偏函数就伴着掌声入场了, 我们在偏函数的声明中已经预置了第一个参数<code>arg1=mostFrequentlyUsedValue</code>, 这样我们调用偏参数的时候只需要传入<code>(arg2, arg3</code>)就可以了.</p>

<p>那么现在问题来了, JavaScript中怎么实现偏函数呢?</p>

<p>这时候就需要使用<code>bind</code>了, <code>bind</code>的基本语法与<code>call</code>一致:
<code>fnc.bind(thisArg, arg1, arg2... argN)</code></p>

<p>但是它们有一个重要的区别, 那就是<code>bind</code>不会立即执行原函数, 而是返回一个新的函数, 并且这个新的函数在被调用的时候会自动将已经<code>bind</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>
<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>
</pre></td><td class='code'><pre><code class='javascript'><span class='line'><span class="kd">function</span> <span class="nx">greet</span><span class="p">(</span><span class="nx">timeFrame</span><span class="p">,</span> <span class="nx">msg</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>  <span class="k">return</span> <span class="s2">&quot;Good &quot;</span> <span class="o">+</span> <span class="nx">timeFrame</span> <span class="o">+</span> <span class="s2">&quot;, &quot;</span> <span class="o">+</span> <span class="nx">msg</span><span class="p">;</span>
</span><span class='line'><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">greet</span><span class="p">(</span><span class="s2">&quot;Morning&quot;</span><span class="p">,</span> <span class="s2">&quot;What can I do for you?&quot;</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">greet</span><span class="p">(</span><span class="s2">&quot;Morning&quot;</span><span class="p">,</span> <span class="s2">&quot;This is your ticket&quot;</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">greet</span><span class="p">(</span><span class="s2">&quot;Morning&quot;</span><span class="p">,</span> <span class="s2">&quot;welcome back&quot;</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">greet</span><span class="p">(</span><span class="s2">&quot;Morning&quot;</span><span class="p">,</span> <span class="s2">&quot;How was the trip&quot;</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">greet</span><span class="p">(</span><span class="s2">&quot;Afternoon&quot;</span><span class="p">,</span> <span class="s2">&quot;Can I borrow you some time?&quot;</span><span class="p">));</span>
</span><span class='line'><span class="c1">// &quot;Good Morning, What can I do for you?&quot;</span>
</span><span class='line'><span class="c1">// &quot;Good Morning, This is your ticket&quot;</span>
</span><span class='line'><span class="c1">// &quot;Good Morning, welcome back&quot;</span>
</span><span class='line'><span class="c1">// &quot;Good Morning, How was the trip&quot;</span>
</span><span class='line'><span class="c1">// &quot;Good Afternoon, Can I borrow you some time?&quot;</span>
</span></code></pre></td></tr></table></div></figure>


<p>上面的例子中<code>greet</code>这个函数多数情况下都是使用&#8221;Morning&#8221;作为第一个参数, 何不创建一个更简短的函数来专门处理这种场景呢:</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>
<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='javascript'><span class='line'><span class="kd">function</span> <span class="nx">greet</span><span class="p">(</span><span class="nx">timeFrame</span><span class="p">,</span> <span class="nx">msg</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>  <span class="k">return</span> <span class="s2">&quot;Good &quot;</span> <span class="o">+</span> <span class="nx">timeFrame</span> <span class="o">+</span> <span class="s2">&quot;, &quot;</span> <span class="o">+</span> <span class="nx">msg</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">morningGreet</span> <span class="o">=</span> <span class="nx">greet</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="kc">undefined</span><span class="p">,</span> <span class="s2">&quot;Morning&quot;</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">morningGreet</span><span class="p">(</span><span class="s2">&quot;What can I do for you?&quot;</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">morningGreet</span><span class="p">(</span><span class="s2">&quot;This is your ticket&quot;</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">morningGreet</span><span class="p">(</span><span class="s2">&quot;welcome back&quot;</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">morningGreet</span><span class="p">(</span><span class="s2">&quot;How was the trip&quot;</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">greet</span><span class="p">(</span><span class="s2">&quot;Afternoon&quot;</span><span class="p">,</span> <span class="s2">&quot;Can I borrow you some time?&quot;</span><span class="p">));</span>
</span></code></pre></td></tr></table></div></figure>


<p>了解了<code>bind</code>其实是返回一个新的函数之后, 那么其实想通过它来实现上面<code>call</code>/<code>apply</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>
<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='javascript'><span class='line'><span class="kd">var</span> <span class="nx">person</span> <span class="o">=</span> <span class="p">{</span>
</span><span class='line'>  <span class="nx">toString</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">delimiter</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>    <span class="k">return</span> <span class="s2">&quot;height=&quot;</span> <span class="o">+</span> <span class="k">this</span><span class="p">.</span><span class="nx">height</span> <span class="o">+</span> <span class="nx">delimiter</span> <span class="o">+</span> <span class="s2">&quot; weight=&quot;</span> <span class="o">+</span> <span class="k">this</span><span class="p">.</span><span class="nx">weight</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><span class='line'><span class="nx">person</span><span class="p">.</span><span class="nx">height</span> <span class="o">=</span> <span class="s2">&quot;180&quot;</span><span class="p">;</span>
</span><span class='line'><span class="nx">person</span><span class="p">.</span><span class="nx">weight</span> <span class="o">=</span> <span class="s2">&quot;80&quot;</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">person</span><span class="p">.</span><span class="nx">toString</span><span class="p">(</span><span class="s2">&quot;,&quot;</span><span class="p">));</span>
</span><span class='line'><span class="c1">//&quot;height=180, weight=80&quot;</span>
</span><span class='line'>
</span><span class='line'><span class="kd">var</span> <span class="nx">dog</span> <span class="o">=</span> <span class="p">{};</span>
</span><span class='line'><span class="nx">dog</span><span class="p">.</span><span class="nx">height</span> <span class="o">=</span> <span class="s2">&quot;40&quot;</span><span class="p">;</span>
</span><span class='line'><span class="nx">dog</span><span class="p">.</span><span class="nx">weight</span> <span class="o">=</span> <span class="s2">&quot;30&quot;</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">person</span><span class="p">.</span><span class="nx">toString</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="nx">dog</span><span class="p">,</span> <span class="s2">&quot;:&quot;</span><span class="p">)());</span>
</span><span class='line'><span class="c1">//&quot;height=40: weight=30&quot;</span>
</span></code></pre></td></tr></table></div></figure>


<hr />

<p>上面只是从函数可以被任意对象调用的角度来分析了<code>call</code>, <code>apply</code>, <code>bind</code>的用法, 其实实际使用的过程中, 这些方法还有另一个非常重要的用途, 那就是给回调函数绑定正确的上下文环境(this对象).</p>
]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[Backbone体验 -- View篇]]></title>
    <link href="http://fedcuit.github.com/blog/2015/06/04/backbone-view/"/>
    <updated>2015-06-04T12:04:00+08:00</updated>
    <id>http://fedcuit.github.com/blog/2015/06/04/backbone-view</id>
    <content type="html"><![CDATA[<h2>View</h2>

<p>简单讲, <code>View</code>就是用来展示<code>Model</code>里面的数据的.</p>

<p>这样可以简单回顾一下我用过的一些前端JS框架是怎么处理数据展示的, 从最原始的jQuery开始:
只使用jQuery的时候, 当我们已经通过AJAX拿到数据之后, 我们可能需要先定位到需要显示数据的元素然后通过<code>el.val('...')</code>或者<code>el.text('...')</code>将数据手动设置上去. 当元素的值被更新之后需要将修改反应到后端时, 我们可能需要取到所有的元素的最新值然后发送到后台.</p>

<p>如上面那样通过操作对应的单个的DOM元素去设置值的方式写起来很繁琐, 如果返回的数据里面有十几甚至几十个条目的话, 写出来的代码更是毫无美感可言, 于是人们想到了使用JS<code>模板</code>, 通过一段通常是写在<code>&lt;head&gt;&lt;/head&gt;</code>中<code>&lt;script type="text/template" id="myTemplate"&gt;...&lt;/script&gt;</code>来表示最终要后面的HTML的结构, 在其中使用占位符来标识哪里部分需要被真正传入的数据替换. 模板定义好之后, 当拿到AJAX的返回结果时, 我们只需要将数据填充到这个模板, 然后将生成的HTML添加到页面中就可以了, 一句话就可以搞定, 比如 <code>$container.html(_.template($('#myTemplate'), ajaxReponseData))</code>. 比较常用的模板引擎有<code>mustache</code>, <code>underscore template</code></p>

<p>事情发展到这里还没完, 现在数据显示的问题解决的差不多了, 但是如果用户将某些DOM元素的值修改之后, 我们还需要将所有的元素的值读取一遍, 然后将这些值发送到后台去更新这条记录. 我们通过模板技术解决了繁琐的DOM设值, 但是数据的更新还是一个问题.</p>

<p>一起来看看Backbone的<code>View</code>是如何解决这个问题.</p>

<p>首先我们需要定义一个Backbone <code>View</code>, 定义的方法与<code>Model</code>非常的类似, 只需要继承&#8217;View`就可以了:</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>
<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='javascript'><span class='line'><span class="nx">TodoItemView</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">View</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span>
</span><span class='line'>    <span class="nx">template</span><span class="o">:</span> <span class="nx">_</span><span class="p">.</span><span class="nx">template</span><span class="p">(</span><span class="nx">$</span><span class="p">(</span><span class="s2">&quot;#todoItemTemplate&quot;</span><span class="p">).</span><span class="nx">html</span><span class="p">()),</span>
</span><span class='line'>    <span class="nx">initialize</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">this</span><span class="p">.</span><span class="nx">render</span><span class="p">();</span>
</span><span class='line'>    <span class="p">},</span>
</span><span class='line'>    <span class="nx">render</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="k">this</span><span class="p">.</span><span class="nx">$el</span><span class="p">.</span><span class="nx">html</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">template</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">attributes</span><span class="p">));</span>
</span><span class='line'>    <span class="p">},</span>
</span><span class='line'>    <span class="nx">events</span><span class="o">:</span> <span class="p">{</span>
</span><span class='line'>        <span class="s2">&quot;click .toggle&quot;</span><span class="o">:</span> <span class="s2">&quot;handleToggle&quot;</span><span class="p">,</span>
</span><span class='line'>        <span class="s2">&quot;click .destroy&quot;</span><span class="o">:</span> <span class="s2">&quot;handleDestroy&quot;</span>
</span><span class='line'>    <span class="p">},</span>
</span><span class='line'>    <span class="nx">handleToggle</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">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">set</span><span class="p">(</span><span class="s1">&#39;completed&#39;</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">$</span><span class="p">(</span><span class="s1">&#39;.toggle&#39;</span><span class="p">).</span><span class="nx">prop</span><span class="p">(</span><span class="s1">&#39;checked&#39;</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>


<p>与上面提到的方式不同, Backbone <code>View</code>实现了细粒度的数据更新, 通过对对应的组件进行事件监听, 当某个组件的值被修改时, 只需要将被修改的属性更新到<code>Model</code>中.</p>

<p>下面介绍一下<code>View</code>中比较重要的几个属性(钩子):</p>

<ul>
<li><code>initialize</code></li>
</ul>


<p>通常在这个属性对应的方法里面去生成最初的视图, 如上例中所求, 在<code>initialize</code>方法中将模板填充之后添加到<code>View</code>对应的HTML容器中.</p>

<ul>
<li><code>el</code></li>
</ul>


<p>这个属性通常是一个<em>css selector</em>, 对应页面中这个<code>View</code>将被添加到HTML元素, 可以理解成是这个<code>View</code>的container, 个人理解是在创建Backbone <code>Collection</code>, <code>View</code>, <code>Model</code>的实例的时候, 都可以向其中传入一个对象, 这个对象的属性会与定义时的那些属性进行merge. 所以<code>el</code>既可以声明在<code>View</code>类的定义中, 也可以通过参加传入, 如 <code>var todoItemView = new TodoItemView({el: jQuery('.todoItem'});</code></p>

<p>在<code>View</code>内部使用的时候, 通常是通过<code>this.$el</code>来操作这个容器, <code>this.$el</code>将会引用你配置的<code>el</code>对应的jQuery对象.</p>

<p>除了<code>el</code>之外, 还有一些其他的属性也是跟<code>View</code>的容器相关的:</p>

<ul>
<li><code>tagName</code></li>
<li><code>className</code></li>
</ul>


<p>如果没有配置<code>View</code>的<code>el</code>属性, 那么默认将使用一个<code>DIV</code>来包装<code>View</code>的内容, 这时候如果配置了<code>tagName</code>, 那么就会使用<code>&lt;tagName&gt;&lt;/tagName&gt;</code>来包装, 如果还有<code>className</code>的话, 那就变成了<code>&lt;tagName class="valueOfClassNameProp"&gt;&lt;/tagName&gt;</code></p>

<ul>
<li><code>this.$('css selector')</code></li>
</ul>


<p>一开始我也比较疑惑<code>this.$()</code>与<code>$()</code>有什么区别, 看了源码之后才发现原来<code>this.$()</code>是在当时<code>View</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>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
</pre></td><td class='code'><pre><code class='javascript'><span class='line'><span class="nx">$</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">selector</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>  <span class="k">return</span> <span class="k">this</span><span class="p">.</span><span class="nx">$el</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="nx">selector</span><span class="p">);</span>
</span><span class='line'><span class="p">},</span>
</span></code></pre></td></tr></table></div></figure>


<ul>
<li><code>events</code></li>
</ul>


<p>这个属性应该是<code>View</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>
<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>
</pre></td><td class='code'><pre><code class='javascript'><span class='line'><span class="nx">events</span><span class="o">:</span> <span class="p">{</span>
</span><span class='line'>    <span class="s2">&quot;click .toggle&quot;</span><span class="o">:</span> <span class="s2">&quot;handleToggle&quot;</span><span class="p">,</span>
</span><span class='line'>    <span class="s2">&quot;click .destroy&quot;</span><span class="o">:</span> <span class="s2">&quot;handleDestroy&quot;</span>
</span><span class='line'><span class="p">},</span>
</span><span class='line'><span class="nx">handleToggle</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">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">set</span><span class="p">(</span><span class="s1">&#39;completed&#39;</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">$</span><span class="p">(</span><span class="s1">&#39;.toggle&#39;</span><span class="p">).</span><span class="nx">prop</span><span class="p">(</span><span class="s1">&#39;checked&#39;</span><span class="p">));</span>
</span><span class='line'><span class="p">}</span>
</span></code></pre></td></tr></table></div></figure>


<p>如在<code>.toggle</code>元素上点击时会执行<code>handleToggle</code>方法. 这种事件监听方式其实与<code>jQuery.on()</code>非常的类似:</p>

<ul>
<li><code>jQuery.on(eventType, selector, handler)</code></li>
<li><code>"eventType selector": "handler"</code></li>
</ul>

]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[Backbone体验 -- Model篇]]></title>
    <link href="http://fedcuit.github.com/blog/2015/06/04/backbone-model/"/>
    <updated>2015-06-04T08:52:00+08:00</updated>
    <id>http://fedcuit.github.com/blog/2015/06/04/backbone-model</id>
    <content type="html"><![CDATA[<h2>Model</h2>

<p>在<code>Backbone</code>的理念中, 一个<code>Model</code>应该算是存在于客户端的与服器端<code>resource</code>/<code>entity</code>对应的一个JS对象, 定义一个<code>Model</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>
<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>
</pre></td><td class='code'><pre><code class='javascript'><span class='line'><span class="nx">TodoItem</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">Model</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span>
</span><span class='line'>    <span class="nx">defaults</span><span class="o">:</span> <span class="p">{</span>
</span><span class='line'>        <span class="nx">title</span><span class="o">:</span> <span class="s1">&#39;&#39;</span><span class="p">,</span>
</span><span class='line'>        <span class="nx">completed</span><span class="o">:</span> <span class="kc">false</span>
</span><span class='line'>    <span class="p">},</span>
</span><span class='line'>    <span class="nx">validate</span><span class="o">:</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">attributes</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>      <span class="c1">// validation goes here</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>


<p>创建一个<code>Model</code>的实例就是创建一个对象 <code>var todoItem = new TodoItem()</code>, 下面对定义在<code>Model</code>中的常用属性做一下说明(<em>这些属性其实是一些钩子, <code>Backbone</code>希望我们去重写这些属性</em>)</p>

<ul>
<li><p><code>defaults</code></p>

<p>通过这个属性来指定<code>Model</code>的默认值</p>

<p>当创建Model实例的时候没有传入对象来初始化, 那么这个实例的属性就与<code>defaults</code>指定的属性值是一致的, 如:</p></li>
</ul>


<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='javascript'><span class='line'><span class="kd">var</span> <span class="nx">todoItem</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">TodoItem</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">JSON</span><span class="p">.</span><span class="nx">stringify</span><span class="p">(</span><span class="nx">todoItem</span><span class="p">.</span><span class="nx">toJSON</span><span class="p">()));</span>
</span><span class='line'><span class="c1">// {&quot;title&quot;:&quot;&quot;,&quot;completed&quot;:false}</span>
</span></code></pre></td></tr></table></div></figure>


<p>  当创建Model实例时传入了对象, 那么这个对象会跟<code>defaults</code>进行merge</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='javascript'><span class='line'><span class="kd">var</span> <span class="nx">todoItem</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">TodoItem</span><span class="p">({</span><span class="s2">&quot;newAttr&quot;</span><span class="o">:</span> <span class="s2">&quot;valueOfNewAttr&quot;</span><span class="p">,</span> <span class="s2">&quot;title&quot;</span><span class="o">:</span> <span class="s2">&quot;Build a time machine&quot;</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">JSON</span><span class="p">.</span><span class="nx">stringify</span><span class="p">(</span><span class="nx">todoItem</span><span class="p">.</span><span class="nx">toJSON</span><span class="p">()));</span>
</span><span class='line'><span class="c1">// {&quot;newAttr&quot;:&quot;valueOfNewAttr&quot;,&quot;title&quot;:&quot;Build a time machine&quot;,&quot;completed&quot;:false}</span>
</span></code></pre></td></tr></table></div></figure>


<ul>
<li><p><code>validate</code></p>

<p> 将对<code>Model</code>的验证逻辑放在这个属性对应的方法中, 一般情况下, 我们不会直接调用这个<code>validate</code>方法, 它扮演的角色有点像<code>实现</code>定义在父类中的<code>抽象方法</code>, 这个方法会在<code>Model</code>的其他方法中被用到, 比如以下的这些方法:</p>

<p> <code>isValid()</code></p>

<p> 我们可以调用<code>Model</code>上的<code>isValid()</code>方法来判断这个<code>Model</code>上的属性值满足验证条件</p></li>
</ul>


<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>
<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='javascript'><span class='line'><span class="nx">TodoItem</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">Model</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span>
</span><span class='line'><span class="nx">defaults</span><span class="o">:</span> <span class="p">{</span>
</span><span class='line'>    <span class="nx">title</span><span class="o">:</span> <span class="s1">&#39;&#39;</span><span class="p">,</span>
</span><span class='line'>    <span class="nx">completed</span><span class="o">:</span> <span class="kc">false</span>
</span><span class='line'><span class="p">},</span>
</span><span class='line'><span class="nx">validate</span><span class="o">:</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">attributes</span><span class="p">,</span> <span class="nx">options</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">attributes</span><span class="p">.</span><span class="nx">title</span><span class="p">.</span><span class="nx">indexOf</span><span class="p">(</span><span class="s2">&quot;&lt;&quot;</span><span class="p">)</span> <span class="o">!=</span> <span class="o">-</span><span class="mi">1</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>        <span class="k">return</span> <span class="s2">&quot;html tag is now allowed is title&quot;</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="kd">var</span> <span class="nx">todoItem</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">TodoItem</span><span class="p">({</span>
</span><span class='line'>    <span class="s2">&quot;title&quot;</span><span class="o">:</span> <span class="s2">&quot;&lt;script&gt;...&lt;/script&gt;&quot;</span>
</span><span class='line'><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">todoItem</span><span class="p">.</span><span class="nx">isValid</span><span class="p">());</span>
</span><span class='line'><span class="c1">// false</span>
</span></code></pre></td></tr></table></div></figure>


<p>   <code>save()</code> or <code>set()</code></p>

<p>   默认情况下调用<code>Model</code>的<code>save()</code>方法会触发<code>validate()</code>, 可以通过在<code>save()</code>的时候使用option <code>{validate: false}</code>来跳过验证. 类似的, 也可以在<code>set()</code>时通过option <code>{validate: true}</code>来触发验证.</p>

<p>   <code>validate()</code>方法的返回值比较有趣, 如果验证通过了, 则什么都不用返回, 如果验证失败了, 则需要返回点什么(字符中或是对象都可以).</p>

<p>   <code>validate()</code>方法验证失败之后有两件事件会发生:</p>

<ul>
<li> 将<code>validate()</code>返回的结果添加到<code>Model</code>中, 可以通过<code>model.validationError</code>来访问</li>
<li> 在<code>Model</code>上触发<code>invalid</code>事件, 并像model和error绑定对回调函数上</li>
</ul>

]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[如何解决无法使用Python发送邮件的问题]]></title>
    <link href="http://fedcuit.github.com/blog/2015/04/06/problem-with-python-mail/"/>
    <updated>2015-04-06T22:01:00+08:00</updated>
    <id>http://fedcuit.github.com/blog/2015/04/06/problem-with-python-mail</id>
    <content type="html"><![CDATA[<p>这两天在玩Flask Web开发,其中讲到使用Flask Mail来发送邮件, 例子里面用的是Gmail的SMTP (Simple Mail Transter Protocal) 服务器, 我想国内的话还是用QQ邮箱方便一些吧,于是打开QQ邮箱的设置面板,找到如下的配置信息:</p>

<pre><code>接收邮件服务器：imap.qq.com，使用SSL，端口号993
发送邮件服务器：smtp.qq.com，使用SSL，端口号465或587
账户名：您的QQ邮箱账户名（如果您是VIP帐号或Foxmail帐号，账户名需要填写完整的邮件地址）
密码：您的QQ邮箱密码
电子邮件地址：您的QQ邮箱的完整邮件地址
</code></pre>

<p>兴高采烈地把这些配置写入程序, 执行一下代码, 没想到竟然报错了:</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=''><span class='line'>ssl.SSLError: [Errno 1] _ssl.c:507: error:140770FC:SSL routines:SSL23_GET_SERVER_HELLO:unknown protocol</span></code></pre></td></tr></table></div></figure>


<p>一开始我以为需要在本机生成什么SSL证书之类的,不过上网搜了一圈发现,原来与程序本身无法,而是由于国内的这些邮件服务商(如网易, 腾讯)使用的SSL协议与python <code>smtplib</code>不兼容(真是坑爹呀). 无奈,只好搭上梯子去连Gmail了.</p>

<p>但接着还是报错了 :(</p>

<p>不过这次报的错信息量多多了:</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=''><span class='line'>smtplib.SMTPAuthenticationError: (534, '5.7.14 &lt;https://accounts.google.com/ContinueSignIn?sarp=1&scc=1&plt=AKgnsbu_a\n5.7.14 jp4-nDDfH6fUTS8dQUeQfvPLhoMiYxCCT4CThSQuhcOJbzMUYI_QQZ44jUTB6FbPnYp8gv\n5.7.14 DEXJItt2gSz6WypV6cr7cZv9rpEprruo_JHXIBw6ZK3wjDKeSKKUKYMtpKoJUmARwONwcJ\n5.7.14 D3v5xypcAJtcazDB_WIUNCP8b3ZQl94GOTIKRvr7ASIgNuyD-rud8doBOTRnKpnLHbuc9B\n5.7.14 lZEGyzw&gt; Please log in via your web browser and then try again.\n5.7.14 Learn more at\n5.7.14 https://support.google.com/mail/bin/answer.py?answer=78754 hv7sm4775459pdb.86 - gsmtp')</span></code></pre></td></tr></table></div></figure>


<p>谷歌不愧是谷歌, 居然还在response里面给出了解决这个问题的网页,虽然是报错的,但是心里还是踏实多了,至少有响应了.</p>

<p>点开错误提示中的那个链接一看,里面列出了多个可能导致无法连接的原因, 一一分析了一下, 觉得这条嫌疑最大:</p>

<pre><code>您的邮件应用可能不支持最新的安全标准。了解如何让安全性较低的应用访问 Gmail 帐户。
</code></pre>

<p>转到&#8221;允许不够安全的应用&#8221;网页, 开启了让不够安全的应用访问Gmail的开关, 再次运行程序, 谢谢谷歌,邮件终于可以发出去了.</p>
]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[在功能测试中使用Togglz]]></title>
    <link href="http://fedcuit.github.com/blog/2014/12/15/toggle-in-functional-test/"/>
    <updated>2014-12-15T21:15:00+08:00</updated>
    <id>http://fedcuit.github.com/blog/2014/12/15/toggle-in-functional-test</id>
    <content type="html"><![CDATA[<h2>Togglz</h2>

<p>因为目前的这个项目需要每个迭代(两周)都发布一次, 并且有很多的story都是需要做A/B testing的 (简单讲，A/B testing就是对同一个功能有两种不同实现或是设计，发布之后通过用户反馈来判断某种设计更受欢迎)，因此就有了这样的需求: 如果一个story在当前迭代中无法完成，那样需要给它加上toggle, 这样只需在生产环境将toggle关闭，不为担心未完成的功能被release出去；另一方面，如果发现新的实现、体验不被欢迎，那么只需将toggle关闭就可以快速地返回到旧的实现了。为了满足上面的需求，我们选择了<a href="http://www.togglz.org/">togglz</a>。</p>

<p>但是这种方式进行了一段时间后，问题开始出现了。功能测试中的有些测试方法是针对旧的体验书写的，另外还有一些测试方法是对同一功能的新的体验书写的，我们想同时保留针对新旧两种体验的测试方法，但是想这样做的话就需要手动来打开或是关闭对应的测试方法，比如说现在需要对<code>AwesomeFeature</code>做A/B testing, 我们添加了一个toggle叫 <code>NEW_DESIGN_FOR_AWESOME_FEATURE</code>, 对应的就有两种情况</p>

<ul>
<li>当这个toggle开启的时候 <code>NEW_DESIGN_FOR_AWESOME_FEATURE = true</code>, 对应的测试需要修改为</li>
</ul>


<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>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
</pre></td><td class='code'><pre><code class='java'><span class='line'><span class="nd">@Ignore</span>
</span><span class='line'><span class="nd">@Test</span>
</span><span class='line'><span class="kd">public</span> <span class="kt">void</span> <span class="nf">shouldDoSomethingForAwesomeFeature</span><span class="o">()</span> <span class="o">{}</span>
</span><span class='line'>      
</span><span class='line'><span class="nd">@Test</span>
</span><span class='line'><span class="kd">public</span> <span class="kt">void</span> <span class="nf">shouldDoSomethingForNewDesignForAwesomeFeature</span><span class="o">()</span> <span class="o">{}</span>
</span></code></pre></td></tr></table></div></figure>


<ul>
<li>当这个toggle关闭的时候 <code>NEW_DESIGN_FOR_AWESOME_FEATURE = false</code>, 对应的测试需要修改为</li>
</ul>


<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>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
</pre></td><td class='code'><pre><code class='java'><span class='line'><span class="nd">@Test</span>
</span><span class='line'><span class="kd">public</span> <span class="kt">void</span> <span class="nf">shouldDoSomethingForAwesomeFeature</span><span class="o">()</span> <span class="o">{}</span>
</span><span class='line'>      
</span><span class='line'><span class="nd">@Ignore</span>
</span><span class='line'><span class="nd">@Test</span>
</span><span class='line'><span class="kd">public</span> <span class="kt">void</span> <span class="nf">shouldDoSomethingForNewDesignForAwesomeFeature</span><span class="o">()</span> <span class="o">{}</span>
</span></code></pre></td></tr></table></div></figure>


<h2>RunIf</h2>

<p>我们需要根据toggle的配置来动态来决定哪些测试方法需要被执行！</p>

<p>于是求助google, 发现了有这么个东西 <a href="https://code.google.com/p/junit-ext/">junit-ext</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>
<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='java'><span class='line'><span class="nd">@RunWith</span><span class="o">(</span><span class="n">JunitExtRunner</span><span class="o">.</span><span class="na">class</span><span class="o">)</span>
</span><span class='line'><span class="kd">public</span> <span class="kd">class</span> <span class="nc">TestCasesOnDifferentOS</span> <span class="o">{</span>
</span><span class='line'>    <span class="nd">@Test</span>
</span><span class='line'>    <span class="nd">@RunIf</span><span class="o">(</span><span class="n">value</span> <span class="o">=</span> <span class="n">OSChecker</span><span class="o">.</span><span class="na">class</span><span class="o">,</span> <span class="n">arguments</span> <span class="o">=</span> <span class="n">OSChecker</span><span class="o">.</span><span class="na">MAC</span><span class="o">)</span>
</span><span class='line'>    <span class="kd">public</span> <span class="kt">void</span> <span class="nf">shouldRunOnMac</span><span class="o">()</span> <span class="kd">throws</span> <span class="n">Exception</span> <span class="o">{</span>
</span><span class='line'>    <span class="o">}</span>
</span><span class='line'>
</span><span class='line'>    <span class="nd">@Test</span>
</span><span class='line'>    <span class="nd">@RunIf</span><span class="o">(</span><span class="n">value</span> <span class="o">=</span> <span class="n">OSChecker</span><span class="o">.</span><span class="na">class</span><span class="o">,</span> <span class="n">arguments</span> <span class="o">=</span> <span class="n">OSChecker</span><span class="o">.</span><span class="na">WINDOWS</span><span class="o">)</span>
</span><span class='line'>    <span class="kd">public</span> <span class="kt">void</span> <span class="nf">shouldRunOnWindows</span><span class="o">()</span> <span class="kd">throws</span> <span class="n">Exception</span> <span class="o">{</span>
</span><span class='line'>  <span class="o">}</span>
</span><span class='line'><span class="o">}</span>
</span></code></pre></td></tr></table></div></figure>


<p>我们只需要在@RunIf里面使用我们自己的Checker就可以很方便地控制测试方法的执行与否，于是脑海中出现了这样片段:</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>
<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='java'><span class='line'><span class="nd">@RunWith</span><span class="o">(</span><span class="n">JunitExtRunner</span><span class="o">.</span><span class="na">class</span><span class="o">)</span>
</span><span class='line'><span class="kd">public</span> <span class="kd">class</span> <span class="nc">TestCasesOnDifferentDesign</span> <span class="o">{</span>
</span><span class='line'>    <span class="nd">@Test</span>
</span><span class='line'>    <span class="nd">@RunIf</span><span class="o">(</span><span class="n">value</span> <span class="o">=</span> <span class="n">ToggleChecker</span><span class="o">.</span><span class="na">class</span><span class="o">,</span> <span class="n">arguments</span> <span class="o">=</span> <span class="o">{</span><span class="s">&quot;NEW_DESIGN_FOR_AWESOME_FEATURE&quot;</span><span class="o">,</span> <span class="s">&quot;false&quot;</span><span class="o">})</span>
</span><span class='line'>    <span class="kd">public</span> <span class="kt">void</span> <span class="nf">shouldDoSomethingForAwesomeFeature</span><span class="o">()</span> <span class="kd">throws</span> <span class="n">Exception</span> <span class="o">{</span>
</span><span class='line'>    <span class="o">}</span>
</span><span class='line'>
</span><span class='line'>    <span class="nd">@Test</span>
</span><span class='line'>    <span class="nd">@RunIf</span><span class="o">(</span><span class="n">value</span> <span class="o">=</span> <span class="n">ToggleChecker</span><span class="o">.</span><span class="na">class</span><span class="o">,</span> <span class="n">arguments</span> <span class="o">=</span> <span class="o">{</span><span class="s">&quot;NEW_DESIGN_FOR_AWESOME_FEATURE&quot;</span><span class="o">,</span> <span class="s">&quot;true&quot;</span><span class="o">})</span>
</span><span class='line'>    <span class="kd">public</span> <span class="kt">void</span> <span class="nf">shouldDoSomethingForNewDesignForAwesomeFeature</span><span class="o">()</span> <span class="kd">throws</span> <span class="n">Exception</span> <span class="o">{</span>
</span><span class='line'>  <span class="o">}</span>
</span><span class='line'><span class="o">}</span>
</span></code></pre></td></tr></table></div></figure>


<p>感觉不错，似乎已经成功一大半了，但是。。。</p>

<p>当我尝试给现有的测试类加上<code>@RunWith(JunitExtRunner.class)</code>时，才注意到他上面已经指定了一个Runner了(<code>@RunWith(Theories.class)</code>), 再问google后得到一个令人绝望的消息，一个测试类不能指定多个Runner!!!</p>

<h2>assumeThat</h2>

<p>看来只能另辟蹊径了, 接着找可以控制测试方法执行的办法。</p>

<p><a href="http://junit.sourceforge.net/javadoc/org/junit/Assume.html#assumeThat\(T,%20org.hamcrest.Matcher\)">assumeThat</a>似乎可以，它会在条件不满足的时候中止当前的测试方法并且ignore之, 而且这是junit自带的，不需要使用额外的runner。</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>
<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='java'><span class='line'><span class="kd">public</span> <span class="kd">class</span> <span class="nc">TestCasesOnDifferentDesign</span> <span class="o">{</span>
</span><span class='line'>    <span class="nd">@Test</span>
</span><span class='line'>    <span class="kd">public</span> <span class="kt">void</span> <span class="nf">shouldDoSomethingForAwesomeFeature</span><span class="o">()</span> <span class="kd">throws</span> <span class="n">Exception</span> <span class="o">{</span>
</span><span class='line'>      <span class="n">assumeThat</span><span class="o">(</span><span class="n">NEW_DESIGN_FOR_AWESOME_FEATURE</span><span class="o">.</span><span class="na">isActive</span><span class="o">(),</span> <span class="n">is</span><span class="o">(</span><span class="kc">false</span><span class="o">));</span>
</span><span class='line'>      
</span><span class='line'>      <span class="c1">//...</span>
</span><span class='line'>    <span class="o">}</span>
</span><span class='line'>
</span><span class='line'>    <span class="nd">@Test</span>
</span><span class='line'>    <span class="kd">public</span> <span class="kt">void</span> <span class="nf">shouldDoSomethingForNewDesignForAwesomeFeature</span><span class="o">()</span> <span class="kd">throws</span> <span class="n">Exception</span> <span class="o">{</span>
</span><span class='line'>      <span class="n">assumeThat</span><span class="o">(</span><span class="n">NEW_DESIGN_FOR_AWESOME_FEATURE</span><span class="o">.</span><span class="na">isActive</span><span class="o">(),</span> <span class="n">is</span><span class="o">(</span><span class="kc">true</span><span class="o">));</span>
</span><span class='line'>      
</span><span class='line'>      <span class="c1">///...</span>
</span><span class='line'>  <span class="o">}</span>
</span><span class='line'><span class="o">}</span>
</span></code></pre></td></tr></table></div></figure>


<h2>FeatureManagerProvider</h2>

<p>现在形式一片大好，接下来要做的就是想办法读取到toggle的状态。当我们执行 <code>NEW_DESIGN_FOR_AWESOME_FEATURE.isActive()</code>的时候，实际上是去一个FeatureManager那里查询指定的toggle的状态，togglz在web应用里有对应的特定实现，即有现成的FeatureManager可以使用。而我们的功能测试是独立于web应用的另外一个module, 因此我们需要提供自己的FeatureManager才可以: 第一步，在mvn中通过copy-resource将定义在webapp module中的toggle配置信息 togglz.properties文件复制到功能测试模块中；第二步，自定义一个FeatureManager来读取toggle信息。</p>

<h3>TogglzConfig</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>
<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>
</pre></td><td class='code'><pre><code class='java'><span class='line'><span class="kd">public</span> <span class="kd">class</span> <span class="nc">MyTogglzConfig</span> <span class="kd">implements</span> <span class="n">TogglzConfig</span> <span class="o">{</span>
</span><span class='line'>  <span class="nd">@Override</span>
</span><span class='line'>  <span class="kd">public</span> <span class="n">Class</span><span class="o">&lt;?</span> <span class="kd">extends</span> <span class="n">Feature</span><span class="o">&gt;</span> <span class="n">getFeatureClass</span><span class="o">()</span> <span class="o">{</span>
</span><span class='line'>    <span class="k">return</span> <span class="n">MyFeature</span><span class="o">.</span><span class="na">class</span><span class="o">;</span>
</span><span class='line'>  <span class="o">}</span>
</span><span class='line'>
</span><span class='line'>  <span class="nd">@Override</span>
</span><span class='line'>  <span class="kd">public</span> <span class="n">StateRepository</span> <span class="nf">getStateRepository</span><span class="o">()</span> <span class="o">{</span>
</span><span class='line'>    <span class="n">URL</span> <span class="n">toggleProperties</span> <span class="o">=</span> <span class="n">getClass</span><span class="o">().</span><span class="na">getClassLoader</span><span class="o">().</span><span class="na">getResource</span><span class="o">(</span><span class="s">&quot;togglz.properties&quot;</span><span class="o">);</span>
</span><span class='line'>    <span class="k">assert</span> <span class="n">toggleProperties</span> <span class="o">!=</span> <span class="kc">null</span><span class="o">;</span>
</span><span class='line'>    <span class="k">try</span> <span class="o">{</span>
</span><span class='line'>      <span class="k">return</span> <span class="k">new</span> <span class="nf">FileBasedStateRepository</span><span class="o">(</span><span class="k">new</span> <span class="n">File</span><span class="o">(</span><span class="n">toggleProperties</span><span class="o">.</span><span class="na">toURI</span><span class="o">()));</span>
</span><span class='line'>    <span class="o">}</span> <span class="k">catch</span> <span class="o">(</span><span class="n">URISyntaxException</span> <span class="n">e</span><span class="o">)</span> <span class="o">{</span>
</span><span class='line'>      <span class="n">e</span><span class="o">.</span><span class="na">printStackTrace</span><span class="o">();</span>
</span><span class='line'>      <span class="k">return</span> <span class="kc">null</span><span class="o">;</span>
</span><span class='line'>    <span class="o">}</span>
</span><span class='line'>  <span class="o">}</span>
</span><span class='line'>
</span><span class='line'>  <span class="nd">@Override</span>
</span><span class='line'>  <span class="kd">public</span> <span class="n">UserProvider</span> <span class="nf">getUserProvider</span><span class="o">()</span> <span class="o">{</span>
</span><span class='line'>    <span class="k">return</span> <span class="k">new</span> <span class="nf">NoOpUserProvider</span><span class="o">();</span>
</span><span class='line'>  <span class="o">}</span>
</span><span class='line'><span class="o">}</span>
</span></code></pre></td></tr></table></div></figure>


<p>在我们自己实现的这个togglzConfig中我们主要做了两件事情，一是指定了从哪里读取toggle配置信息，还有就是指定了<code>Feature Enum</code>.</p>

<h3>FeatureManagerProvider</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>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
</pre></td><td class='code'><pre><code class='java'><span class='line'><span class="nd">@BeforeClass</span>
</span><span class='line'><span class="kd">public</span> <span class="kd">static</span> <span class="kt">void</span> <span class="nf">beforeClass</span><span class="o">()</span> <span class="o">{</span>
</span><span class='line'>  <span class="n">FeatureManager</span> <span class="n">featureManager</span> <span class="o">=</span> <span class="k">new</span> <span class="n">FeatureManagerBuilder</span><span class="o">().</span><span class="na">togglzConfig</span><span class="o">(</span><span class="k">new</span> <span class="n">MyTogglzConfig</span><span class="o">()).</span><span class="na">build</span><span class="o">();</span>
</span><span class='line'>  <span class="n">ThreadLocalFeatureManagerProvider</span><span class="o">.</span><span class="na">bind</span><span class="o">(</span><span class="n">featureManager</span><span class="o">);</span>
</span><span class='line'><span class="o">}</span>
</span></code></pre></td></tr></table></div></figure>


<p>在上面的这段代码里，我们使用<code>FeatureManagerBuilder</code>构建了一个FeatureManager, 并且把它注册/绑定到<code>ThreadLocalFeatureManagerProvider</code>, 这两行代码我们是放在了最外层的TestSuite类的<code>BeforeClass</code>方法中，这样保证了在所有测试方法被执行之前toggle信息已经被初始化好了。</p>

<p>Done!</p>
]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[Attach Scala source code in IntelliJ]]></title>
    <link href="http://fedcuit.github.com/blog/2014/11/25/attach-source-for-scala/"/>
    <updated>2014-11-25T11:44:00+08:00</updated>
    <id>http://fedcuit.github.com/blog/2014/11/25/attach-source-for-scala</id>
    <content type="html"><![CDATA[<p>Following below steps to attach source code for Scala in IntelliJ.</p>

<ol>
<li>Open your <code>Project Settings</code></li>
<li>Choose <code>Libraries</code> section</li>
<li>Click <code>+</code> button and choose <code>Scala SDK</code></li>
<li>Specify the location of your downloaded SDK.</li>
</ol>

]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[Testing Directive - Call controller method via isolated scope]]></title>
    <link href="http://fedcuit.github.com/blog/2014/06/27/test-directive-call-controller-method-via-isolated-scope/"/>
    <updated>2014-06-27T14:19:00+08:00</updated>
    <id>http://fedcuit.github.com/blog/2014/06/27/test-directive-call-controller-method-via-isolated-scope</id>
    <content type="html"><![CDATA[<h2>Call controller method via isolated scope</h2>

<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>
<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='html'><span class='line'><span class="nt">&lt;div</span> <span class="na">ng-controller=</span><span class="s">&quot;FruitController&quot;</span> <span class="na">ng-init=</span><span class="s">&quot;init()&quot;</span><span class="nt">&gt;</span>
</span><span class='line'>    <span class="nt">&lt;h4&gt;</span>Call controller method via isolated scope<span class="nt">&lt;/h4&gt;</span>
</span><span class='line'>    <span class="nt">&lt;label&gt;</span>What&#39;s your favorite fruit(name can only contains letter)<span class="nt">&lt;/label&gt;</span>
</span><span class='line'>    <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">&quot;text&quot;</span> <span class="na">ng-model=</span><span class="s">&quot;newFruit&quot;</span><span class="nt">/&gt;</span>
</span><span class='line'>    <span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">&quot;button&quot;</span>
</span><span class='line'>      <span class="na">add-fruit-method-isolated</span>
</span><span class='line'>      <span class="na">is-valid=</span><span class="s">&quot;isValid(name)&quot;</span>
</span><span class='line'>      <span class="na">new-fruit=</span><span class="s">&quot;newFruit&quot;</span>
</span><span class='line'>      <span class="na">fruits=</span><span class="s">&quot;fruits&quot;</span><span class="nt">&gt;</span>
</span><span class='line'>        validate and add
</span><span class='line'>    <span class="nt">&lt;/button&gt;</span>
</span><span class='line'>    <span class="nt">&lt;ul&gt;</span>
</span><span class='line'>        <span class="nt">&lt;li</span> <span class="na">ng-repeat=</span><span class="s">&quot;fruit in fruits track by $index&quot;</span><span class="nt">&gt;</span><span class="nt">&lt;/li&gt;</span>
</span><span class='line'>    <span class="nt">&lt;/ul&gt;</span>
</span><span class='line'><span class="nt">&lt;/div&gt;</span>
</span></code></pre></td></tr></table></div></figure>


<p>Now comes the final one, we have a reference to the validation method in isolated scope, we want to verify this reference has been called, and with the right arguments.</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>
<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>
<span class='line-number'>28</span>
<span class='line-number'>29</span>
<span class='line-number'>30</span>
<span class='line-number'>31</span>
<span class='line-number'>32</span>
<span class='line-number'>33</span>
</pre></td><td class='code'><pre><code class='javascript'><span class='line'><span class="nx">describe</span><span class="p">(</span><span class="s1">&#39;directives&#39;</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">beforeEach</span><span class="p">(</span><span class="nx">module</span><span class="p">(</span><span class="s1">&#39;myApp.directives&#39;</span><span class="p">));</span>
</span><span class='line'>
</span><span class='line'>    <span class="nx">describe</span><span class="p">(</span><span class="s1">&#39;addFruitMethodIsolated&#39;</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">$scope</span><span class="p">,</span> <span class="nx">element</span><span class="p">;</span>
</span><span class='line'>        <span class="nx">beforeEach</span><span class="p">(</span><span class="nx">inject</span><span class="p">(</span><span class="kd">function</span> <span class="p">(</span><span class="nx">$rootScope</span><span class="p">,</span> <span class="nx">$compile</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>            <span class="nx">$scope</span> <span class="o">=</span> <span class="nx">$rootScope</span><span class="p">;</span>
</span><span class='line'>            <span class="nx">$scope</span><span class="p">.</span><span class="nx">fruits</span> <span class="o">=</span> <span class="p">[];</span>
</span><span class='line'>            <span class="nx">$scope</span><span class="p">.</span><span class="nx">newFruit</span> <span class="o">=</span> <span class="s1">&#39;apple&#39;</span><span class="p">;</span>
</span><span class='line'>            <span class="nx">$scope</span><span class="p">.</span><span class="nx">isValid</span> <span class="o">=</span> <span class="nx">angular</span><span class="p">.</span><span class="nx">noop</span><span class="p">;</span>
</span><span class='line'>
</span><span class='line'>            <span class="nx">element</span> <span class="o">=</span> <span class="nx">angular</span><span class="p">.</span><span class="nx">element</span><span class="p">(</span><span class="s1">&#39;&lt;input type=&quot;text&quot; ng-model=&quot;newFruit&quot;/&gt;&#39;</span> <span class="o">+</span>
</span><span class='line'>                <span class="s1">&#39;&lt;button type=&quot;button&quot; &#39;</span> <span class="o">+</span>
</span><span class='line'>                <span class="s1">&#39;add-fruit-method-isolated &#39;</span> <span class="o">+</span>
</span><span class='line'>                <span class="s1">&#39;is-valid=&quot;isValid(name)&quot; &#39;</span> <span class="o">+</span>
</span><span class='line'>                <span class="s1">&#39;new-fruit=&quot;newFruit&quot; &#39;</span> <span class="o">+</span>
</span><span class='line'>                <span class="s1">&#39;fruits=&quot;fruits&quot;&gt;&#39;</span> <span class="o">+</span>
</span><span class='line'>                <span class="s1">&#39;validate and add&lt;/button&gt;&#39;</span><span class="p">);</span>
</span><span class='line'>
</span><span class='line'>            <span class="nx">$compile</span><span class="p">(</span><span class="nx">element</span><span class="p">)(</span><span class="nx">$scope</span><span class="p">);</span>
</span><span class='line'>        <span class="p">}));</span>
</span><span class='line'>
</span><span class='line'>        <span class="nx">it</span><span class="p">(</span><span class="s1">&#39;should add valid fruit to fruit list when click button&#39;</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">isValid</span> <span class="o">=</span> <span class="nx">spyOn</span><span class="p">(</span><span class="nx">$scope</span><span class="p">,</span> <span class="s1">&#39;isValid&#39;</span><span class="p">).</span><span class="nx">andReturn</span><span class="p">(</span><span class="kc">true</span><span class="p">);</span>
</span><span class='line'>
</span><span class='line'>            <span class="nx">element</span><span class="p">.</span><span class="nx">filter</span><span class="p">(</span><span class="s1">&#39;button&#39;</span><span class="p">).</span><span class="nx">trigger</span><span class="p">(</span><span class="s1">&#39;click&#39;</span><span class="p">);</span>
</span><span class='line'>
</span><span class='line'>            <span class="nx">expect</span><span class="p">(</span><span class="nx">isValid</span><span class="p">).</span><span class="nx">toHaveBeenCalled</span><span class="p">();</span>
</span><span class='line'>            <span class="nx">expect</span><span class="p">(</span><span class="nx">isValid</span><span class="p">.</span><span class="nx">mostRecentCall</span><span class="p">.</span><span class="nx">args</span><span class="p">[</span><span class="mi">0</span><span class="p">]).</span><span class="nx">toBe</span><span class="p">(</span><span class="s1">&#39;apple&#39;</span><span class="p">);</span>
</span><span class='line'>            <span class="nx">expect</span><span class="p">(</span><span class="nx">$scope</span><span class="p">.</span><span class="nx">fruits</span><span class="p">[</span><span class="mi">0</span><span class="p">]).</span><span class="nx">toBe</span><span class="p">(</span><span class="s1">&#39;apple&#39;</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>


<p>Not like verify data change in isolated scope, we don&#8217;t need to track method on isolated scope, track on method in default scope is enough. One thing interesting is in the implementation, we need to pass a json object as argument(<code>scope.isValid({name: scope.newFruit})</code>), the json object is used internally in angular, in the test, what we need to verify is only values(<code>expect(isValid.mostRecentCall.args[0]).toBe('apple');</code>).</p>

<p>Check out the implementation below.</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>
<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='javascript'><span class='line'><span class="nx">angular</span><span class="p">.</span><span class="nx">module</span><span class="p">(</span><span class="s1">&#39;myApp.directives&#39;</span><span class="p">,</span> <span class="p">[])</span>
</span><span class='line'>    <span class="p">.</span><span class="nx">directive</span><span class="p">(</span><span class="s1">&#39;addFruitMethodIsolated&#39;</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">scope</span><span class="o">:</span> <span class="p">{</span>
</span><span class='line'>                <span class="nx">fruits</span><span class="o">:</span> <span class="s1">&#39;=&#39;</span><span class="p">,</span>
</span><span class='line'>                <span class="nx">newFruit</span><span class="o">:</span> <span class="s1">&#39;=&#39;</span><span class="p">,</span>
</span><span class='line'>                <span class="nx">isValid</span><span class="o">:</span> <span class="s1">&#39;&amp;&#39;</span>
</span><span class='line'>            <span class="p">},</span>
</span><span class='line'>            <span class="nx">link</span><span class="o">:</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">scope</span><span class="p">,</span> <span class="nx">element</span><span class="p">,</span> <span class="nx">attr</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>                <span class="nx">element</span><span class="p">.</span><span class="nx">click</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">scope</span><span class="p">.</span><span class="nx">isValid</span><span class="p">({</span><span class="nx">name</span><span class="o">:</span> <span class="nx">scope</span><span class="p">.</span><span class="nx">newFruit</span><span class="p">}))</span> <span class="p">{</span>
</span><span class='line'>                        <span class="nx">scope</span><span class="p">.</span><span class="nx">fruits</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="nx">scope</span><span class="p">.</span><span class="nx">newFruit</span><span class="p">);</span>
</span><span class='line'>                        <span class="nx">scope</span><span class="p">.</span><span class="nx">$apply</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="p">};</span>
</span><span class='line'>    <span class="p">});</span>
</span></code></pre></td></tr></table></div></figure>

]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[Testing Directive - Call controller method in default scope]]></title>
    <link href="http://fedcuit.github.com/blog/2014/06/27/test-directive-call-controller-method-in-default-scope/"/>
    <updated>2014-06-27T14:17:00+08:00</updated>
    <id>http://fedcuit.github.com/blog/2014/06/27/test-directive-call-controller-method-in-default-scope</id>
    <content type="html"><![CDATA[<h2>Call controller method in default scope</h2>

<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>
<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>
</pre></td><td class='code'><pre><code class='html'><span class='line'><span class="nt">&lt;div</span> <span class="na">ng-controller=</span><span class="s">&quot;FruitController&quot;</span> <span class="na">ng-init=</span><span class="s">&quot;init()&quot;</span><span class="nt">&gt;</span>
</span><span class='line'>    <span class="nt">&lt;h4&gt;</span>Call controller method in default scope<span class="nt">&lt;/h4&gt;</span>
</span><span class='line'>    <span class="nt">&lt;label&gt;</span>What&#39;s your favorite fruit(name can only contains letter)<span class="nt">&lt;/label&gt;</span>
</span><span class='line'>    <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">&quot;text&quot;</span> <span class="na">ng-model=</span><span class="s">&quot;newFruit&quot;</span><span class="nt">/&gt;</span>
</span><span class='line'>    <span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">&quot;button&quot;</span> <span class="na">add-fruit-method</span><span class="nt">&gt;</span>validate and add<span class="nt">&lt;/button&gt;</span>
</span><span class='line'>    <span class="nt">&lt;ul&gt;</span>
</span><span class='line'>        <span class="nt">&lt;li</span> <span class="na">ng-repeat=</span><span class="s">&quot;fruit in fruits track by $index&quot;</span><span class="nt">&gt;</span><span class="nt">&lt;/li&gt;</span>
</span><span class='line'>    <span class="nt">&lt;/ul&gt;</span>
</span><span class='line'><span class="nt">&lt;/div&gt;</span>
</span></code></pre></td></tr></table></div></figure>


<p>This time, we want to validate the fruit name use typed in first, if it only contains letter, then it&#8217;s eligible to add in, otherwise nothing happen. The validation logic is defined in controller, we need to test the validation method is called inside our directive.</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>
<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>
<span class='line-number'>28</span>
<span class='line-number'>29</span>
<span class='line-number'>30</span>
<span class='line-number'>31</span>
<span class='line-number'>32</span>
<span class='line-number'>33</span>
<span class='line-number'>34</span>
<span class='line-number'>35</span>
</pre></td><td class='code'><pre><code class='javascript'><span class='line'><span class="nx">describe</span><span class="p">(</span><span class="s1">&#39;directives&#39;</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">beforeEach</span><span class="p">(</span><span class="nx">module</span><span class="p">(</span><span class="s1">&#39;myApp.directives&#39;</span><span class="p">));</span>
</span><span class='line'>
</span><span class='line'>    <span class="nx">describe</span><span class="p">(</span><span class="s1">&#39;addFruitMethod&#39;</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">$scope</span><span class="p">,</span> <span class="nx">element</span><span class="p">;</span>
</span><span class='line'>        <span class="nx">beforeEach</span><span class="p">(</span><span class="nx">inject</span><span class="p">(</span><span class="kd">function</span> <span class="p">(</span><span class="nx">$rootScope</span><span class="p">,</span> <span class="nx">$compile</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>            <span class="nx">$scope</span> <span class="o">=</span> <span class="nx">$rootScope</span><span class="p">;</span>
</span><span class='line'>            <span class="nx">$scope</span><span class="p">.</span><span class="nx">fruits</span> <span class="o">=</span> <span class="p">[];</span>
</span><span class='line'>            <span class="nx">$scope</span><span class="p">.</span><span class="nx">newFruit</span> <span class="o">=</span> <span class="s1">&#39;apple&#39;</span><span class="p">;</span>
</span><span class='line'>            <span class="nx">$scope</span><span class="p">.</span><span class="nx">isValid</span> <span class="o">=</span> <span class="nx">angular</span><span class="p">.</span><span class="nx">noop</span><span class="p">;</span>
</span><span class='line'>
</span><span class='line'>            <span class="nx">element</span> <span class="o">=</span> <span class="nx">angular</span><span class="p">.</span><span class="nx">element</span><span class="p">(</span><span class="s1">&#39;&lt;input type=&quot;text&quot; name=&quot;fruit&quot; id=&quot;fruitDefault&quot; ng-model=&quot;newFruit&quot;/&gt;&lt;button type=&quot;button&quot; add-fruit-method&gt;validate and add&lt;/button&gt;&#39;</span><span class="p">);</span>
</span><span class='line'>            <span class="nx">$compile</span><span class="p">(</span><span class="nx">element</span><span class="p">)(</span><span class="nx">$scope</span><span class="p">);</span>
</span><span class='line'>        <span class="p">}));</span>
</span><span class='line'>
</span><span class='line'>        <span class="nx">it</span><span class="p">(</span><span class="s1">&#39;should add valid fruit to fruit list when click button&#39;</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">isValid</span> <span class="o">=</span> <span class="nx">spyOn</span><span class="p">(</span><span class="nx">$scope</span><span class="p">,</span> <span class="s1">&#39;isValid&#39;</span><span class="p">).</span><span class="nx">andReturn</span><span class="p">(</span><span class="kc">true</span><span class="p">);</span>
</span><span class='line'>
</span><span class='line'>            <span class="nx">element</span><span class="p">.</span><span class="nx">filter</span><span class="p">(</span><span class="s1">&#39;button&#39;</span><span class="p">).</span><span class="nx">trigger</span><span class="p">(</span><span class="s1">&#39;click&#39;</span><span class="p">);</span>
</span><span class='line'>
</span><span class='line'>            <span class="nx">expect</span><span class="p">(</span><span class="nx">isValid</span><span class="p">).</span><span class="nx">toHaveBeenCalled</span><span class="p">();</span>
</span><span class='line'>            <span class="nx">expect</span><span class="p">(</span><span class="nx">$scope</span><span class="p">.</span><span class="nx">fruits</span><span class="p">[</span><span class="mi">0</span><span class="p">]).</span><span class="nx">toBe</span><span class="p">(</span><span class="s1">&#39;apple&#39;</span><span class="p">);</span>
</span><span class='line'>
</span><span class='line'>        <span class="p">});</span>
</span><span class='line'>
</span><span class='line'>        <span class="nx">it</span><span class="p">(</span><span class="s1">&#39;should reject invalid fruit when click button&#39;</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">isValid</span> <span class="o">=</span> <span class="nx">spyOn</span><span class="p">(</span><span class="nx">$scope</span><span class="p">,</span> <span class="s1">&#39;isValid&#39;</span><span class="p">).</span><span class="nx">andReturn</span><span class="p">(</span><span class="kc">false</span><span class="p">);</span>
</span><span class='line'>
</span><span class='line'>            <span class="nx">element</span><span class="p">.</span><span class="nx">filter</span><span class="p">(</span><span class="s1">&#39;button&#39;</span><span class="p">).</span><span class="nx">trigger</span><span class="p">(</span><span class="s1">&#39;click&#39;</span><span class="p">);</span>
</span><span class='line'>
</span><span class='line'>            <span class="nx">expect</span><span class="p">(</span><span class="nx">isValid</span><span class="p">).</span><span class="nx">toHaveBeenCalled</span><span class="p">();</span>
</span><span class='line'>            <span class="nx">expect</span><span class="p">(</span><span class="nx">$scope</span><span class="p">.</span><span class="nx">fruits</span><span class="p">.</span><span class="nx">length</span><span class="p">).</span><span class="nx">toBe</span><span class="p">(</span><span class="mi">0</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>


<p>It&#8217;s very similar with testing manipulate data on default scope, the only thing different is we spy on the validation method to verify it has been called, also we let the spy object return the corresponding result to execute each branch.</p>
]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[Testing Directive - Model manipulation with isolated scope]]></title>
    <link href="http://fedcuit.github.com/blog/2014/06/27/test-directive-model-manipulation-with-isolated-scope/"/>
    <updated>2014-06-27T14:15:00+08:00</updated>
    <id>http://fedcuit.github.com/blog/2014/06/27/test-directive-model-manipulation-with-isolated-scope</id>
    <content type="html"><![CDATA[<h2>Model manipulation with isolated scope</h2>

<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>
<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>
</pre></td><td class='code'><pre><code class='html'><span class='line'><span class="nt">&lt;div</span> <span class="na">ng-controller=</span><span class="s">&quot;FruitController&quot;</span> <span class="na">ng-init=</span><span class="s">&quot;init()&quot;</span><span class="nt">&gt;</span>
</span><span class='line'>    <span class="nt">&lt;h4&gt;</span>Model manipulation with isolated scope<span class="nt">&lt;/h4&gt;</span>
</span><span class='line'>    <span class="nt">&lt;label&gt;</span>What&#39;s your favorite fruit<span class="nt">&lt;/label&gt;</span>
</span><span class='line'>    <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">&quot;text&quot;</span> <span class="na">ng-model=</span><span class="s">&quot;newFruit&quot;</span><span class="nt">/&gt;</span>
</span><span class='line'>    <span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">&quot;button&quot;</span> <span class="na">add-fruit</span> <span class="na">fruits=</span><span class="s">&quot;fruits&quot;</span> <span class="na">new-fruit=</span><span class="s">&quot;newFruit&quot;</span><span class="nt">&gt;</span>Add<span class="nt">&lt;/button&gt;</span>
</span><span class='line'>    <span class="nt">&lt;ul&gt;</span>
</span><span class='line'>        <span class="nt">&lt;li</span> <span class="na">ng-repeat=</span><span class="s">&quot;fruit in fruits track by $index&quot;</span><span class="nt">&gt;</span><span class="nt">&lt;/li&gt;</span>
</span><span class='line'>    <span class="nt">&lt;/ul&gt;</span>
</span><span class='line'><span class="nt">&lt;/div&gt;</span>
</span></code></pre></td></tr></table></div></figure>


<p>The above directive manipulate data in default scope, now we create a isolated scope for the directive, the test point change to verify the data on isolated scope.</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>
<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>
</pre></td><td class='code'><pre><code class='javascript'><span class='line'><span class="nx">describe</span><span class="p">(</span><span class="s1">&#39;directives&#39;</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">beforeEach</span><span class="p">(</span><span class="nx">module</span><span class="p">(</span><span class="s1">&#39;myApp.directives&#39;</span><span class="p">));</span>
</span><span class='line'>
</span><span class='line'>    <span class="nx">describe</span><span class="p">(</span><span class="s1">&#39;addFruit&#39;</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">$scope</span><span class="p">,</span> <span class="nx">element</span><span class="p">;</span>
</span><span class='line'>        <span class="nx">beforeEach</span><span class="p">(</span><span class="nx">inject</span><span class="p">(</span><span class="kd">function</span> <span class="p">(</span><span class="nx">$rootScope</span><span class="p">,</span> <span class="nx">$compile</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>            <span class="nx">$scope</span> <span class="o">=</span> <span class="nx">$rootScope</span><span class="p">;</span>
</span><span class='line'>            <span class="nx">$scope</span><span class="p">.</span><span class="nx">fruits</span> <span class="o">=</span> <span class="p">[];</span>
</span><span class='line'>            <span class="nx">$scope</span><span class="p">.</span><span class="nx">newFruit</span> <span class="o">=</span> <span class="s1">&#39;apple&#39;</span><span class="p">;</span>
</span><span class='line'>            <span class="nx">element</span> <span class="o">=</span> <span class="nx">angular</span><span class="p">.</span><span class="nx">element</span><span class="p">(</span><span class="s1">&#39;&lt;input type=&quot;text&quot; ng-model=&quot;newFruit&quot;/&gt;&lt;button type=&quot;button&quot; add-fruit fruits=&quot;fruits&quot; new-fruit=&quot;newFruit&quot;&gt;Add&lt;/button&gt;&#39;</span><span class="p">);</span>
</span><span class='line'>
</span><span class='line'>            <span class="nx">$compile</span><span class="p">(</span><span class="nx">element</span><span class="p">)(</span><span class="nx">$rootScope</span><span class="p">);</span>
</span><span class='line'>        <span class="p">}));</span>
</span><span class='line'>        <span class="nx">it</span><span class="p">(</span><span class="s1">&#39;should add fruit to fruit list when click button&#39;</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">element</span><span class="p">.</span><span class="nx">filter</span><span class="p">(</span><span class="s1">&#39;button&#39;</span><span class="p">).</span><span class="nx">trigger</span><span class="p">(</span><span class="s1">&#39;click&#39;</span><span class="p">);</span>
</span><span class='line'>
</span><span class='line'>            <span class="nx">expect</span><span class="p">(</span><span class="nx">element</span><span class="p">.</span><span class="nx">scope</span><span class="p">().</span><span class="nx">fruits</span><span class="p">[</span><span class="mi">0</span><span class="p">]).</span><span class="nx">toBe</span><span class="p">(</span><span class="s1">&#39;apple&#39;</span><span class="p">);</span> <span class="c1">// use element.scope() to access isolated scope</span>
</span><span class='line'>            <span class="nx">expect</span><span class="p">(</span><span class="nx">$scope</span><span class="p">.</span><span class="nx">fruits</span><span class="p">[</span><span class="mi">0</span><span class="p">]).</span><span class="nx">toBe</span><span class="p">(</span><span class="s1">&#39;apple&#39;</span><span class="p">);</span> <span class="c1">// also verify default scope is updated</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>


<p>In the test, we setup the surrounding scope, then verify both the default scope and isolated scope are updated.(we use <code>element.scope()</code> to access the isolated scope).</p>
]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[Testing Directive - Model manipulation with default scope]]></title>
    <link href="http://fedcuit.github.com/blog/2014/06/27/test-directive-model-manipulation-with-default-scope/"/>
    <updated>2014-06-27T14:13:00+08:00</updated>
    <id>http://fedcuit.github.com/blog/2014/06/27/test-directive-model-manipulation-with-default-scope</id>
    <content type="html"><![CDATA[<h2>Model manipulation with default scope</h2>

<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>
<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>
</pre></td><td class='code'><pre><code class='html'><span class='line'><span class="nt">&lt;div</span> <span class="na">ng-controller=</span><span class="s">&quot;FruitController&quot;</span> <span class="na">ng-init=</span><span class="s">&quot;init()&quot;</span><span class="nt">&gt;</span>
</span><span class='line'>    <span class="nt">&lt;h4&gt;</span>Model manipulation with default scope<span class="nt">&lt;/h4&gt;</span>
</span><span class='line'>    <span class="nt">&lt;label&gt;</span>What&#39;s your favorite fruit<span class="nt">&lt;/label&gt;</span>
</span><span class='line'>    <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">&quot;text&quot;</span> <span class="na">ng-model=</span><span class="s">&quot;newFruit&quot;</span><span class="nt">/&gt;</span>
</span><span class='line'>    <span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">&quot;button&quot;</span> <span class="na">add-fruit-default</span><span class="nt">&gt;</span>Add<span class="nt">&lt;/button&gt;</span>
</span><span class='line'>    <span class="nt">&lt;ul&gt;</span>
</span><span class='line'>        <span class="nt">&lt;li</span> <span class="na">ng-repeat=</span><span class="s">&quot;fruit in fruits track by $index&quot;</span><span class="nt">&gt;</span><span class="nt">&lt;/li&gt;</span>
</span><span class='line'>    <span class="nt">&lt;/ul&gt;</span>
</span><span class='line'><span class="nt">&lt;/div&gt;</span>
</span></code></pre></td></tr></table></div></figure>


<p>Let&#8217;s try something advanced, we have a input box to type in a fruit name and a button, after click the button, the value of the input box will added into the fruit list.</p>

<p>How to write test for this directive? If the fruit list on the scope will have the fruit we passed in after we click the button, then we think it&#8217;s working well.</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>
<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>
</pre></td><td class='code'><pre><code class='javascript'><span class='line'><span class="nx">describe</span><span class="p">(</span><span class="s1">&#39;directives&#39;</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">beforeEach</span><span class="p">(</span><span class="nx">module</span><span class="p">(</span><span class="s1">&#39;myApp.directives&#39;</span><span class="p">));</span>
</span><span class='line'>
</span><span class='line'>    <span class="nx">describe</span><span class="p">(</span><span class="s1">&#39;addFruitDefault&#39;</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">$scope</span><span class="p">,</span> <span class="nx">element</span><span class="p">;</span>
</span><span class='line'>        <span class="nx">beforeEach</span><span class="p">(</span><span class="nx">inject</span><span class="p">(</span><span class="kd">function</span> <span class="p">(</span><span class="nx">$rootScope</span><span class="p">,</span> <span class="nx">$compile</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>            <span class="nx">$scope</span> <span class="o">=</span> <span class="nx">$rootScope</span><span class="p">;</span>
</span><span class='line'>            <span class="nx">$scope</span><span class="p">.</span><span class="nx">fruits</span> <span class="o">=</span> <span class="p">[];</span>
</span><span class='line'>            <span class="nx">$scope</span><span class="p">.</span><span class="nx">newFruit</span> <span class="o">=</span> <span class="s1">&#39;apple&#39;</span><span class="p">;</span>
</span><span class='line'>
</span><span class='line'>            <span class="nx">element</span> <span class="o">=</span> <span class="nx">angular</span><span class="p">.</span><span class="nx">element</span><span class="p">(</span><span class="s1">&#39;&lt;input type=&quot;text&quot; name=&quot;fruit&quot; id=&quot;fruitDefault&quot; ng-model=&quot;newFruit&quot;/&gt;&lt;button type=&quot;button&quot; add-fruit-default&gt;Add&lt;/button&gt;&#39;</span><span class="p">);</span>
</span><span class='line'>            <span class="nx">$compile</span><span class="p">(</span><span class="nx">element</span><span class="p">)(</span><span class="nx">$scope</span><span class="p">);</span>
</span><span class='line'>        <span class="p">}));</span>
</span><span class='line'>
</span><span class='line'>        <span class="nx">it</span><span class="p">(</span><span class="s1">&#39;should add fruit to fruit list when click button&#39;</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">element</span><span class="p">.</span><span class="nx">filter</span><span class="p">(</span><span class="s1">&#39;button&#39;</span><span class="p">).</span><span class="nx">trigger</span><span class="p">(</span><span class="s1">&#39;click&#39;</span><span class="p">);</span>
</span><span class='line'>
</span><span class='line'>            <span class="nx">expect</span><span class="p">(</span><span class="nx">$scope</span><span class="p">.</span><span class="nx">fruits</span><span class="p">[</span><span class="mi">0</span><span class="p">]).</span><span class="nx">toBe</span><span class="p">(</span><span class="s1">&#39;apple&#39;</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>


<p>
Not like the first test code, this one needs to verify the data on scope, we need a real scope, also we need to initialize the state of the scope, after we compile the html fragment using the scope, interact with the DOM will affect the scope.</p>
]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[Testing Directive - Basic Dom Manipulation]]></title>
    <link href="http://fedcuit.github.com/blog/2014/06/27/test-directive-basic-dom-manipulation/"/>
    <updated>2014-06-27T14:08:00+08:00</updated>
    <id>http://fedcuit.github.com/blog/2014/06/27/test-directive-basic-dom-manipulation</id>
    <content type="html"><![CDATA[<h2>Basic Dom Manipulation</h2>

<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>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
</pre></td><td class='code'><pre><code class='html'><span class='line'><span class="nt">&lt;div&gt;</span>
</span><span class='line'>    <span class="nt">&lt;h4&gt;</span>Basic Dom Manipulation<span class="nt">&lt;/h4&gt;</span>
</span><span class='line'>    <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">&quot;text&quot;</span> <span class="na">name=</span><span class="s">&quot;search&quot;</span> <span class="na">id=</span><span class="s">&quot;search&quot;</span><span class="nt">/&gt;</span>
</span><span class='line'>    <span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">&quot;button&quot;</span> <span class="na">clear-search</span><span class="nt">&gt;</span>Clear<span class="nt">&lt;/button&gt;</span>
</span><span class='line'><span class="nt">&lt;/div&gt;</span>
</span></code></pre></td></tr></table></div></figure>


<p>We&#8217;re going to write a directive for the button, after click it, the search box wil be clear.
To demonstrate DOM manipulation, we&#8217;ll not set <code>ngModel</code> for the search box. Let&#8217;s write out the test first.</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>
<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>
</pre></td><td class='code'><pre><code class='javascript'><span class='line'><span class="nx">describe</span><span class="p">(</span><span class="s1">&#39;directives&#39;</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">beforeEach</span><span class="p">(</span><span class="nx">module</span><span class="p">(</span><span class="s1">&#39;myApp.directives&#39;</span><span class="p">));</span>
</span><span class='line'>
</span><span class='line'>    <span class="nx">describe</span><span class="p">(</span><span class="s1">&#39;clearSearch&#39;</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">$scope</span><span class="p">,</span> <span class="nx">element</span><span class="p">;</span>
</span><span class='line'>        <span class="nx">beforeEach</span><span class="p">(</span><span class="nx">inject</span><span class="p">(</span><span class="kd">function</span> <span class="p">(</span><span class="nx">$rootScope</span><span class="p">,</span> <span class="nx">$compile</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>            <span class="nx">$scope</span> <span class="o">=</span> <span class="nx">$rootScope</span><span class="p">;</span>
</span><span class='line'>            <span class="nx">element</span> <span class="o">=</span> <span class="nx">angular</span><span class="p">.</span><span class="nx">element</span><span class="p">(</span><span class="s1">&#39;&lt;input type=&quot;text&quot;/&gt;&lt;button type=&quot;button&quot; clear-search&gt;Clear&lt;/button&gt;&#39;</span><span class="p">);</span>
</span><span class='line'>
</span><span class='line'>            <span class="nx">$compile</span><span class="p">(</span><span class="nx">element</span><span class="p">)(</span><span class="nx">$scope</span><span class="p">);</span>
</span><span class='line'>        <span class="p">}));</span>
</span><span class='line'>        <span class="nx">it</span><span class="p">(</span><span class="s1">&#39;should clear search box when click clear button&#39;</span><span class="p">,</span> <span class="nx">inject</span><span class="p">(</span><span class="kd">function</span> <span class="p">(</span><span class="nx">$rootScope</span><span class="p">,</span> <span class="nx">$compile</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>            <span class="kd">var</span> <span class="nx">val</span> <span class="o">=</span> <span class="nx">spyOn</span><span class="p">(</span><span class="nx">jQuery</span><span class="p">.</span><span class="nx">fn</span><span class="p">,</span> <span class="s1">&#39;val&#39;</span><span class="p">);</span>
</span><span class='line'>            <span class="kd">var</span> <span class="nx">prev</span> <span class="o">=</span> <span class="nx">spyOn</span><span class="p">(</span><span class="nx">jQuery</span><span class="p">.</span><span class="nx">fn</span><span class="p">,</span> <span class="s1">&#39;prev&#39;</span><span class="p">);</span>
</span><span class='line'>
</span><span class='line'>            <span class="nx">element</span><span class="p">.</span><span class="nx">filter</span><span class="p">(</span><span class="s1">&#39;input&#39;</span><span class="p">).</span><span class="nx">val</span><span class="p">(</span><span class="s1">&#39;some value&#39;</span><span class="p">);</span>
</span><span class='line'>            <span class="nx">element</span><span class="p">.</span><span class="nx">filter</span><span class="p">(</span><span class="s1">&#39;button&#39;</span><span class="p">).</span><span class="nx">trigger</span><span class="p">(</span><span class="s1">&#39;click&#39;</span><span class="p">);</span>
</span><span class='line'>
</span><span class='line'>            <span class="nx">expect</span><span class="p">(</span><span class="nx">val</span><span class="p">).</span><span class="nx">toHaveBeenCalled</span><span class="p">();</span>
</span><span class='line'>            <span class="nx">expect</span><span class="p">(</span><span class="nx">val</span><span class="p">.</span><span class="nx">mostRecentCall</span><span class="p">.</span><span class="nx">args</span><span class="p">[</span><span class="mi">0</span><span class="p">]).</span><span class="nx">toBe</span><span class="p">(</span><span class="s1">&#39;&#39;</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>


<p>To be honest, directive which only manipulate DOM doesn&#8217;t need scope, so we can remove scope in test, the test still can pass.</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>
<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='javascript'><span class='line'><span class="nx">describe</span><span class="p">(</span><span class="s1">&#39;directives&#39;</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">beforeEach</span><span class="p">(</span><span class="nx">module</span><span class="p">(</span><span class="s1">&#39;myApp.directives&#39;</span><span class="p">));</span>
</span><span class='line'>
</span><span class='line'>    <span class="nx">describe</span><span class="p">(</span><span class="s1">&#39;clearSearch&#39;</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">element</span><span class="p">;</span>
</span><span class='line'>        <span class="nx">beforeEach</span><span class="p">(</span><span class="nx">inject</span><span class="p">(</span><span class="kd">function</span> <span class="p">(</span><span class="nx">$rootScope</span><span class="p">,</span> <span class="nx">$compile</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>            <span class="nx">element</span> <span class="o">=</span> <span class="nx">angular</span><span class="p">.</span><span class="nx">element</span><span class="p">(</span><span class="s1">&#39;&lt;input type=&quot;text&quot;/&gt;&lt;button type=&quot;button&quot; clear-search&gt;Clear&lt;/button&gt;&#39;</span><span class="p">);</span>
</span><span class='line'>
</span><span class='line'>            <span class="nx">$compile</span><span class="p">(</span><span class="nx">element</span><span class="p">)({});</span>
</span><span class='line'>        <span class="p">}));</span>
</span><span class='line'>        <span class="nx">it</span><span class="p">(</span><span class="s1">&#39;should clear search box when click clear button&#39;</span><span class="p">,</span> <span class="nx">inject</span><span class="p">(</span><span class="kd">function</span> <span class="p">(</span><span class="nx">$rootScope</span><span class="p">,</span> <span class="nx">$compile</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>            <span class="kd">var</span> <span class="nx">val</span> <span class="o">=</span> <span class="nx">spyOn</span><span class="p">(</span><span class="nx">jQuery</span><span class="p">.</span><span class="nx">fn</span><span class="p">,</span> <span class="s1">&#39;val&#39;</span><span class="p">);</span>
</span><span class='line'>            <span class="kd">var</span> <span class="nx">prev</span> <span class="o">=</span> <span class="nx">spyOn</span><span class="p">(</span><span class="nx">jQuery</span><span class="p">.</span><span class="nx">fn</span><span class="p">,</span> <span class="s1">&#39;prev&#39;</span><span class="p">);</span>
</span><span class='line'>
</span><span class='line'>            <span class="nx">element</span><span class="p">.</span><span class="nx">filter</span><span class="p">(</span><span class="s1">&#39;input&#39;</span><span class="p">).</span><span class="nx">val</span><span class="p">(</span><span class="s1">&#39;some value&#39;</span><span class="p">);</span>
</span><span class='line'>            <span class="nx">element</span><span class="p">.</span><span class="nx">filter</span><span class="p">(</span><span class="s1">&#39;button&#39;</span><span class="p">).</span><span class="nx">trigger</span><span class="p">(</span><span class="s1">&#39;click&#39;</span><span class="p">);</span>
</span><span class='line'>
</span><span class='line'>            <span class="nx">expect</span><span class="p">(</span><span class="nx">val</span><span class="p">).</span><span class="nx">toHaveBeenCalled</span><span class="p">();</span>
</span><span class='line'>            <span class="nx">expect</span><span class="p">(</span><span class="nx">val</span><span class="p">.</span><span class="nx">mostRecentCall</span><span class="p">.</span><span class="nx">args</span><span class="p">[</span><span class="mi">0</span><span class="p">]).</span><span class="nx">toBe</span><span class="p">(</span><span class="s1">&#39;&#39;</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>



]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[Hg cheat sheet]]></title>
    <link href="http://fedcuit.github.com/blog/2014/02/11/hg-cheat-sheet/"/>
    <updated>2014-02-11T10:19:00+08:00</updated>
    <id>http://fedcuit.github.com/blog/2014/02/11/hg-cheat-sheet</id>
    <content type="html"><![CDATA[<ul>
<li>Remove unversioned file<br/>
<code>hg purge</code></li>
<li>Discard local change<br/>
<code>hg revert [FILE]</code></li>
<li>Rollback last commit<br/>
<code>hg rollback</code></li>
<li>Looking for changes in the remote repository<br/>
<code>hg incoming</code></li>
<li>Looking for changes you&#8217;ve made that aren&#8217;t in the remote repository<br/>
<code>hg outgoing</code></li>
<li>Reset to a given version (<code>reset --hard</code> in git)<br/>
<code>hg strip -r commit_hash</code></li>
</ul>


<h2><em>branch</em></h2>

<ul>
<li>Switch to another branch<br/>
<code>hg update [BRANCH_NAME]</code></li>
<li>Show current branch name<br/>
<code>hg branch</code></li>
<li>Merge changes from another branch to current branch<br/>
<code>hg merge [ANOTHER_BRANCH_NAME]</code></li>
<li>Check logs on a given branch<br/>
<code>hg log --only-branch my_branch</code></li>
</ul>

]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[Testing With Angular -- Directive]]></title>
    <link href="http://fedcuit.github.com/blog/2014/01/19/testing-with-angular-directives/"/>
    <updated>2014-01-19T21:22:00+08:00</updated>
    <id>http://fedcuit.github.com/blog/2014/01/19/testing-with-angular-directives</id>
    <content type="html"><![CDATA[<p>As a Java developer, I am familiar with test driven development with Java language, but for angular, I&#8217;m not, sometime it&#8217;s even hard to write angular test after the implementation is done.
So I&#8217;ll write a series of articles about how to test with angular, basically, I&#8217;d like to include the test strategy for directives, controllers and services, this article will begin with how to test angular directive.</p>

<p>Let&#8217;s check out the below examples form easy to hard.</p>

<ul>
<li><a href="http://fedcuit.github.com/blog/2014/06/27/test-directive-basic-dom-manipulation/">Basic Dom manipulation</a></li>
<li><a href="http://fedcuit.github.com/blog/2014/06/27/test-directive-model-manipulation-with-default-scope/">Model Manipulation With Default Scope</a></li>
<li><a href="http://fedcuit.github.com/blog/2014/06/27/test-directive-model-manipulation-with-isolated-scope/">Model Manipulation With Isolated Scope</a></li>
<li><a href="http://fedcuit.github.com/blog/2014/06/27/test-directive-call-controller-method-in-default-scope/">Call Controller Method in Default Scope</a></li>
<li><a href="http://fedcuit.github.com/blog/2014/06/27/test-directive-call-controller-method-via-isolated-scope/">Call Controller Method via Isolated Scope</a></li>
</ul>

]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[Scope In Angular]]></title>
    <link href="http://fedcuit.github.com/blog/2014/01/19/scope-in-angular/"/>
    <updated>2014-01-19T12:53:00+08:00</updated>
    <id>http://fedcuit.github.com/blog/2014/01/19/scope-in-angular</id>
    <content type="html"><![CDATA[<p>This post is copied from stackvoerflow, check <a href="http://stackoverflow.com/questions/14914213/when-writing-a-directive-how-do-i-decide-if-a-need-no-new-scope-a-new-child-sc">this</a> for more details.</p>

<p>After writing a lot of directives, I&#8217;ve decided to <strong>use less isolated scope</strong>. Even though it is cool and you encapsulate the data and be sure not to leak data to the parent scope, it severely limits the amount of directives you can use together. So,</p>

<h2>Isolated: a private sandbox</h2>

<p>If the directive you&#8217;re going to write is going to behave entirely on its own and you are not going to share it with other directives, go for isolated scope. (like a component you can just plug it in, with not much customization for the end developer) (it gets very trickier when you try to write sub-elements which have directives within)</p>

<h2>None: simple, read-only directives</h2>

<p>If the directive you&#8217;re going to write is going to just make dom manipulations which has needs no internal state of scope, or explicit scope alterations (mostly very simple things); go for no new scope. (such as ngShow,ngMouseHover, ngClick, ngRepeat)</p>

<h2>Child: a subsection of content</h2>

<p>If the directive you&#8217;re going to write needs to change some elements in parent scope, but also needs to handle some internal state, go for new child scope. (such as ngController)</p>

<p>So keep in mind that don&#8217;t use isolated scope unless you have to.</p>
]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[Traps in Angular Directive -- Return False]]></title>
    <link href="http://fedcuit.github.com/blog/2014/01/11/traps-in-directive-return-false/"/>
    <updated>2014-01-11T20:44:00+08:00</updated>
    <id>http://fedcuit.github.com/blog/2014/01/11/traps-in-directive-return-false</id>
    <content type="html"><![CDATA[<h2>Return false will prevent default browser behavior</h2>

<p>I was blocked for whole afternoon by a very weird phenomenon, two radio buttons(with the same name), one of them can never be checked after you click it, at the last, I found out the root cause is the browser&#8217;s default behavior is prevented by the <code>return false</code> statement in directive.</p>

<p>Let&#8217;s see what a normal radio button group should be:</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>
<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='html'><span class='line'><span class="nt">&lt;body&gt;</span>
</span><span class='line'>    <span class="nt">&lt;div&gt;</span>
</span><span class='line'>        <span class="nt">&lt;div&gt;</span>
</span><span class='line'>            <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">&quot;text&quot;</span> <span class="na">name=</span><span class="s">&quot;&quot;</span> <span class="na">id=</span><span class="s">&quot;&quot;</span><span class="nt">&gt;</span>
</span><span class='line'>        <span class="nt">&lt;/div&gt;</span>
</span><span class='line'>        <span class="nt">&lt;div&gt;</span>
</span><span class='line'>            <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">&quot;radio&quot;</span> <span class="na">name=</span><span class="s">&quot;gender&quot;</span> <span class="na">id=</span><span class="s">&quot;female&quot;</span><span class="nt">&gt;</span>
</span><span class='line'>            <span class="nt">&lt;label</span> <span class="na">for=</span><span class="s">&quot;female&quot;</span><span class="nt">&gt;</span>Female<span class="nt">&lt;/label&gt;</span>
</span><span class='line'>            <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">&quot;radio&quot;</span> <span class="na">name=</span><span class="s">&quot;gender&quot;</span> <span class="na">id=</span><span class="s">&quot;male&quot;</span><span class="nt">&gt;</span>
</span><span class='line'>            <span class="nt">&lt;label</span> <span class="na">for=</span><span class="s">&quot;male&quot;</span><span class="nt">&gt;</span>Male<span class="nt">&lt;/label&gt;</span>
</span><span class='line'>        <span class="nt">&lt;/div&gt;</span>
</span><span class='line'>    <span class="nt">&lt;/div&gt;</span>
</span><span class='line'><span class="nt">&lt;/body&gt;</span>
</span></code></pre></td></tr></table></div></figure>


<p>check the <a href="http://jsbin.com/iKelIko/2/edit?html,css,js,output">demo</a>, click a radio button can make it checked.</p>

<p>Now let&#8217;s make some trouble, if we click a text input field, we want to show a console log say &#8216;input field clicked&#8217;, if other type input component is clicked, do nothing. let&#8217;s write a directive to handle this.</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>
<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='html'><span class='line'><span class="nt">&lt;body</span> <span class="na">ng-app=</span><span class="s">&quot;Demo&quot;</span> <span class="na">ng-controller=</span><span class="s">&quot;DemoController&quot;</span><span class="nt">&gt;</span>
</span><span class='line'>    <span class="nt">&lt;div</span> <span class="na">tell-me</span><span class="nt">&gt;</span>
</span><span class='line'>        <span class="nt">&lt;div&gt;</span>
</span><span class='line'>            <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">&quot;text&quot;</span> <span class="na">name=</span><span class="s">&quot;&quot;</span> <span class="na">id=</span><span class="s">&quot;&quot;</span><span class="nt">&gt;</span>
</span><span class='line'>        <span class="nt">&lt;/div&gt;</span>
</span><span class='line'>        <span class="nt">&lt;div&gt;</span>
</span><span class='line'>            <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">&quot;radio&quot;</span> <span class="na">name=</span><span class="s">&quot;gender&quot;</span> <span class="na">id=</span><span class="s">&quot;female&quot;</span><span class="nt">&gt;</span>
</span><span class='line'>            <span class="nt">&lt;label</span> <span class="na">for=</span><span class="s">&quot;female&quot;</span><span class="nt">&gt;</span>Female<span class="nt">&lt;/label&gt;</span>
</span><span class='line'>            <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">&quot;radio&quot;</span> <span class="na">name=</span><span class="s">&quot;gender&quot;</span> <span class="na">id=</span><span class="s">&quot;male&quot;</span><span class="nt">&gt;</span>
</span><span class='line'>            <span class="nt">&lt;label</span> <span class="na">for=</span><span class="s">&quot;male&quot;</span><span class="nt">&gt;</span>Male<span class="nt">&lt;/label&gt;</span>
</span><span class='line'>        <span class="nt">&lt;/div&gt;</span>
</span><span class='line'>    <span class="nt">&lt;/div&gt;</span>
</span><span class='line'><span class="nt">&lt;/body&gt;</span>
</span></code></pre></td></tr></table></div></figure>


<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>
<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>
</pre></td><td class='code'><pre><code class='javascript'><span class='line'><span class="nx">angular</span><span class="p">.</span><span class="nx">module</span><span class="p">(</span><span class="s1">&#39;Demo&#39;</span><span class="p">,</span> <span class="p">[])</span>
</span><span class='line'>    <span class="p">.</span><span class="nx">controller</span><span class="p">(</span><span class="s1">&#39;DemoController&#39;</span><span class="p">,</span> <span class="p">[</span><span class="s1">&#39;$scope&#39;</span><span class="p">,</span>
</span><span class='line'>        <span class="kd">function</span> <span class="p">(</span><span class="nx">$scope</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 class="nx">directive</span><span class="p">(</span><span class="s1">&#39;tellMe&#39;</span><span class="p">,</span> <span class="p">[</span>
</span><span class='line'>        <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">link</span><span class="o">:</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">scope</span><span class="p">,</span> <span class="nx">element</span><span class="p">,</span> <span class="nx">attr</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>                    <span class="nx">element</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="s1">&#39;click&#39;</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">target</span> <span class="o">=</span> <span class="nx">angular</span><span class="p">.</span><span class="nx">element</span><span class="p">(</span><span class="nx">event</span><span class="p">.</span><span class="nx">target</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">target</span><span class="p">.</span><span class="nx">is</span><span class="p">(</span><span class="s1">&#39;:text&#39;</span><span class="p">))</span> <span class="p">{</span>
</span><span class='line'>                            <span class="k">return</span> <span class="kc">false</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="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;input field clicked&#39;</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="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>


<p>Check the <a href="http://jsbin.com/alovifeJ/4/edit?output">demo</a>, you&#8217;ll see the radion button group is not functional well, one of them can never be checked, this is all because we use <code>return false</code> in directive.</p>

<p>After we replace <code>return false</code> with <code>return</code>, everything back to normal, check again <a href="http://jsbin.com/alovifeJ/5/edit?output">here</a></p>
]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[Traps in Angular Directive -- Isolated Scope]]></title>
    <link href="http://fedcuit.github.com/blog/2014/01/10/traps-in-directive/"/>
    <updated>2014-01-10T10:10:00+08:00</updated>
    <id>http://fedcuit.github.com/blog/2014/01/10/traps-in-directive</id>
    <content type="html"><![CDATA[<p>I was trapped in angular directive this work, after struggled for hours, I noticed below traps in angular directive.</p>

<h2>Directive with isolated scope will impact native angular directive</h2>

<p>If your own directive has a isolated scope,  then it will impact native angular directive, which means, sometime, ngModel, ngDisabled suddenly doesn&#8217;t work, because they&#8217;re impacted by your directive.
take below as an example:</p>

<p>We have a input field to type in a programming language, click the &#8216;Add&#8217; button will add it into a list(as it&#8217;s a simple demo, so data validation is not concerned)</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>
<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='html'><span class='line'><span class="nt">&lt;body</span> <span class="na">ng-app=</span><span class="s">&quot;DemoApp&quot;</span><span class="nt">&gt;</span>
</span><span class='line'>    <span class="nt">&lt;div</span> <span class="na">ng-controller=</span><span class="s">&quot;DemoController&quot;</span><span class="nt">&gt;</span>
</span><span class='line'>        What&#39;s your favorite programming language (up to five):
</span><span class='line'>        <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">&quot;search&quot;</span> <span class="na">ng-model=</span><span class="s">&quot;profile.newLanguage&quot;</span> <span class="nt">/&gt;</span>
</span><span class='line'>        <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">&quot;button&quot;</span>
</span><span class='line'>          <span class="na">value=</span><span class="s">&quot;Add&quot;</span>
</span><span class='line'>          <span class="na">add-language</span>
</span><span class='line'>          <span class="na">languages=</span><span class="s">&quot;profile.languages&quot;</span>
</span><span class='line'>          <span class="na">new-language=</span><span class="s">&quot;profile.newLanguage&quot;</span> <span class="nt">/&gt;</span>
</span><span class='line'>        <span class="nt">&lt;div&gt;</span>
</span><span class='line'>            <span class="nt">&lt;ul&gt;</span>
</span><span class='line'>                <span class="nt">&lt;li</span> <span class="na">ng-repeat=</span><span class="s">&quot;language in profile.languages&quot;</span><span class="nt">&gt;</span><span class="nt">&lt;/li&gt;</span>
</span><span class='line'>            <span class="nt">&lt;/ul&gt;</span>
</span><span class='line'>        <span class="nt">&lt;/div&gt;</span>
</span><span class='line'>    <span class="nt">&lt;/div&gt;</span>
</span><span class='line'><span class="nt">&lt;/body&gt;</span>
</span></code></pre></td></tr></table></div></figure>




<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>
<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>
</pre></td><td class='code'><pre><code class='javascript'><span class='line'><span class="nx">angular</span><span class="p">.</span><span class="nx">module</span><span class="p">(</span><span class="s1">&#39;DemoApp&#39;</span><span class="p">,</span> <span class="p">[])</span>
</span><span class='line'>    <span class="p">.</span><span class="nx">controller</span><span class="p">(</span><span class="s1">&#39;DemoController&#39;</span><span class="p">,</span> <span class="p">[</span><span class="s2">&quot;$scope&quot;</span><span class="p">,</span>
</span><span class='line'>        <span class="kd">function</span> <span class="p">(</span><span class="nx">$scope</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>            <span class="nx">$scope</span><span class="p">.</span><span class="nx">profile</span> <span class="o">=</span> <span class="p">{};</span>
</span><span class='line'>            <span class="nx">$scope</span><span class="p">.</span><span class="nx">profile</span><span class="p">.</span><span class="nx">languages</span> <span class="o">=</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 class="nx">directive</span><span class="p">(</span><span class="s1">&#39;addLanguage&#39;</span><span class="p">,</span> <span class="p">[</span>
</span><span class='line'>        <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">scope</span><span class="o">:</span> <span class="p">{</span>
</span><span class='line'>                    <span class="nx">languages</span><span class="o">:</span> <span class="s1">&#39;=&#39;</span><span class="p">,</span>
</span><span class='line'>                    <span class="nx">newLanguage</span><span class="o">:</span> <span class="s1">&#39;=&#39;</span>
</span><span class='line'>                <span class="p">},</span>
</span><span class='line'>                <span class="nx">link</span><span class="o">:</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">scope</span><span class="p">,</span> <span class="nx">ele</span><span class="p">,</span> <span class="nx">attr</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>                    <span class="nx">ele</span><span class="p">.</span><span class="nx">on</span><span class="p">(</span><span class="s1">&#39;click&#39;</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">scope</span><span class="p">.</span><span class="nx">languages</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="nx">scope</span><span class="p">.</span><span class="nx">newLanguage</span><span class="p">);</span>
</span><span class='line'>                        <span class="nx">scope</span><span class="p">.</span><span class="nx">$apply</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="p">}</span>
</span><span class='line'>    <span class="p">]);</span>
</span></code></pre></td></tr></table></div></figure>


<p>we put a directive <code>addLanuage</code> on the button, which will get the value in the input field and add it to language list, due to we need to operate the language list, so we use a isolated scope to access it inside the directive.</p>

<p>Try it yourself. <a href="http://jsbin.com/emivixEz/5/embed?output">demo</a></p>

<p>Now the new requirement comes, a user only allow to fill up to five programming languages, we need to disable the <code>Add</code> button after user have input 5 languages.</p>

<p>Seems a small change will fit the new requirement, ngDisabled should solve this.</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>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
</pre></td><td class='code'><pre><code class='html'><span class='line'><span class="nt">&lt;input</span>
</span><span class='line'>  <span class="na">type=</span><span class="s">&quot;button&quot;</span>
</span><span class='line'>  <span class="na">value=</span><span class="s">&quot;Add&quot;</span>
</span><span class='line'>  <span class="na">add-language</span>
</span><span class='line'>  <span class="na">ngDisabled=</span><span class="s">&quot;reachThreshold()&quot;</span>
</span><span class='line'>  <span class="na">languages=</span><span class="s">&quot;profile.languages&quot;</span>
</span><span class='line'>  <span class="na">new-language=</span><span class="s">&quot;profile.newLanguage&quot;</span> <span class="nt">/&gt;</span>
</span></code></pre></td></tr></table></div></figure>




<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>
<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>
</pre></td><td class='code'><pre><code class='javascript'><span class='line'><span class="nx">angular</span><span class="p">.</span><span class="nx">module</span><span class="p">(</span><span class="s1">&#39;DemoApp&#39;</span><span class="p">,</span> <span class="p">[])</span>
</span><span class='line'>    <span class="p">.</span><span class="nx">controller</span><span class="p">(</span><span class="s1">&#39;DemoController&#39;</span><span class="p">,</span> <span class="p">[</span><span class="s2">&quot;$scope&quot;</span><span class="p">,</span>
</span><span class='line'>        <span class="kd">function</span> <span class="p">(</span><span class="nx">$scope</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>            <span class="nx">$scope</span><span class="p">.</span><span class="nx">profile</span> <span class="o">=</span> <span class="p">{};</span>
</span><span class='line'>            <span class="nx">$scope</span><span class="p">.</span><span class="nx">profile</span><span class="p">.</span><span class="nx">languages</span> <span class="o">=</span> <span class="p">[];</span>
</span><span class='line'>            <span class="nx">$scope</span><span class="p">.</span><span class="nx">reachThreshold</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">$scope</span><span class="p">.</span><span class="nx">profile</span><span class="p">.</span><span class="nx">languages</span><span class="p">.</span><span class="nx">length</span> <span class="o">===</span> <span class="mi">5</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="p">.</span><span class="nx">directive</span><span class="p">(</span><span class="s1">&#39;addLanguage&#39;</span><span class="p">,</span> <span class="p">[</span>
</span><span class='line'>        <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">scope</span><span class="o">:</span> <span class="p">{</span>
</span><span class='line'>                    <span class="nx">languages</span><span class="o">:</span> <span class="s1">&#39;=&#39;</span><span class="p">,</span>
</span><span class='line'>                    <span class="nx">newLanguage</span><span class="o">:</span> <span class="s1">&#39;=&#39;</span>
</span><span class='line'>                <span class="p">},</span>
</span><span class='line'>                <span class="nx">link</span><span class="o">:</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">scope</span><span class="p">,</span> <span class="nx">ele</span><span class="p">,</span> <span class="nx">attr</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>                    <span class="nx">ele</span><span class="p">.</span><span class="nx">on</span><span class="p">(</span><span class="s1">&#39;click&#39;</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">scope</span><span class="p">.</span><span class="nx">languages</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="nx">scope</span><span class="p">.</span><span class="nx">newLanguage</span><span class="p">);</span>
</span><span class='line'>                        <span class="nx">scope</span><span class="p">.</span><span class="nx">$apply</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="p">}</span>
</span><span class='line'>    <span class="p">]);</span>
</span></code></pre></td></tr></table></div></figure>


<p>Play with the updated code you&#8217;ll find out <code>ngDisabled</code> is not working!
<a href="http://jsbin.com/itOTase/3/edit?output">demo</a></p>

<p>What can we do to save the <code>ngDisabled</code> damaged by isolated scope.</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>
<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='html'><span class='line'><span class="nt">&lt;body</span> <span class="na">ng-app=</span><span class="s">&quot;DemoApp&quot;</span><span class="nt">&gt;</span>
</span><span class='line'>    <span class="nt">&lt;div</span> <span class="na">ng-controller=</span><span class="s">&quot;DemoController&quot;</span><span class="nt">&gt;</span>
</span><span class='line'>        Programming language:
</span><span class='line'>        <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">&quot;search&quot;</span> <span class="na">ng-model=</span><span class="s">&quot;profile.newLanguage&quot;</span> <span class="nt">/&gt;</span>
</span><span class='line'>        <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">&quot;button&quot;</span>
</span><span class='line'>          <span class="na">value=</span><span class="s">&quot;Add&quot;</span>
</span><span class='line'>          <span class="na">add-language</span>
</span><span class='line'>          <span class="na">needs-disabled=</span><span class="s">&quot;reachThreshold()&quot;</span>
</span><span class='line'>          <span class="na">ng-disabled=</span><span class="s">&quot;needsDisabled&quot;</span>
</span><span class='line'>          <span class="na">languages=</span><span class="s">&quot;profile.languages&quot;</span>
</span><span class='line'>          <span class="na">new-language=</span><span class="s">&quot;profile.newLanguage&quot;</span> <span class="nt">/&gt;</span>
</span><span class='line'>        <span class="nt">&lt;div&gt;</span>
</span><span class='line'>            <span class="nt">&lt;ul&gt;</span>
</span><span class='line'>                <span class="nt">&lt;li</span> <span class="na">ng-repeat=</span><span class="s">&quot;language in profile.languages&quot;</span><span class="nt">&gt;</span><span class="nt">&lt;/li&gt;</span>
</span><span class='line'>            <span class="nt">&lt;/ul&gt;</span>
</span><span class='line'>        <span class="nt">&lt;/div&gt;</span>
</span><span class='line'>    <span class="nt">&lt;/div&gt;</span>
</span><span class='line'><span class="nt">&lt;/body&gt;</span>
</span></code></pre></td></tr></table></div></figure>


<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>
<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='javascript'><span class='line'><span class="nx">angular</span><span class="p">.</span><span class="nx">module</span><span class="p">(</span><span class="s1">&#39;DemoApp&#39;</span><span class="p">,</span> <span class="p">[])</span>
</span><span class='line'>    <span class="p">.</span><span class="nx">controller</span><span class="p">(</span><span class="s1">&#39;DemoController&#39;</span><span class="p">,</span> <span class="p">[</span><span class="s2">&quot;$scope&quot;</span><span class="p">,</span>
</span><span class='line'>        <span class="kd">function</span> <span class="p">(</span><span class="nx">$scope</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>            <span class="nx">$scope</span><span class="p">.</span><span class="nx">profile</span> <span class="o">=</span> <span class="p">{};</span>
</span><span class='line'>            <span class="nx">$scope</span><span class="p">.</span><span class="nx">profile</span><span class="p">.</span><span class="nx">languages</span> <span class="o">=</span> <span class="p">[</span><span class="s1">&#39;a&#39;</span><span class="p">,</span> <span class="s1">&#39;a&#39;</span><span class="p">,</span> <span class="s1">&#39;a&#39;</span><span class="p">,</span> <span class="s1">&#39;a&#39;</span><span class="p">,</span> <span class="s1">&#39;a&#39;</span><span class="p">];</span>
</span><span class='line'>            <span class="nx">$scope</span><span class="p">.</span><span class="nx">reachThreshold</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">$scope</span><span class="p">.</span><span class="nx">profile</span><span class="p">.</span><span class="nx">languages</span><span class="p">.</span><span class="nx">length</span> <span class="o">===</span> <span class="mi">5</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="p">.</span><span class="nx">directive</span><span class="p">(</span><span class="s1">&#39;addLanguage&#39;</span><span class="p">,</span> <span class="p">[</span>
</span><span class='line'>        <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">scope</span><span class="o">:</span> <span class="p">{</span>
</span><span class='line'>                    <span class="nx">languages</span><span class="o">:</span> <span class="s1">&#39;=&#39;</span><span class="p">,</span>
</span><span class='line'>                    <span class="nx">newLanguage</span><span class="o">:</span> <span class="s1">&#39;=&#39;</span><span class="p">,</span>
</span><span class='line'>                    <span class="nx">needsDisabled</span><span class="o">:</span> <span class="s1">&#39;=&#39;</span>
</span><span class='line'>                <span class="p">},</span>
</span><span class='line'>                <span class="nx">link</span><span class="o">:</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">scope</span><span class="p">,</span> <span class="nx">ele</span><span class="p">,</span> <span class="nx">attr</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>                    <span class="nx">ele</span><span class="p">.</span><span class="nx">on</span><span class="p">(</span><span class="s1">&#39;click&#39;</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">scope</span><span class="p">.</span><span class="nx">languages</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="nx">scope</span><span class="p">.</span><span class="nx">newLanguage</span><span class="p">);</span>
</span><span class='line'>                        <span class="nx">scope</span><span class="p">.</span><span class="nx">$apply</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="p">}</span>
</span><span class='line'>    <span class="p">]);</span>
</span></code></pre></td></tr></table></div></figure>


<p>Now <code>ngDisabled</code> works, <a href="http://jsbin.com/ONiFagE/2/edit?html,js,output">demo</a></p>

<p>As you can see from the code, we declare a new attribute <code>needs-disabled</code> which use <code>reachThreshold()</code> as it&#8217;s value, then we set <code>needsDisabled</code> to <code>ng-disabled</code>, the last thing is to declare the new attribute in directive&#8217;s scope, in this way, <code>ngDisabled</code> back again.</p>

<h2>NO Multiple isolated scope</h2>

<p>If you put more than one directive on a element, and each of them has a isolated scope, angular will fail and complain multiple isolated scope on one element.</p>
]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[Master AngularJS - directives]]></title>
    <link href="http://fedcuit.github.com/blog/2014/01/07/directive-in-angularjs/"/>
    <updated>2014-01-07T20:12:00+08:00</updated>
    <id>http://fedcuit.github.com/blog/2014/01/07/directive-in-angularjs</id>
    <content type="html"><![CDATA[<p>I&#8217;ve been using angularjs for several months, at the beginning, i always think everything in jQuery way, since I&#8217;ve used jQuery heavily on all of my previous projects, but day by day
I became like angularjs, i realize the shortcoming of jQuery: you will not know who is responsile for the event happens on this element until you see the event binding in jQuery code;
lots of manipulation is based on css selector which is fragile; it&#8217;s also hard and tricky to transfer data between different element &#8230;</p>

<p>So I decide to write a series of articles to record what I&#8217;ve learned in the past months, these articles are not for beginners, I assume you have a basic concept with AngularJS, but still don&#8217;t know
how to write AngularJS in the right way. Let&#8217;s start with <strong>directives</strong> .</p>

<h2>Directive Definition Object</h2>

<p>A directive usually appears as a element/tag name or attribute, it&#8217;s used to add additional functionality to the element, like, <code>&lt;a toggle-background/&gt;</code>, the directive toggleBackground will switch the
background color of the current page once you click it, it&#8217;s more clear than implement the same logic with jQuery, you will understand what will happen when you see the directive on the link.</p>

<p>Let&#8217;s take a closer look to directives, below is a simple directive defination.</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>
<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>
</pre></td><td class='code'><pre><code class='javascript'><span class='line'><span class="nx">angular</span><span class="p">.</span><span class="nx">module</span><span class="p">(</span><span class="s2">&quot;app&quot;</span><span class="p">,</span> <span class="p">[]).</span><span class="nx">directive</span><span class="p">(</span><span class="s2">&quot;alert&quot;</span><span class="p">,</span> <span class="p">[</span>
</span><span class='line'>    <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">restrict</span><span class="o">:</span> <span class="s1">&#39;EA&#39;</span><span class="p">,</span>
</span><span class='line'>            <span class="nx">link</span><span class="o">:</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">scope</span><span class="p">,</span> <span class="nx">elm</span><span class="p">,</span> <span class="nx">attr</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><span class='line'><span class="p">]);</span>
</span></code></pre></td></tr></table></div></figure>


<h2>Link Function</h2>

<p>we can ignore the <code>restrict</code> property, by default a directive can appear as a attribute, let&#8217;s goes into the most important part in a directive: the <strong>link function</strong> .</p>

<p>The link function take three parameters: <code>scope</code>, <code>elm</code>, <code>attr</code>, the last two are easy to understand:</p>

<ul>
<li><em><code>elm</code></em> the jQuery object representation of the element which this directve blongs to</li>
</ul>


<p>Take below code as an example, then most common use of directive is to do something against the element it decorated, in below example, we add autocomplete functionality for a input field.</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>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
</pre></td><td class='code'><pre><code class='html'><span class='line'><span class="nt">&lt;body</span> <span class="na">ng-app=</span><span class="s">&quot;DemoApp&quot;</span><span class="nt">&gt;</span>
</span><span class='line'>    <span class="nt">&lt;div&gt;</span>
</span><span class='line'>        What&#39;s your favorite programming language:
</span><span class='line'>        <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">&quot;search&quot;</span> <span class="na">search-language</span><span class="nt">/&gt;</span>
</span><span class='line'>    <span class="nt">&lt;/div&gt;</span>
</span><span class='line'><span class="nt">&lt;/body&gt;</span>
</span></code></pre></td></tr></table></div></figure>


<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>
<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='javascript'><span class='line'><span class="nx">angular</span><span class="p">.</span><span class="nx">module</span><span class="p">(</span><span class="s1">&#39;DemoApp&#39;</span><span class="p">,</span> <span class="p">[])</span>
</span><span class='line'>    <span class="p">.</span><span class="nx">directive</span><span class="p">(</span><span class="s1">&#39;searchLanguage&#39;</span><span class="p">,</span> <span class="p">[</span>
</span><span class='line'>        <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">link</span><span class="o">:</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">scope</span><span class="p">,</span> <span class="nx">ele</span><span class="p">,</span> <span class="nx">attr</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>                    <span class="nx">jQuery</span><span class="p">(</span><span class="nx">ele</span><span class="p">).</span><span class="nx">autocomplete</span><span class="p">({</span>
</span><span class='line'>                        <span class="nx">source</span><span class="o">:</span> <span class="p">[</span><span class="s2">&quot;c++&quot;</span><span class="p">,</span> <span class="s2">&quot;java&quot;</span><span class="p">,</span> <span class="s2">&quot;php&quot;</span><span class="p">,</span> <span class="s2">&quot;coldfusion&quot;</span><span class="p">,</span> <span class="s2">&quot;javascript&quot;</span><span class="p">,</span> <span class="s2">&quot;asp&quot;</span><span class="p">,</span> <span class="s2">&quot;ruby&quot;</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="p">}</span>
</span><span class='line'>    <span class="p">]);</span>
</span></code></pre></td></tr></table></div></figure>


<p>See demo <a href="http://jsbin.com/iZAxoVEF/1/edit">here</a></p>

<ul>
<li><em><code>attr</code></em> all the attributes on this element, it&#8217;s a map of attribute name and value, given <code>&lt;a type="text" some-directive/&gt;</code>, <code>attr.type</code> will return <code>text</code>
<code>attr</code> are used to pass additional information to directive, it has the same functionallity with <code>jQuery(element).attr('attrName')</code>, but more convenient.</li>
</ul>


<p>In below exmaple, we config the autocomplete dropdown is triggered at least user input 3 characters.</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>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
</pre></td><td class='code'><pre><code class='html'><span class='line'><span class="nt">&lt;body</span> <span class="na">ng-app=</span><span class="s">&quot;DemoApp&quot;</span><span class="nt">&gt;</span>
</span><span class='line'>    <span class="nt">&lt;div&gt;</span>
</span><span class='line'>        What&#39;s your favorite programming language:
</span><span class='line'>        <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">&quot;search&quot;</span> <span class="na">search-language</span> <span class="na">min-length=</span><span class="s">&quot;3&quot;</span><span class="nt">/&gt;</span>
</span><span class='line'>    <span class="nt">&lt;/div&gt;</span>
</span><span class='line'><span class="nt">&lt;/body&gt;</span>
</span></code></pre></td></tr></table></div></figure>


<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>
<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='javascript'><span class='line'><span class="nx">angular</span><span class="p">.</span><span class="nx">module</span><span class="p">(</span><span class="s1">&#39;DemoApp&#39;</span><span class="p">,</span> <span class="p">[])</span>
</span><span class='line'>    <span class="p">.</span><span class="nx">directive</span><span class="p">(</span><span class="s1">&#39;searchLanguage&#39;</span><span class="p">,</span> <span class="p">[</span>
</span><span class='line'>        <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">link</span><span class="o">:</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">scope</span><span class="p">,</span> <span class="nx">ele</span><span class="p">,</span> <span class="nx">attr</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>                    <span class="nx">jQuery</span><span class="p">(</span><span class="nx">ele</span><span class="p">).</span><span class="nx">autocomplete</span><span class="p">({</span>
</span><span class='line'>                        <span class="nx">source</span><span class="o">:</span> <span class="p">[</span><span class="s2">&quot;c++&quot;</span><span class="p">,</span> <span class="s2">&quot;java&quot;</span><span class="p">,</span> <span class="s2">&quot;php&quot;</span><span class="p">,</span> <span class="s2">&quot;coldfusion&quot;</span><span class="p">,</span> <span class="s2">&quot;javascript&quot;</span><span class="p">,</span> <span class="s2">&quot;asp&quot;</span><span class="p">,</span> <span class="s2">&quot;ruby&quot;</span><span class="p">],</span>
</span><span class='line'>                        <span class="nx">minLength</span><span class="o">:</span> <span class="nx">attr</span><span class="p">.</span><span class="nx">minLength</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="p">}</span>
</span><span class='line'>    <span class="p">]);</span>
</span></code></pre></td></tr></table></div></figure>


<p>see demo <a href="http://jsbin.com/emivixEz/1/edit">here</a></p>

<h2>(Isolated) Scope</h2>

<p>Why we need scope for directive ? First, let&#8217;s devide all kinds of directves into two groups:</p>

<ul>
<li><p><em><code>without scope</code></em>
If what we do in this the directive is only DOM manipulation, then <code>elm</code> and <code>attr</code> is enough for use, we don&#8217;t need to declare a isolated scope.</p></li>
<li><p><em><code>with scope</code></em>
If we need to manipulate angular model in directive, then we need to declare a scope.</p></li>
</ul>


<p>directive which don&#8217;t need to use scope is easy to understand, usually we bind event listener on the link function, but directive which need scope requires more practice to master it, we also can
devide this kind of directives into two groups: <code>manipulate model in controller</code> and <code>call method in controller</code></p>

<h4>Manipulate Model in Controller</h4>

<p>access model in controller need to establish a isolated scope, there are two ways:</p>

<ul>
<li><code>@[attributeName]</code> return the value of that attributeName, the value is a plain string, it&#8217;s the same as using <code>attr.attributeName</code></li>
<li><code>=[attributeName]</code> two way binding, first get the value of that attributeName, then evaluate the value in controller scope, changing the value in directive will reflect in controller scope</li>
</ul>


<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>
<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='html'><span class='line'><span class="nt">&lt;body</span> <span class="na">ng-app=</span><span class="s">&quot;DemoApp&quot;</span><span class="nt">&gt;</span>
</span><span class='line'>    <span class="nt">&lt;div</span> <span class="na">ng-controller=</span><span class="s">&quot;DemoController&quot;</span><span class="nt">&gt;</span>
</span><span class='line'>        Programming language (up to five):
</span><span class='line'>        <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">&quot;search&quot;</span> <span class="na">ng-model=</span><span class="s">&quot;profile.newLanguage&quot;</span><span class="nt">&gt;</span>
</span><span class='line'>        <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">&quot;button&quot;</span>
</span><span class='line'>          <span class="na">value=</span><span class="s">&quot;Add&quot;</span>
</span><span class='line'>          <span class="na">add-language</span>
</span><span class='line'>          <span class="na">languages=</span><span class="s">&quot;profile.languages&quot;</span>
</span><span class='line'>          <span class="na">new-language=</span><span class="s">&quot;profile.newLanguage&quot;</span> <span class="nt">/&gt;</span>
</span><span class='line'>        <span class="nt">&lt;div&gt;</span>
</span><span class='line'>            <span class="nt">&lt;ul&gt;</span>
</span><span class='line'>                <span class="nt">&lt;li</span> <span class="na">ng-repeat=</span><span class="s">&quot;language in profile.languages&quot;</span><span class="nt">&gt;</span>
</span><span class='line'>                <span class="nt">&lt;/li&gt;</span>
</span><span class='line'>            <span class="nt">&lt;/ul&gt;</span>
</span><span class='line'>        <span class="nt">&lt;/div&gt;</span>
</span><span class='line'>    <span class="nt">&lt;/div&gt;</span>
</span><span class='line'>
</span><span class='line'><span class="nt">&lt;/body&gt;</span>
</span></code></pre></td></tr></table></div></figure>




<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>
<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>
</pre></td><td class='code'><pre><code class='javascript'><span class='line'><span class="nx">angular</span><span class="p">.</span><span class="nx">module</span><span class="p">(</span><span class="s1">&#39;DemoApp&#39;</span><span class="p">,</span> <span class="p">[])</span>
</span><span class='line'>    <span class="p">.</span><span class="nx">controller</span><span class="p">(</span><span class="s1">&#39;DemoController&#39;</span><span class="p">,</span> <span class="p">[</span><span class="s2">&quot;$scope&quot;</span><span class="p">,</span>
</span><span class='line'>        <span class="kd">function</span> <span class="p">(</span><span class="nx">$scope</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>            <span class="nx">$scope</span><span class="p">.</span><span class="nx">profile</span> <span class="o">=</span> <span class="p">{};</span>
</span><span class='line'>            <span class="nx">$scope</span><span class="p">.</span><span class="nx">profile</span><span class="p">.</span><span class="nx">languages</span> <span class="o">=</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 class="nx">directive</span><span class="p">(</span><span class="s1">&#39;addLanguage&#39;</span><span class="p">,</span> <span class="p">[</span>
</span><span class='line'>        <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">scope</span><span class="o">:</span> <span class="p">{</span>
</span><span class='line'>                    <span class="nx">languages</span><span class="o">:</span> <span class="s1">&#39;=&#39;</span><span class="p">,</span>
</span><span class='line'>                    <span class="nx">newLanguage</span><span class="o">:</span> <span class="s1">&#39;=&#39;</span>
</span><span class='line'>                <span class="p">},</span>
</span><span class='line'>                <span class="nx">link</span><span class="o">:</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">scope</span><span class="p">,</span> <span class="nx">ele</span><span class="p">,</span> <span class="nx">attr</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>                    <span class="nx">ele</span><span class="p">.</span><span class="nx">on</span><span class="p">(</span><span class="s1">&#39;click&#39;</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">scope</span><span class="p">.</span><span class="nx">languages</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="nx">scope</span><span class="p">.</span><span class="nx">newLanguage</span><span class="p">);</span>
</span><span class='line'>                        <span class="nx">scope</span><span class="p">.</span><span class="nx">$apply</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="p">}</span>
</span><span class='line'>    <span class="p">]);</span>
</span></code></pre></td></tr></table></div></figure>


<p>check the <a href="http://jsbin.com/emivixEz/5/edit?html,js,output">demo</a> here.</p>

<p>In the above code, we establish a isolateds scope to setup a bridge with <code>languages</code> and <code>newLanguage</code> in controller&#8217;s scope, then we can manipulate them.</p>

<h4>Call Method in Controller</h4>

<ul>
<li><code>&amp;[attributeName]</code> return the value of that attributeName, the value is a function reference which points to the a method whose name same as the value in controller.</li>
</ul>


<p>we are two type of invocation of controller method: <code>without parameters</code> and <code>with parameters</code>.</p>

<h4>without parameters</h4>

<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>
<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='html'><span class='line'><span class="nt">&lt;body</span> <span class="na">ng-app=</span><span class="s">&quot;DemoApp&quot;</span><span class="nt">&gt;</span>
</span><span class='line'>    <span class="nt">&lt;div</span> <span class="na">ng-controller=</span><span class="s">&quot;DemoController&quot;</span><span class="nt">&gt;</span>
</span><span class='line'>        Programming language (up to five):
</span><span class='line'>        <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">&quot;search&quot;</span> <span class="na">ng-model=</span><span class="s">&quot;profile.newLanguage&quot;</span><span class="nt">&gt;</span>
</span><span class='line'>        <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">&quot;button&quot;</span>
</span><span class='line'>          <span class="na">value=</span><span class="s">&quot;Add&quot;</span>
</span><span class='line'>          <span class="na">add-language</span>
</span><span class='line'>          <span class="na">languages=</span><span class="s">&quot;profile.languages&quot;</span>
</span><span class='line'>          <span class="na">send-signal-to-server=</span><span class="s">&quot;sendSignalToServer()&quot;</span>
</span><span class='line'>          <span class="na">new-language=</span><span class="s">&quot;profile.newLanguage&quot;</span> <span class="nt">/&gt;</span>
</span><span class='line'>        <span class="nt">&lt;div&gt;</span>
</span><span class='line'>            <span class="nt">&lt;ul&gt;</span>
</span><span class='line'>                <span class="nt">&lt;li</span> <span class="na">ng-repeat=</span><span class="s">&quot;language in profile.languages&quot;</span><span class="nt">&gt;</span>
</span><span class='line'>                <span class="nt">&lt;/li&gt;</span>
</span><span class='line'>            <span class="nt">&lt;/ul&gt;</span>
</span><span class='line'>        <span class="nt">&lt;/div&gt;</span>
</span><span class='line'>    <span class="nt">&lt;/div&gt;</span>
</span><span class='line'><span class="nt">&lt;/body&gt;</span>
</span></code></pre></td></tr></table></div></figure>


<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>
<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>
<span class='line-number'>28</span>
<span class='line-number'>29</span>
<span class='line-number'>30</span>
<span class='line-number'>31</span>
</pre></td><td class='code'><pre><code class='javascript'><span class='line'><span class="nx">angular</span><span class="p">.</span><span class="nx">module</span><span class="p">(</span><span class="s1">&#39;DemoApp&#39;</span><span class="p">,</span> <span class="p">[])</span>
</span><span class='line'>    <span class="p">.</span><span class="nx">controller</span><span class="p">(</span><span class="s1">&#39;DemoController&#39;</span><span class="p">,</span> <span class="p">[</span><span class="s2">&quot;$scope&quot;</span><span class="p">,</span>
</span><span class='line'>        <span class="kd">function</span> <span class="p">(</span><span class="nx">$scope</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>            <span class="nx">$scope</span><span class="p">.</span><span class="nx">profile</span> <span class="o">=</span> <span class="p">{};</span>
</span><span class='line'>            <span class="nx">$scope</span><span class="p">.</span><span class="nx">profile</span><span class="p">.</span><span class="nx">languages</span> <span class="o">=</span> <span class="p">[];</span>
</span><span class='line'>            <span class="nx">$scope</span><span class="p">.</span><span class="nx">clearValue</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">$scope</span><span class="p">.</span><span class="nx">newLanguage</span> <span class="o">=</span> <span class="s2">&quot;&quot;</span><span class="p">;</span>
</span><span class='line'>            <span class="p">};</span>
</span><span class='line'>            <span class="nx">$scope</span><span class="p">.</span><span class="nx">sendSignalToServer</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;sending signal to server&#39;</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="p">.</span><span class="nx">directive</span><span class="p">(</span><span class="s1">&#39;addLanguage&#39;</span><span class="p">,</span> <span class="p">[</span>
</span><span class='line'>        <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">scope</span><span class="o">:</span> <span class="p">{</span>
</span><span class='line'>                    <span class="nx">languages</span><span class="o">:</span> <span class="s1">&#39;=&#39;</span><span class="p">,</span>
</span><span class='line'>                    <span class="nx">newLanguage</span><span class="o">:</span> <span class="s1">&#39;=&#39;</span><span class="p">,</span>
</span><span class='line'>                    <span class="nx">sendSignalToServer</span><span class="o">:</span> <span class="s1">&#39;&amp;&#39;</span>
</span><span class='line'>                <span class="p">},</span>
</span><span class='line'>                <span class="nx">link</span><span class="o">:</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">scope</span><span class="p">,</span> <span class="nx">ele</span><span class="p">,</span> <span class="nx">attr</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>                    <span class="nx">ele</span><span class="p">.</span><span class="nx">on</span><span class="p">(</span><span class="s1">&#39;click&#39;</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">scope</span><span class="p">.</span><span class="nx">languages</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="nx">scope</span><span class="p">.</span><span class="nx">newLanguage</span><span class="p">);</span>
</span><span class='line'>                        <span class="nx">scope</span><span class="p">.</span><span class="nx">sendSignalToServer</span><span class="p">();</span>
</span><span class='line'>                        <span class="nx">scope</span><span class="p">.</span><span class="nx">$apply</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="p">}</span>
</span><span class='line'>    <span class="p">]);</span>
</span></code></pre></td></tr></table></div></figure>


<p>see demo <a href="http://jsbin.com/ErASoja/2/edit?html,js,output">here</a>.</p>

<p>we want to call a methhod in controller which send some signal to server from our directive, we declare an attribute <code>send-signal-to-server</code> whose value is the method name is controller, as a result, <code>scope.sendSignalToServer</code> hold a reference to method <code>sendSignalToServer()</code> .</p>

<h4>with parameters</h4>

<p>Continue with the above example, we change the controller method <code>sendSignalToServer()</code> to accept two parameters, pass parameters from directive to controller is a lillte tricky.</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>
<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>
</pre></td><td class='code'><pre><code class='html'><span class='line'><span class="nt">&lt;body</span> <span class="na">ng-app=</span><span class="s">&quot;DemoApp&quot;</span><span class="nt">&gt;</span>
</span><span class='line'>    <span class="nt">&lt;div</span> <span class="na">ng-controller=</span><span class="s">&quot;DemoController&quot;</span><span class="nt">&gt;</span>
</span><span class='line'>        Programming language (up to five):
</span><span class='line'>        <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">&quot;search&quot;</span> <span class="na">ng-model=</span><span class="s">&quot;profile.newLanguage&quot;</span><span class="nt">&gt;</span>
</span><span class='line'>        <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">&quot;button&quot;</span>
</span><span class='line'>          <span class="na">value=</span><span class="s">&quot;Add&quot;</span>
</span><span class='line'>          <span class="na">add-language</span>
</span><span class='line'>          <span class="na">languages=</span><span class="s">&quot;profile.languages&quot;</span>
</span><span class='line'>          <span class="na">send-signal-to-server=</span><span class="s">&quot;sendSignalToServer(param1, param2)&quot;</span>
</span><span class='line'>          <span class="na">new-language=</span><span class="s">&quot;profile.newLanguage&quot;</span> <span class="nt">/&gt;</span>
</span><span class='line'>        <span class="nt">&lt;div&gt;</span>
</span><span class='line'>            <span class="nt">&lt;ul&gt;</span>
</span><span class='line'>                <span class="nt">&lt;li</span> <span class="na">ng-repeat=</span><span class="s">&quot;language in profile.languages&quot;</span><span class="nt">&gt;</span>
</span><span class='line'>                <span class="nt">&lt;/li&gt;</span>
</span><span class='line'>            <span class="nt">&lt;/ul&gt;</span>
</span><span class='line'>        <span class="nt">&lt;/div&gt;</span>
</span><span class='line'>    <span class="nt">&lt;/div&gt;</span>
</span><span class='line'>
</span><span class='line'><span class="nt">&lt;/body&gt;</span>
</span></code></pre></td></tr></table></div></figure>


<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>
<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>
<span class='line-number'>28</span>
<span class='line-number'>29</span>
<span class='line-number'>30</span>
<span class='line-number'>31</span>
<span class='line-number'>32</span>
<span class='line-number'>33</span>
<span class='line-number'>34</span>
</pre></td><td class='code'><pre><code class='javascript'><span class='line'><span class="nx">angular</span><span class="p">.</span><span class="nx">module</span><span class="p">(</span><span class="s1">&#39;DemoApp&#39;</span><span class="p">,</span> <span class="p">[])</span>
</span><span class='line'>    <span class="p">.</span><span class="nx">controller</span><span class="p">(</span><span class="s1">&#39;DemoController&#39;</span><span class="p">,</span> <span class="p">[</span><span class="s2">&quot;$scope&quot;</span><span class="p">,</span>
</span><span class='line'>        <span class="kd">function</span> <span class="p">(</span><span class="nx">$scope</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>            <span class="nx">$scope</span><span class="p">.</span><span class="nx">profile</span> <span class="o">=</span> <span class="p">{};</span>
</span><span class='line'>            <span class="nx">$scope</span><span class="p">.</span><span class="nx">profile</span><span class="p">.</span><span class="nx">languages</span> <span class="o">=</span> <span class="p">[];</span>
</span><span class='line'>            <span class="nx">$scope</span><span class="p">.</span><span class="nx">clearValue</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">$scope</span><span class="p">.</span><span class="nx">newLanguage</span> <span class="o">=</span> <span class="s2">&quot;&quot;</span><span class="p">;</span>
</span><span class='line'>            <span class="p">};</span>
</span><span class='line'>            <span class="nx">$scope</span><span class="p">.</span><span class="nx">sendSignalToServer</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">param1</span><span class="p">,</span> <span class="nx">param2</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;sending signal to server&#39;</span><span class="p">,</span> <span class="nx">param1</span><span class="p">,</span> <span class="nx">param2</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="p">.</span><span class="nx">directive</span><span class="p">(</span><span class="s1">&#39;addLanguage&#39;</span><span class="p">,</span> <span class="p">[</span>
</span><span class='line'>        <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">scope</span><span class="o">:</span> <span class="p">{</span>
</span><span class='line'>                    <span class="nx">languages</span><span class="o">:</span> <span class="s1">&#39;=&#39;</span><span class="p">,</span>
</span><span class='line'>                    <span class="nx">newLanguage</span><span class="o">:</span> <span class="s1">&#39;=&#39;</span><span class="p">,</span>
</span><span class='line'>                    <span class="nx">sendSignalToServer</span><span class="o">:</span> <span class="s1">&#39;&amp;&#39;</span>
</span><span class='line'>                <span class="p">},</span>
</span><span class='line'>                <span class="nx">link</span><span class="o">:</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">scope</span><span class="p">,</span> <span class="nx">ele</span><span class="p">,</span> <span class="nx">attr</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>                    <span class="nx">ele</span><span class="p">.</span><span class="nx">on</span><span class="p">(</span><span class="s1">&#39;click&#39;</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">scope</span><span class="p">.</span><span class="nx">languages</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="nx">scope</span><span class="p">.</span><span class="nx">newLanguage</span><span class="p">);</span>
</span><span class='line'>                        <span class="nx">scope</span><span class="p">.</span><span class="nx">sendSignalToServer</span><span class="p">({</span>
</span><span class='line'>                            <span class="s2">&quot;param1&quot;</span><span class="o">:</span> <span class="s2">&quot;123&quot;</span><span class="p">,</span>
</span><span class='line'>                            <span class="s2">&quot;param2&quot;</span><span class="o">:</span> <span class="s2">&quot;456&quot;</span>
</span><span class='line'>                        <span class="p">});</span>
</span><span class='line'>                        <span class="nx">scope</span><span class="p">.</span><span class="nx">$apply</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="p">}</span>
</span><span class='line'>    <span class="p">]);</span>
</span></code></pre></td></tr></table></div></figure>


<p>see <a href="http://jsbin.com/ErASoja/3/edit?html,css,js,output">demo</a></p>

<p>as you can see, we need to define placeholder for the argument list in the attribute, and in the directive, when we are going to call that method, we need to construct a object which use the place holder as keys, and your real parameters as values.</p>

<p>If you&#8217;re patient enough to read to here, i belieave you&#8217;ve got a basic concept how to write directive in the right way. But keep in mind, don&#8217;t use too many directives on one element, it&#8217;s difficult to understand which directive is responsible for which functionality, thus increase the effort to maintain the code, also your directive could impact the native angular directive, so first try to use angular native directives(e.g. ng-click, ng-init), if it can not fit your requirements, write you own.</p>
]]></content>
  </entry>
  
</feed>