yeoman,generator-angular

前言

最近一个月新项目启动,为了更快速的搭建架构使用了yeoman(1.8.3)和generator-angular。

yeoman是一个脚手架工具,而generator-angular就是Yeoman generator for AngularJS,专门为Angular创建的一个脚手架工具。旨在提供快速搭建前端架构,提供开发环境,代码合并压缩混淆,一系列的自动化操作。

 

安装

首先yeoman 是nodejs下的工具,所以肯定要有nodejs和npm

用npm全局安装yo, grunt-cli, bower, generator-angular and generator-karma

如果你要使用sass,还需要安装Ruby 和 Compass

接下来创建一个项目的文件夹,在文件夹下运行

yo angular [app-name]

安装的每一步选择在这里我不具体列举出来

值得注意的是,安装过程gulp和grunt的选择,在generator-angular中gulp还是实验性质的,所以更推荐grunt,

安装完成后你会发现项目文件夹下多了一大堆的文件

在项目文件夹根目录下运行grunt serve页面会自动打开,你编辑代码页面也会自动刷新

grunt build命令是用于创建发布版本,文件的工程文件夹在app内,而dist就是build后生成出来的

 

用法

yeoman的主要用法如上:

举例,创建一个controller只需要运行命令

yo angular:controller home

yeoman会自动生成一个home.js并引入到index.html文件,并且home.js里已经写好了一个叫做HomeCtrl的controller,甚至已经在test文件夹内生成了一个用作单元测试的js文件,

这样把很多的人工操作自动化后会省去很多麻烦,而且能更好的规避错误。

 

angular:route的方法在建立路由的同时同时建立了controller和view,是不是感觉非常方便,

但是由于angular-route的局限性,我还是使用了ui-router,这样一来angular:route的方法我就没有使用了

但是总体上还是非常方便的

更多细节,可以参考https://github.com/yeoman/generator-angular

AngularJS,实现contenteditable的双向绑定

前言

在项目中遇到需要使用标签属性contenteditable来替代<textarea>,实现输入内容的自动高度,但是<div>或者<p>标签并不是一个输入控件,不能直接被ngModel绑定,这个时候就需要把contenteditable做成一个directive来实现双向绑定:

代码

    <div id="crayon-589858d4a52c8812928072" class="crayon-syntax crayon-theme-sublime-text crayon-font-sourcecodepro crayon-os-pc print-yes notranslate" style="margin-top: 12px;margin-bottom: 12px;font-size: 14px !important;line-height: 24px !important">

        <div class="crayon-plain-wrap"></div>
        <div class="crayon-main">
            <table class="crayon-table">
                <tr class="crayon-row">
            <td class="crayon-nums ">
                <div class="crayon-nums-content" style="font-size: 14px !important;line-height: 24px !important"><div class="crayon-num">1</div><div class="crayon-num">2</div><div class="crayon-num">3</div><div class="crayon-num">4</div><div class="crayon-num">5</div><div class="crayon-num">6</div><div class="crayon-num">7</div><div class="crayon-num">8</div><div class="crayon-num">9</div><div class="crayon-num">10</div><div class="crayon-num">11</div><div class="crayon-num">12</div><div class="crayon-num">13</div><div class="crayon-num">14</div><div class="crayon-num">15</div><div class="crayon-num">16</div><div class="crayon-num">17</div><div class="crayon-num">18</div><div class="crayon-num">19</div><div class="crayon-num">20</div><div class="crayon-num">21</div><div class="crayon-num">22</div><div class="crayon-num">23</div><div class="crayon-num">24</div><div class="crayon-num">25</div><div class="crayon-num">26</div></div>
            </td>
                    <td class="crayon-code"><div class="crayon-pre" style="font-size: 14px !important;line-height: 24px !important"><div class="crayon-line" id="crayon-589858d4a52c8812928072-1"><span class="crayon-v">app</span><span class="crayon-sy">.</span><span class="crayon-e">directive</span><span class="crayon-sy">(</span><span class="crayon-s">'contenteditable'</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-t">function</span><span class="crayon-h"> </span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-589858d4a52c8812928072-2"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-st">return</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-589858d4a52c8812928072-3"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">require</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-s">'ngModel'</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-589858d4a52c8812928072-4"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">link</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-t">function</span><span class="crayon-h"> </span><span class="crayon-sy">(</span><span class="crayon-v">scope</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-v">element</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-v">attrs</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-v">ctrl</span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-589858d4a52c8812928072-5"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-c">/*输入回车的时候会转义成&lt;br&gt;被提交,所以去掉回车的输入*/</span></div><div class="crayon-line" id="crayon-589858d4a52c8812928072-6"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-t">function</span><span class="crayon-h"> </span><span class="crayon-e">deleteBr</span><span class="crayon-sy">(</span><span class="crayon-v">sHtml</span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-589858d4a52c8812928072-7"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-st">return</span><span class="crayon-h"> </span><span class="crayon-v">sHtml</span><span class="crayon-sy">.</span><span class="crayon-e">replace</span><span class="crayon-sy">(</span><span class="crayon-o">/</span><span class="crayon-o">&lt;</span><span class="crayon-v">br</span><span class="crayon-o">&gt;</span><span class="crayon-o">/</span><span class="crayon-v">g</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-s">""</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-589858d4a52c8812928072-8"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-589858d4a52c8812928072-9"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-c">// view -&gt; model</span></div><div class="crayon-line" id="crayon-589858d4a52c8812928072-10"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">element</span><span class="crayon-sy">.</span><span class="crayon-e">bind</span><span class="crayon-sy">(</span><span class="crayon-s">'input'</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-t">function</span><span class="crayon-h"> </span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-589858d4a52c8812928072-11"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">scope</span><span class="crayon-sy">.</span><span class="crayon-sy">$</span><span class="crayon-e">apply</span><span class="crayon-sy">(</span><span class="crayon-t">function</span><span class="crayon-h"> </span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-589858d4a52c8812928072-12"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">element</span><span class="crayon-sy">.</span><span class="crayon-e">html</span><span class="crayon-sy">(</span><span class="crayon-e">deleteBr</span><span class="crayon-sy">(</span><span class="crayon-v">element</span><span class="crayon-sy">.</span><span class="crayon-e">html</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">)</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-589858d4a52c8812928072-13"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">ctrl</span><span class="crayon-sy">.</span><span class="crayon-sy">$</span><span class="crayon-e">setViewValue</span><span class="crayon-sy">(</span><span class="crayon-v">element</span><span class="crayon-sy">.</span><span class="crayon-e">html</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-589858d4a52c8812928072-14"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-589858d4a52c8812928072-15"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-589858d4a52c8812928072-16">&nbsp;</div><div class="crayon-line" id="crayon-589858d4a52c8812928072-17"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-c">// model -&gt; view</span></div><div class="crayon-line" id="crayon-589858d4a52c8812928072-18"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">ctrl</span><span class="crayon-sy">.</span><span class="crayon-sy">$</span><span class="crayon-v">render</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-t">function</span><span class="crayon-h"> </span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-589858d4a52c8812928072-19"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">element</span><span class="crayon-sy">.</span><span class="crayon-e">html</span><span class="crayon-sy">(</span><span class="crayon-v">ctrl</span><span class="crayon-sy">.</span><span class="crayon-sy">$</span><span class="crayon-v">viewValue</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-589858d4a52c8812928072-20"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-589858d4a52c8812928072-21">&nbsp;</div><div class="crayon-line" id="crayon-589858d4a52c8812928072-22"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-c">// load init value from DOM</span></div><div class="crayon-line" id="crayon-589858d4a52c8812928072-23"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">ctrl</span><span class="crayon-sy">.</span><span class="crayon-sy">$</span><span class="crayon-e">render</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-589858d4a52c8812928072-24"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-589858d4a52c8812928072-25"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-589858d4a52c8812928072-26"><span class="crayon-sy">}</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
                </tr>
            </table>
        </div>
    </div>

注意

  • 在div中输入回车是会被转义成<br>,而在实际使用中可能需要禁止回车,所以在directive中需要把回车产生的<br>过滤掉;
  • 在html中需要设置contenteditable="plaintext-only"控制输入的内容为纯文本,因为复制过来的一些内容可能会被带上一些文字样式;
  • 在model中输入<> 会被转义,解决办法是在controller里面先过滤一遍数据(输出的时候也需要过滤一次)

    <div id="crayon-589858d4a52f0628147972" class="crayon-syntax crayon-theme-sublime-text crayon-font-sourcecodepro crayon-os-pc print-yes notranslate" style="margin-top: 12px;margin-bottom: 12px;font-size: 14px !important;line-height: 24px !important">

        <div class="crayon-plain-wrap"></div>
        <div class="crayon-main">
            <table class="crayon-table">
                <tr class="crayon-row">
            <td class="crayon-nums ">
                <div class="crayon-nums-content" style="font-size: 14px !important;line-height: 24px !important"><div class="crayon-num">1</div><div class="crayon-num">2</div><div class="crayon-num">3</div><div class="crayon-num">4</div><div class="crayon-num">5</div><div class="crayon-num">6</div></div>
            </td>
                    <td class="crayon-code"><div class="crayon-pre" style="font-size: 14px !important;line-height: 24px !important"><div class="crayon-line" id="crayon-589858d4a52f0628147972-1"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-t">function</span><span class="crayon-h"> </span><span class="crayon-e">html2Escape</span><span class="crayon-sy">(</span><span class="crayon-v">sHtml</span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-589858d4a52f0628147972-2"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-st">return</span><span class="crayon-h"> </span><span class="crayon-v">sHtml</span><span class="crayon-sy">.</span><span class="crayon-e">replace</span><span class="crayon-sy">(</span><span class="crayon-o">/</span><span class="crayon-sy">[</span><span class="crayon-o">&lt;&gt;</span><span class="crayon-o">&amp;</span><span class="crayon-s">"]/g, function (c) {</span></div><div class="crayon-line" id="crayon-589858d4a52f0628147972-3"><span class="crayon-s">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return {'&lt;': '&lt;', '&gt;': '&gt;', '&amp;': '&amp;', '"</span><span class="crayon-s">': '</span>"'<span class="crayon-sy">}</span><span class="crayon-sy">[</span><span class="crayon-v">c</span><span class="crayon-sy">]</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-589858d4a52f0628147972-4"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-589858d4a52f0628147972-5"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-589858d4a52f0628147972-6"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">$</span><span class="crayon-v">scope</span><span class="crayon-sy">.</span><span class="crayon-v">text</span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-e">html2Escape</span><span class="crayon-sy">(</span><span class="crayon-sy">$</span><span class="crayon-v">scope</span><span class="crayon-sy">.</span><span class="crayon-v">text</span><span class="crayon-sy">)</span></div></div></td>
                </tr>
            </table>
        </div>
    </div>

AngularJS,自定义filter实现文字和拼音的双过滤

前言

这个功能在ng-repeat中过滤内容的时候会用到
这个filter简单来说就是同时过滤两个字段或者多个字段达到我们想要的实际效果:文字和拼音双过滤;

代码

    <div id="crayon-58984131a2941439106046" class="crayon-syntax crayon-theme-sublime-text crayon-font-sourcecodepro crayon-os-pc print-yes notranslate" style="margin-top: 12px;margin-bottom: 12px;font-size: 14px !important;line-height: 24px !important">

        <div class="crayon-plain-wrap"></div>
        <div class="crayon-main">
            <table class="crayon-table">
                <tr class="crayon-row">
            <td class="crayon-nums ">
                <div class="crayon-nums-content" style="font-size: 14px !important;line-height: 24px !important"><div class="crayon-num">1</div><div class="crayon-num">2</div><div class="crayon-num">3</div><div class="crayon-num">4</div><div class="crayon-num">5</div><div class="crayon-num">6</div><div class="crayon-num">7</div><div class="crayon-num">8</div><div class="crayon-num">9</div><div class="crayon-num">10</div><div class="crayon-num">11</div><div class="crayon-num">12</div><div class="crayon-num">13</div><div class="crayon-num">14</div><div class="crayon-num">15</div><div class="crayon-num">16</div><div class="crayon-num">17</div><div class="crayon-num">18</div><div class="crayon-num">19</div><div class="crayon-num">20</div><div class="crayon-num">21</div></div>
            </td>
                    <td class="crayon-code"><div class="crayon-pre" style="font-size: 14px !important;line-height: 24px !important"><div class="crayon-line" id="crayon-58984131a2941439106046-1"><span class="crayon-v">keeApp</span><span class="crayon-sy">.</span><span class="crayon-e">filter</span><span class="crayon-sy">(</span><span class="crayon-s">'filterPinyin'</span><span class="crayon-sy">,</span><span class="crayon-t">function</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-58984131a2941439106046-2"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-st">return</span><span class="crayon-h"> </span><span class="crayon-t">function</span><span class="crayon-sy">(</span><span class="crayon-v">inputArray</span><span class="crayon-sy">,</span><span class="crayon-v">value</span><span class="crayon-sy">)</span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-58984131a2941439106046-3"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-t">array</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-sy">[</span><span class="crayon-sy">]</span><span class="crayon-sy">;</span><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-c">//定义返回的新数组;</span></div><div class="crayon-line" id="crayon-58984131a2941439106046-4"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-st">if</span><span class="crayon-sy">(</span><span class="crayon-v">value</span><span class="crayon-o">==</span><span class="crayon-v">undefined</span><span class="crayon-o">||</span><span class="crayon-v">value</span><span class="crayon-o">==</span><span class="crayon-t">null</span><span class="crayon-sy">)</span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-58984131a2941439106046-5"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-t">array</span><span class="crayon-o">=</span><span class="crayon-v">inputArray</span><span class="crayon-sy">;</span><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-c">//当过滤条件为空的时候返回全部的内容;</span></div><div class="crayon-line" id="crayon-58984131a2941439106046-6"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-58984131a2941439106046-7"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-st">else</span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-58984131a2941439106046-8"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-st">for</span><span class="crayon-sy">(</span><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-v">i</span><span class="crayon-o">=</span><span class="crayon-cn">0</span><span class="crayon-sy">;</span><span class="crayon-v">i</span><span class="crayon-o">&lt;</span><span class="crayon-v">inputArray</span><span class="crayon-sy">.</span><span class="crayon-v">length</span><span class="crayon-sy">;</span><span class="crayon-v">i</span><span class="crayon-o">++</span><span class="crayon-sy">)</span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-58984131a2941439106046-9"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-st">if</span><span class="crayon-sy">(</span><span class="crayon-v">inputArray</span><span class="crayon-sy">[</span><span class="crayon-v">i</span><span class="crayon-sy">]</span><span class="crayon-sy">.</span><span class="crayon-v">aliasName</span><span class="crayon-sy">.</span><span class="crayon-e">indexOf</span><span class="crayon-sy">(</span><span class="crayon-v">value</span><span class="crayon-sy">)</span><span class="crayon-o">!=</span><span class="crayon-h"> </span><span class="crayon-o">-</span><span class="crayon-cn">1</span><span class="crayon-sy">)</span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-58984131a2941439106046-10"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-t">array</span><span class="crayon-sy">.</span><span class="crayon-e">push</span><span class="crayon-sy">(</span><span class="crayon-v">inputArray</span><span class="crayon-sy">[</span><span class="crayon-v">i</span><span class="crayon-sy">]</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span><span class="crayon-c">//过滤第一个字段,如果不符合条件则判断第二个字段</span></div><div class="crayon-line" id="crayon-58984131a2941439106046-11"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-58984131a2941439106046-12"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-st">else</span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-58984131a2941439106046-13"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-st">if</span><span class="crayon-sy">(</span><span class="crayon-v">inputArray</span><span class="crayon-sy">[</span><span class="crayon-v">i</span><span class="crayon-sy">]</span><span class="crayon-sy">.</span><span class="crayon-v">spelling</span><span class="crayon-sy">.</span><span class="crayon-e">indexOf</span><span class="crayon-sy">(</span><span class="crayon-v">value</span><span class="crayon-sy">)</span><span class="crayon-o">!=</span><span class="crayon-h"> </span><span class="crayon-o">-</span><span class="crayon-cn">1</span><span class="crayon-sy">)</span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-58984131a2941439106046-14"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-t">array</span><span class="crayon-sy">.</span><span class="crayon-e">push</span><span class="crayon-sy">(</span><span class="crayon-v">inputArray</span><span class="crayon-sy">[</span><span class="crayon-v">i</span><span class="crayon-sy">]</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-58984131a2941439106046-15"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-58984131a2941439106046-16"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-58984131a2941439106046-17"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-58984131a2941439106046-18"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-58984131a2941439106046-19"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-st">return</span><span class="crayon-h"> </span><span class="crayon-t">array</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-58984131a2941439106046-20"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-58984131a2941439106046-21"><span class="crayon-sy">}</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
                </tr>
            </table>
        </div>
    </div>