angular2 官方教程中 关于templateUrl和styleUrls 引用文件路径的问题

在跟随angular官方教程练习的过程中发现一个问题,关于@Component装饰器函数中templateUrl和styleUrls路径的问题,具体表现为

 

在教程中templateUrl和styleUrls中引用的模板路径都是类似

    templateUrl: './heroes.component.html',
    styleUrls: ['./heroes.component.css']

但是实际上如果定义了moduleId,就会出现404的问题,找不到文件

@component({
    moduleId: module.id
    ...
    ...
})

这时候只能把文件路径改成如下,才能正确加载

    templateUrl: 'heroes.component.html',
    styleUrls: ['heroes.component.css']

疑问

1.这里moduleId作用是什么
2.为什么会影响到模板和样式文件的路径获取
3.正确的写法是什么

 


 

 

从官方教程的代码中可以看到模块加载器是systemjs

首先参考官方的文档

-组件样式:https://angular.cn/docs/ts/latest/cookbook/component-relative-paths.html

-相对于组件的路径:https://angular.cn/docs/ts/latest/cookbook/component-relative-paths.html

 

从上面两个文档中,我们知道的是Angular不可能知道在运行期这些文件的正确位置,Angular能够确定的唯一的位置是首页index.html的URL,也就是应用的根目录。 所以,默认情况下,它只能计算相对于index.html的模板和样式表路径。 这就是为什么我们以前用app/基准路径的前缀来写文件的URL。Angular应用可能被用多种方式加载:独立文件、SystemJS包、CommonJS包等等。 用来生成模块的格式可以是任何格式。 甚至可能完全没有写成模块化代码。

 

但是这里并没有详细解释为什么systemjs打包运行的情况下用moduleId出现的问题

而后另外一篇文章才有详细说明

https://blog.thoughtram.io/angular/2016/06/08/component-relative-paths-in-angular-2.html

里面介绍了几种不同的打包模块下的写法

 

 

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>

wholesale nfl jerseys cheap nfl jerseys wholesale nfl jerseys cheap jerseys

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>

Miami Dolphins Jerseys cheap MLB jerseys wholesale nfl jerseys wholesale mlb jerseys cheap nba jerseys

前端编码规范

前言

首先,写这篇代码规范是为了我自己在以后的项目中方便引用,让前端人员统一标准,方便在开发中保持代码的一致性,HTML和CSS的规范参照bootstrap编码规范,以下多为JS规则

IDE要求使用webstorm,能够更方便的统一大家的代码。

语法

  • HTML和CSS用两个空格来代替制表符(tab);
  • JS用四个空格来代替制表符(tab);
  • webstorm设置HTML和CSS格式化的方法:File-Settings,Editor-CodeStyle-HTML(或者CSS),在Tabs and Indents选项卡下把TabSize和Indent的值均改为2;
  • webstorm格式化快捷键Ctrl+Alt+L;

命名规则

文件命名规则:单英文单词,多单词使用“-”连接或者小驼峰方法:

    <div id="crayon-5897dc30e0e13560354732" 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>
            </td>
                    <td class="crayon-code"><div class="crayon-pre" style="font-size: 14px !important;line-height: 24px !important"><div class="crayon-line" id="crayon-5897dc30e0e13560354732-1"><span class="crayon-v">index</span><span class="crayon-sy">.</span><span class="crayon-e">html</span></div><div class="crayon-line" id="crayon-5897dc30e0e13560354732-2"><span class="crayon-v">task</span><span class="crayon-o">-</span><span class="crayon-v">bg</span><span class="crayon-sy">.</span><span class="crayon-e">jpg</span></div><div class="crayon-line" id="crayon-5897dc30e0e13560354732-3"><span class="crayon-v">title</span><span class="crayon-o">-</span><span class="crayon-v">bg</span><span class="crayon-sy">.</span><span class="crayon-e">png</span></div><div class="crayon-line" id="crayon-5897dc30e0e13560354732-4"><span class="crayon-v">project</span><span class="crayon-o">-</span><span class="crayon-v">task</span><span class="crayon-sy">.</span><span class="crayon-e">css</span></div><div class="crayon-line" id="crayon-5897dc30e0e13560354732-5"><span class="crayon-v">project</span><span class="crayon-o">-</span><span class="crayon-v">ctrl</span><span class="crayon-sy">.</span><span class="crayon-e">js</span></div><div class="crayon-line" id="crayon-5897dc30e0e13560354732-6"><span class="crayon-v">projectCtrl</span><span class="crayon-sy">.</span><span class="crayon-i">js</span></div><div class="crayon-line" id="crayon-5897dc30e0e13560354732-7">&nbsp;</div></div></td>
                </tr>
            </table>
        </div>
    </div>

Css类名命名规则:英文单词,多单词使用“-”连接

    <div id="crayon-5897dc30e0e31730698901" 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>
            </td>
                    <td class="crayon-code"><div class="crayon-pre" style="font-size: 14px !important;line-height: 24px !important"><div class="crayon-line" id="crayon-5897dc30e0e31730698901-1"><span class="crayon-h"> </span><span class="crayon-o">&lt;</span><span class="crayon-e">div </span><span class="crayon-t">class</span><span class="crayon-o">=</span><span class="crayon-s">"task-list-title"</span><span class="crayon-o">&gt;</span><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span></div><div class="crayon-line" id="crayon-5897dc30e0e31730698901-2"><span class="crayon-h"> </span><span class="crayon-o">&lt;</span><span class="crayon-e">h3 </span><span class="crayon-t">class</span><span class="crayon-o">=</span><span class="crayon-s">"task-list-title-h3"</span><span class="crayon-o">&gt;</span><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span></div><div class="crayon-line" id="crayon-5897dc30e0e31730698901-3"><span class="crayon-h"> </span>这里是标题<span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span></div><div class="crayon-line" id="crayon-5897dc30e0e31730698901-4"><span class="crayon-h"> </span><span class="crayon-o">&lt;</span><span class="crayon-o">/</span><span class="crayon-e">h3</span><span class="crayon-o">&gt;</span><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span></div><div class="crayon-line" id="crayon-5897dc30e0e31730698901-5"><span class="crayon-h"> </span><span class="crayon-o">&lt;</span><span class="crayon-o">/</span><span class="crayon-e">div</span><span class="crayon-o">&gt;</span><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span></div><div class="crayon-line" id="crayon-5897dc30e0e31730698901-6"><span class="crayon-h"> </span><span class="crayon-ta">&lt;style&gt;</span><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span></div><div class="crayon-line" id="crayon-5897dc30e0e31730698901-7"><span class="crayon-h"> </span><span class="crayon-k ">.task-list-title</span><span class="crayon-sy">{</span><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span></div><div class="crayon-line" id="crayon-5897dc30e0e31730698901-8"><span class="crayon-h"> </span><span class="crayon-e ">float</span><span class="crayon-sy">:</span><span class="crayon-i ">left</span><span class="crayon-sy">;</span><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span></div><div class="crayon-line" id="crayon-5897dc30e0e31730698901-9"><span class="crayon-h"> </span><span class="crayon-sy">}</span><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span></div><div class="crayon-line" id="crayon-5897dc30e0e31730698901-10"><span class="crayon-h"> </span><span class="crayon-ta">&lt;/style&gt;</span></div></div></td>
                </tr>
            </table>
        </div>
    </div>

Javasctipt命名规则:英文单词,多单词使用小驼峰

    <div id="crayon-5897dc30e0e39427812276" 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>
            </td>
                    <td class="crayon-code"><div class="crayon-pre" style="font-size: 14px !important;line-height: 24px !important"><div class="crayon-line" id="crayon-5897dc30e0e39427812276-1"><span class="crayon-h"> </span><span class="crayon-sy">$</span><span class="crayon-v">scope</span><span class="crayon-sy">.</span><span class="crayon-v">taskOpen</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><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span></div><div class="crayon-line" id="crayon-5897dc30e0e39427812276-2"><span class="crayon-h"> </span><span class="crayon-sy">$</span><span class="crayon-v">scope</span><span class="crayon-sy">.</span><span class="crayon-v">taskOpenState</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-t">true</span><span class="crayon-sy">;</span><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span></div><div class="crayon-line" id="crayon-5897dc30e0e39427812276-3"><span class="crayon-h"> </span><span class="crayon-sy">}</span><span class="crayon-sy">;</span></div></div></td>
                </tr>
            </table>
        </div>
    </div>

代码格式化

把webstorm的格式化换行去掉,设置方法:找到File-Settings,Editor-General-Appearance,去掉Show right margin(configured in Code Style options)的勾选

其他书写规范

<a>标签中href属性不使用时,不用#作为填充,使用空白来填充,例如:

    <div id="crayon-5897dc30e0e3f025556872" 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>
            </td>
                    <td class="crayon-code"><div class="crayon-pre" style="font-size: 14px !important;line-height: 24px !important"><div class="crayon-line" id="crayon-5897dc30e0e3f025556872-1"><span class="crayon-o">&lt;</span><span class="crayon-i">a</span><span class="crayon-h"> </span><span class="crayon-v">href</span><span class="crayon-o">=</span><span class="crayon-s">""</span><span class="crayon-h"> </span><span class="crayon-v">ng</span><span class="crayon-o">-</span><span class="crayon-v">click</span><span class="crayon-o">=</span><span class="crayon-s">"openPopbox()"</span><span class="crayon-o">&gt;</span><span class="crayon-o">&lt;</span><span class="crayon-o">/</span><span class="crayon-v">a</span><span class="crayon-o">&gt;</span></div></div></td>
                </tr>
            </table>
        </div>
    </div>

协议

不要指定引入资源所带的具体协议。
当引入图片或其他媒体文件,还有样式和脚本时,URLs 所指向的具体路径,不要指定协议部分(http:, https:),除非这两者协议都不可用。
不指定协议使得 URL 从绝对的获取路径转变为相对的,在请求资源协议无法确定时非常好用,而且还能为文件大小节省几个字节。

    <div id="crayon-5897dc30e0e45660479833" 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>
            </td>
                    <td class="crayon-code"><div class="crayon-pre" style="font-size: 14px !important;line-height: 24px !important"><div class="crayon-line" id="crayon-5897dc30e0e45660479833-1"><span class="crayon-ta">&lt;script </span><span class="crayon-e ">src</span><span class="crayon-o">=</span><span class="crayon-s">"//cdn.com/foundation.min.js"</span><span class="crayon-o">&gt;</span><span class="crayon-ta">&lt;/script&gt;</span></div></div></td>
                </tr>
            </table>
        </div>
    </div>

    <div id="crayon-5897dc30e0e4b262851307" 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>
            </td>
                    <td class="crayon-code"><div class="crayon-pre" style="font-size: 14px !important;line-height: 24px !important"><div class="crayon-line" id="crayon-5897dc30e0e4b262851307-1"><span class="crayon-sy">.</span><span class="crayon-i">example</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-5897dc30e0e4b262851307-2"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span class="crayon-v">background</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-e">url</span><span class="crayon-sy">(</span><span class="crayon-c">//static.example.com/images/bg.jpg);</span></div><div class="crayon-line" id="crayon-5897dc30e0e4b262851307-3"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span></div></div></td>
                </tr>
            </table>
        </div>
    </div>

注释

首先代码注释永远不嫌多,不管是不是给别人看或者协同开发,注释必须尽可能的详尽,就算是你自己写的代码也可能时间太久或者逻辑太复杂而忘记具体功能,所以一定要写注释;
其次注释能帮助你快速理解代码所做的事情,看一段有注释的代码和一段没有注释的代码是两个概念,前者可以让你很快的理解代码的用途和方法,后者需要自己慢慢分析,而时间就是开发成本;
再次注释能帮你更好的整理你的逻辑,在写注释的时候,往往能发现一些自己忽略掉的一些东西,减少挖坑的次数;

    <div id="crayon-5897dc30e0e52962507286" 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>
            </td>
                    <td class="crayon-code"><div class="crayon-pre" style="font-size: 14px !important;line-height: 24px !important"><div class="crayon-line" id="crayon-5897dc30e0e52962507286-1"><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-v">offset</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-cn">0</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-5897dc30e0e52962507286-2"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span></div><div class="crayon-line" id="crayon-5897dc30e0e52962507286-3"><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">includeLabels</span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-5897dc30e0e52962507286-4"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span class="crayon-c">// If the labels are included we need to have a minimum offset of 20 pixels</span></div><div class="crayon-line" id="crayon-5897dc30e0e52962507286-5"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span class="crayon-c">// We need to set it explicitly because of the following bug: http://somebrowservendor.com/issue-tracker/ISSUE-1</span></div><div class="crayon-line" id="crayon-5897dc30e0e52962507286-6"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span class="crayon-v">offset</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-cn">20</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-5897dc30e0e52962507286-7"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span></div></div></td>
                </tr>
            </table>
        </div>
    </div>

wholesale mlb jerseys cheap jerseys cheap jerseys