|
专栏名称: JavaScript
| 面向JavaScript爱好人员提供：前端最新资讯、原创内容、JavaScript、HTML5、Ajax、jQuery、Node.js等一系列教程和经验分享。 |
目录
相关文章推荐
正文
去年6月份左右，加入了一个创业公司，很幸运做了一个从零开始的项目，前端工程由我一手搭建起来，并不断迭代功能到现在，有许多的感悟心得，在这里写点总结
确定框架、技术点
一个项目的开始，特别是丰富多样的前端工程，首先一定要确定好采用的框架和技术点。2016年vue.js如火如荼，webpack强势崛起，但是是否就可直接拿到项目中搞起呢？答案是否定的，一个新的技术如果自己或团队中成员都还在学习摸索的过程，是肯定不能在生产环境中使用的，更何况这是个创业的团队，没有成熟完整的前端团队。所以我当时还是走老套路，jquery为核心，fastclick辅助，requireJs按需加载，arttemplate做模板渲染，核心UI类库使用jqueryWeUI，加上sass预编译样式文件，gulp打包构建，（后台是微服务架构，maven构建，springMVC+mybatis，此工程为h5前置工程）这样一来就基本上满足条件，可以开工了。
开发工具
不同的开发工具可能在展示格式上有一定的差别，所以一个团队最好还是能统一的开发工具。后台一般使用eclipse，前端我推荐使用sublime，以及相关的插件：
开发规范，命名规则
既然是多个人同时开发，肯定会有一些代码风格上的异同，然而为了方便后期维护，必需制定一些相关的规范。如：
-
开发规范
-
所有页面编码必须是
-
尽量使用语义话标签，如头部使用header，内容使用articl，页脚使用footer，模块使用section标签
所有页面采用下面的通用模板
charset="utf-8">
http-equiv="X-UA-Compatible" content="IE=edge">
name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
http-equiv="Pragma" content="no-cache" />
http-equiv="Expires" content="0" />
name="format-detection" content="telephone=no" >
</span><span class="pln" style="color: rgb(72, 72, 76);">通用模板页面</span><span class="tag" style="color: rgb(0, 0, 136);"/></code></p><p><code style="border: none; border-radius: 3px; word-wrap: break-word; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; max-width: 100%; background-color: transparent;"><span class="pln" style="color: rgb(72, 72, 76);"> </span><span class="tag" style="color: rgb(0, 0, 136);"><link/><span class="pln" style="color: rgb(72, 72, 76);"> </span><span class="atn" style="color: teal;">rel</span><span class="pun" style="color: rgb(147, 161, 161);">=</span><span class="atv" style="color: rgb(221, 17, 68);">"stylesheet"</span><span class="pln" style="color: rgb(72, 72, 76);"> </span><span class="atn" style="color: teal;">type</span><span class="pun" style="color: rgb(147, 161, 161);">=</span><span class="atv" style="color: rgb(221, 17, 68);">"text/css"</span><span class="pln" style="color: rgb(72, 72, 76);"> </span><span class="atn" style="color: teal;">href</span><span class="pun" style="color: rgb(147, 161, 161);">=</span><span class="atv" style="color: rgb(221, 17, 68);">"/static/li/li-1.2.0.css"</span><span class="tag" style="color: rgb(0, 0, 136);">></span></span></code></p><p><code style="border: none; border-radius: 3px; word-wrap: break-word; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; max-width: 100%; background-color: transparent;"><span class="tag" style="color: rgb(0, 0, 136);"/></code></p><p><code style="border: none; border-radius: 3px; word-wrap: break-word; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; max-width: 100%; background-color: transparent;"><span class="tag" style="color: rgb(0, 0, 136);"/></code></p><p><code style="border: none; border-radius: 3px; word-wrap: break-word; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; max-width: 100%; background-color: transparent;"><span class="pln" style="color: rgb(72, 72, 76);"> </span><span class="tag" style="color: rgb(0, 0, 136);"><header/></span></code></p><p><code style="border: none; border-radius: 3px; word-wrap: break-word; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; max-width: 100%; background-color: transparent;"><span class="pln" style="color: rgb(72, 72, 76);"> </span><span class="tag" style="color: rgb(0, 0, 136);"><article/></span></code></p><p><code style="border: none; border-radius: 3px; word-wrap: break-word; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; max-width: 100%; background-color: transparent;"><span class="pln" style="color: rgb(72, 72, 76);"> </span><span class="tag" style="color: rgb(0, 0, 136);"><footer/></span></code></p><p><code style="border: none; border-radius: 3px; word-wrap: break-word; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; max-width: 100%; background-color: transparent;"><span class="tag" style="color: rgb(0, 0, 136);"/></code></p><p><code style="border: none; border-radius: 3px; word-wrap: break-word; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; max-width: 100%; background-color: transparent;"><span class="tag" style="color: rgb(0, 0, 136);"><script><span class="pln" style="color: rgb(72, 72, 76);"> </span><span class="atn" style="color: teal;">type</span><span class="pun" style="color: rgb(147, 161, 161);">=</span><span class="atv" style="color: rgb(221, 17, 68);">"text/html"</span><span class="pln" style="color: rgb(72, 72, 76);"> </span><span class="atn" style="color: teal;">id</span><span class="pun" style="color: rgb(147, 161, 161);">=</span><span class="atv" style="color: rgb(221, 17, 68);">"registerMainTpl"</span><span class="tag" style="color: rgb(0, 0, 136);">></span></code></p><p><code style="border: none; border-radius: 3px; word-wrap: break-word; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; max-width: 100%; background-color: transparent;"> </code></p><p><code style="border: none; border-radius: 3px; word-wrap: break-word; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; max-width: 100%; background-color: transparent;"><span class="tag" style="color: rgb(0, 0, 136);"></script></span></code></p><p><code style="border: none; border-radius: 3px; word-wrap: break-word; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; max-width: 100%; background-color: transparent;"><span class="tag" style="color: rgb(0, 0, 136);"><script><span class="pln" style="color: rgb(72, 72, 76);"> </span><span class="atn" style="color: teal;">src</span><span class="pun" style="color: rgb(147, 161, 161);">=</span><span class="atv" style="color: rgb(221, 17, 68);">"../static/component/requirejs/require.min.js"</span><span class="tag" style="color: rgb(0, 0, 136);">></script></span></code></p><p><code style="border: none; border-radius: 3px; word-wrap: break-word; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; max-width: 100%; background-color: transparent;"><span class="tag" style="color: rgb(0, 0, 136);"><script><span class="pln" style="color: rgb(72, 72, 76);"> </span><span class="atn" style="color: teal;">type</span><span class="pun" style="color: rgb(147, 161, 161);">=</span><span class="atv" style="color: rgb(221, 17, 68);">"text/javascript"</span><span class="tag" style="color: rgb(0, 0, 136);">></span></code></p><p><code style="border: none; border-radius: 3px; word-wrap: break-word; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; max-width: 100%; background-color: transparent;"><span class="kwd" style="color: rgb(30, 52, 123);">var</span><span class="pln" style="color: rgb(72, 72, 76);"> script </span><span class="pun" style="color: rgb(147, 161, 161);">=</span><span class="pln" style="color: rgb(72, 72, 76);"> document</span><span class="pun" style="color: rgb(147, 161, 161);">.</span><span class="pln" style="color: rgb(72, 72, 76);">createElement</span><span class="pun" style="color: rgb(147, 161, 161);">(</span><span class="str" style="color: rgb(221, 17, 68);">"script"</span><span class="pun" style="color: rgb(147, 161, 161);">),</span></code></p><p><code style="border: none; border-radius: 3px; word-wrap: break-word; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; max-width: 100%; background-color: transparent;"><span class="pln" style="color: rgb(72, 72, 76);"> head </span><span class="pun" style="color: rgb(147, 161, 161);">=</span><span class="pln" style="color: rgb(72, 72, 76);"> document</span><span class="pun" style="color: rgb(147, 161, 161);">.</span><span class="pln" style="color: rgb(72, 72, 76);">head </span><span class="pun" style="color: rgb(147, 161, 161);">||</span><span class="pln" style="color: rgb(72, 72, 76);"> document</span><span class="pun" style="color: rgb(147, 161, 161);">.</span><span class="pln" style="color: rgb(72, 72, 76);">getElementsByTagName</span><span class="pun" style="color: rgb(147, 161, 161);">(</span><span class="str" style="color: rgb(221, 17, 68);">'head'</span><span class="pun" style="color: rgb(147, 161, 161);">)[</span><span class="lit" style="color: rgb(25, 95, 145);">0</span><span class="pun" style="color: rgb(147, 161, 161);">];</span></code></p><p><code style="border: none; border-radius: 3px; word-wrap: break-word; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; max-width: 100%; background-color: transparent;"> </code></p><p><code style="border: none; border-radius: 3px; word-wrap: break-word; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; max-width: 100%; background-color: transparent;"><span class="pln" style="color: rgb(72, 72, 76);">script</span><span class="pun" style="color: rgb(147, 161, 161);">.</span><span class="pln" style="color: rgb(72, 72, 76);">type </span><span class="pun" style="color: rgb(147, 161, 161);">=</span><span class="pln" style="color: rgb(72, 72, 76);"> </span><span class="str" style="color: rgb(221, 17, 68);">"text/javascript"</span><span class="pun" style="color: rgb(147, 161, 161);">;</span></code></p><p><code style="border: none; border-radius: 3px; word-wrap: break-word; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; max-width: 100%; background-color: transparent;"><span class="pln" style="color: rgb(72, 72, 76);">script</span><span class="pun" style="color: rgb(147, 161, 161);">.</span><span class="pln" style="color: rgb(72, 72, 76);">src </span><span class="pun" style="color: rgb(147, 161, 161);">=</span><span class="pln" style="color: rgb(72, 72, 76);"> </span><span class="str" style="color: rgb(221, 17, 68);">'/config.js?ver='</span><span class="pln" style="color: rgb(72, 72, 76);"> </span><span class="pun" style="color: rgb(147, 161, 161);">+</span><span class="pln" style="color: rgb(72, 72, 76);"> </span><span class="pun" style="color: rgb(147, 161, 161);">(</span><span class="kwd" style="color: rgb(30, 52, 123);">new</span><span class="pln" style="color: rgb(72, 72, 76);"> </span><span class="typ" style="color: teal;">Date</span><span class="pun" style="color: rgb(147, 161, 161);">()).</span><span class="pln" style="color: rgb(72, 72, 76);">getTime</span><span class="pun" style="color: rgb(147, 161, 161);">();</span></code></p><p><code style="border: none; border-radius: 3px; word-wrap: break-word; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; max-width: 100%; background-color: transparent;"> </code></p><p><code style="border: none; border-radius: 3px; word-wrap: break-word; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; max-width: 100%; background-color: transparent;"><span class="pln" style="color: rgb(72, 72, 76);">head</span><span class="pun" style="color: rgb(147, 161, 161);">.</span><span class="pln" style="color: rgb(72, 72, 76);">appendChild</span><span class="pun" style="color: rgb(147, 161, 161);">(</span><span class="pln" style="color: rgb(72, 72, 76);">script</span><span class="pun" style="color: rgb(147, 161, 161);">);</span><span class="pln" style="color: rgb(72, 72, 76);"> </span></code></p><p><code style="border: none; border-radius: 3px; word-wrap: break-word; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; max-width: 100%; background-color: transparent;"> </code></p><p><code style="border: none; border-radius: 3px; word-wrap: break-word; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; max-width: 100%; background-color: transparent;"><span class="pln" style="color: rgb(72, 72, 76);">script</span><span class="pun" style="color: rgb(147, 161, 161);">.</span><span class="pln" style="color: rgb(72, 72, 76);">onload </span><span class="pun" style="color: rgb(147, 161, 161);">=</span><span class="pln" style="color: rgb(72, 72, 76);"> script</span><span class="pun" style="color: rgb(147, 161, 161);">.</span><span class="pln" style="color: rgb(72, 72, 76);">onreadystatechange </span><span class="pun" style="color: rgb(147, 161, 161);">=</span><span class="pln" style="color: rgb(72, 72, 76);"> </span><span class="kwd" style="color: rgb(30, 52, 123);">function</span><span class="pun" style="color: rgb(147, 161, 161);">(){</span></code></p><p><code style="border: none; border-radius: 3px; word-wrap: break-word; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; max-width: 100%; background-color: transparent;"><span class="pln" style="color: rgb(72, 72, 76);">require</span><span class="pun" style="color: rgb(147, 161, 161);">(</span></code></p><p><code style="border: none; border-radius: 3px; word-wrap: break-word; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; max-width: 100%; background-color: transparent;"><span class="pln" style="color: rgb(72, 72, 76);"> </span><span class="pun" style="color: rgb(147, 161, 161);">[</span></code></p><p><code style="border: none; border-radius: 3px; word-wrap: break-word; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; max-width: 100%; background-color: transparent;"><span class="pln" style="color: rgb(72, 72, 76);"> </span><span class="str" style="color: rgb(221, 17, 68);">'jquery'</span><span class="pun" style="color: rgb(147, 161, 161);">,</span></code></p><p><code style="border: none; border-radius: 3px; word-wrap: break-word; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; max-width: 100%; background-color: transparent;"><span class="pln" style="color: rgb(72, 72, 76);"> </span><span class="str" style="color: rgb(221, 17, 68);">'fastclick'</span><span class="pun" style="color: rgb(147, 161, 161);">,</span></code></p><p><code style="border: none; border-radius: 3px; word-wrap: break-word; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; max-width: 100%; background-color: transparent;"><span class="pln" style="color: rgb(72, 72, 76);"> </span><span class="str" style="color: rgb(221, 17, 68);">'artTemplate'</span><span class="pun" style="color: rgb(147, 161, 161);">,</span></code></p><p><code style="border: none; border-radius: 3px; word-wrap: break-word; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; max-width: 100%; background-color: transparent;"><span class="pln" style="color: rgb(72, 72, 76);"> </span><span class="str" style="color: rgb(221, 17, 68);">'li'</span><span class="pun" style="color: rgb(147, 161, 161);">,</span><span class="com" style="color: rgb(147, 161, 161);">//自己封装的js类库，包括head里面引用的li-1.2.0.css</span></code></p><p><code style="border: none; border-radius: 3px; word-wrap: break-word; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; max-width: 100%; background-color: transparent;"><span class="pln" style="color: rgb(72, 72, 76);"> </span><span class="str" style="color: rgb(221, 17, 68);">'common'</span><span class="pun" style="color: rgb(147, 161, 161);">,</span><span class="com" style="color: rgb(147, 161, 161);">//公共js，存放一些公用的方法</span></code></p><p><code style="border: none; border-radius: 3px; word-wrap: break-word; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; max-width: 100%; background-color: transparent;"><span class="pln" style="color: rgb(72, 72, 76);"> </span><span class="pun" style="color: rgb(147, 161, 161);">],</span><span class="pln" style="color: rgb(72, 72, 76);"> </span></code></p><p><code style="border: none; border-radius: 3px; word-wrap: break-word; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; max-width: 100%; background-color: transparent;"><span class="pln" style="color: rgb(72, 72, 76);"> </span><span class="kwd" style="color: rgb(30, 52, 123);">function</span><span class="pun" style="color: rgb(147, 161, 161);">(</span><span class="pln" style="color: rgb(72, 72, 76);">$</span><span class="pun" style="color: rgb(147, 161, 161);">,</span><span class="typ" style="color: teal;">FastClick</span><span class="pun" style="color: rgb(147, 161, 161);">,</span><span class="pln" style="color: rgb(72, 72, 76);">template</span><span class="pun" style="color: rgb(147, 161, 161);">){</span></code></p><p><code style="border: none; border-radius: 3px; word-wrap: break-word; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; max-width: 100%; background-color: transparent;"><span class="pln" style="color: rgb(72, 72, 76);"> </span><span class="typ" style="color: teal;">FastClick</span><span class="pun" style="color: rgb(147, 161, 161);">.</span><span class="pln" style="color: rgb(72, 72, 76);">attach</span><span class="pun" style="color: rgb(147, 161, 161);">(</span><span class="pln" style="color: rgb(72, 72, 76);">document</span><span class="pun" style="color: rgb(147, 161, 161);">.</span><span class="pln" style="color: rgb(72, 72, 76);">body</span><span class="pun" style="color: rgb(147, 161, 161);">);</span></code></p><p><code style="border: none; border-radius: 3px; word-wrap: break-word; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; max-width: 100%; background-color: transparent;"> </code></p><p><code style="border: none; border-radius: 3px; word-wrap: break-word; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; max-width: 100%; background-color: transparent;"><span class="pln" style="color: rgb(72, 72, 76);"> </span><span class="kwd" style="color: rgb(30, 52, 123);">var</span><span class="pln" style="color: rgb(72, 72, 76);"> $body </span><span class="pun" style="color: rgb(147, 161, 161);">=</span><span class="pln" style="color: rgb(72, 72, 76);"> $</span><span class="pun" style="color: rgb(147, 161, 161);">(</span><span class="str" style="color: rgb(221, 17, 68);">'body'</span><span class="pun" style="color: rgb(147, 161, 161);">),</span></code></p><p><code style="border: none; border-radius: 3px; word-wrap: break-word; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; max-width: 100%; background-color: transparent;"><span class="pln" style="color: rgb(72, 72, 76);"> $header </span><span class="pun" style="color: rgb(147, 161, 161);">=</span><span class="pln" style="color: rgb(72, 72, 76);"> $</span><span class="pun" style="color: rgb(147, 161, 161);">(</span><span class="str" style="color: rgb(221, 17, 68);">'header'</span><span class="pun" style="color: rgb(147, 161, 161);">),</span></code></p><p><code style="border: none; border-radius: 3px; word-wrap: break-word; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; max-width: 100%; background-color: transparent;"><span class="pln" style="color: rgb(72, 72, 76);"> $article </span><span class="pun" style="color: rgb(147, 161, 161);">=</span><span class="pln" style="color: rgb(72, 72, 76);"> $</span><span class="pun" style="color: rgb(147, 161, 161);">(</span><span class="str" style="color: rgb(221, 17, 68);">'article'</span><span class="pun" style="color: rgb(147, 161, 161);">);</span></code></p><p><code style="border: none; border-radius: 3px; word-wrap: break-word; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; max-width: 100%; background-color: transparent;"><span class="pln" style="color: rgb(72, 72, 76);"> </span><span class="kwd" style="color: rgb(30, 52, 123);">var</span><span class="pln" style="color: rgb(72, 72, 76);"> registMain </span><span class="pun" style="color: rgb(147, 161, 161);">=</span><span class="pln" style="color: rgb(72, 72, 76);"> </span><span class="pun" style="color: rgb(147, 161, 161);">{</span></code></p><p><code style="border: none; border-radius: 3px; word-wrap: break-word; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; max-width: 100%; background-color: transparent;"><span class="pln" style="color: rgb(72, 72, 76);"> h5</span><span class="pun" style="color: rgb(147, 161, 161);">:</span><span class="pln" style="color: rgb(72, 72, 76);"> </span><span class="kwd" style="color: rgb(30, 52, 123);">function</span><span class="pun" style="color: rgb(147, 161, 161);">(){</span></code></p><p><code style="border: none; border-radius: 3px; word-wrap: break-word; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; max-width: 100%; background-color: transparent;"><span class="pln" style="color: rgb(72, 72, 76);"> </span><span class="kwd" style="color: rgb(30, 52, 123);">this</span><span class="pun" style="color: rgb(147, 161, 161);">.</span><span class="pln" style="color: rgb(72, 72, 76);">renderHtml</span><span class="pun" style="color: rgb(147, 161, 161);">();</span></code></p><p><code style="border: none; border-radius: 3px; word-wrap: break-word; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; max-width: 100%; background-color: transparent;"><span class="pln" style="color: rgb(72, 72, 76);"> </span><span class="kwd" style="color: rgb(30, 52, 123);">this</span><span class="pun" style="color: rgb(147, 161, 161);">.</span><span class="pln" style="color: rgb(72, 72, 76);">renderComponent</span><span class="pun" style="color: rgb(147, 161, 161);">();</span></code></p><p><code style="border: none; border-radius: 3px; word-wrap: break-word; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; max-width: 100%; background-color: transparent;"><span class="pln" style="color: rgb(72, 72, 76);"> </span><span class="kwd" style="color: rgb(30, 52, 123);">this</span><span class="pun" style="color: rgb(147, 161, 161);">.</span><span class="pln" style="color: rgb(72, 72, 76);">watch</span><span class="pun" style="color: rgb(147, 161, 161);">();</span><span class="pln" style="color: rgb(72, 72, 76);"> </span></code></p><p><code style="border: none; border-radius: 3px; word-wrap: break-word; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; max-width: 100%; background-color: transparent;"><span class="pln" style="color: rgb(72, 72, 76);"> </span><span class="pun" style="color: rgb(147, 161, 161);">},</span></code></p><p><code style="border: none; border-radius: 3px; word-wrap: break-word; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; max-width: 100%; background-color: transparent;"><span class="pln" style="color: rgb(72, 72, 76);"> </span><span class="com" style="color: rgb(147, 161, 161);">//全局属性</span></code></p><p><code style="border: none; border-radius: 3px; word-wrap: break-word; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; max-width: 100%; background-color: transparent;"><span class="pln" style="color: rgb(72, 72, 76);"> options</span><span class="pun" style="color: rgb(147, 161, 161);">:</span><span class="pln" style="color: rgb(72, 72, 76);"> </span><span class="pun" style="color: rgb(147, 161, 161);">{</span></code></p><p><code style="border: none; border-radius: 3px; word-wrap: break-word; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; max-width: 100%; background-color: transparent;"> </code></p><p><code style="border: none; border-radius: 3px; word-wrap: break-word; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; max-width: 100%; background-color: transparent;"><span class="pln" style="color: rgb(72, 72, 76);"> </span><span class="pun" style="color: rgb(147, 161, 161);">},</span></code></p><p><code style="border: none; border-radius: 3px; word-wrap: break-word; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; max-width: 100%; background-color: transparent;"> </code></p><p><code style="border: none; border-radius: 3px; word-wrap: break-word; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; max-width: 100%; background-color: transparent;"><span class="pln" style="color: rgb(72, 72, 76);"> </span><span class="com" style="color: rgb(147, 161, 161);">//渲染模板的数据</span></code></p><p><code style="border: none; border-radius: 3px; word-wrap: break-word; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; max-width: 100%; background-color: transparent;"><span class="pln" style="color: rgb(72, 72, 76);"> data</span><span class="pun" style="color: rgb(147, 161, 161);">:</span><span class="pln" style="color: rgb(72, 72, 76);"> </span><span class="pun" style="color: rgb(147, 161, 161);">{</span></code></p><p><code style="border: none; border-radius: 3px; word-wrap: break-word; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; max-width: 100%; background-color: transparent;"> </code></p><p><code style="border: none; border-radius: 3px; word-wrap: break-word; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; max-width: 100%; background-color: transparent;"><span class="pln" style="color: rgb(72, 72, 76);"> </span><span class="pun" style="color: rgb(147, 161, 161);">},</span></code></p><p><code style="border: none; border-radius: 3px; word-wrap: break-word; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; max-width: 100%; background-color: transparent;"> </code></p><p><code style="border: none; border-radius: 3px; word-wrap: break-word; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; max-width: 100%; background-color: transparent;"><span class="pln" style="color: rgb(72, 72, 76);"> </span><span class="com" style="color: rgb(147, 161, 161);">//渲染html</span></code></p><p><code style="border: none; border-radius: 3px; word-wrap: break-word; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; max-width: 100%; background-color: transparent;"><span class="pln" style="color: rgb(72, 72, 76);"> renderHtml</span><span class="pun" style="color: rgb(147, 161, 161);">:</span><span class="pln" style="color: rgb(72, 72, 76);"> </span><span class="kwd" style="color: rgb(30, 52, 123);">function</span><span class="pun" style="color: rgb(147, 161, 161);">(){</span></code></p><p><code style="border: none; border-radius: 3px; word-wrap: break-word; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; max-width: 100%; background-color: transparent;"> </code></p><p><code style="border: none; border-radius: 3px; word-wrap: break-word; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; max-width: 100%; background-color: transparent;"><span class="pln" style="color: rgb(72, 72, 76);"> </span><span class="pun" style="color: rgb(147, 161, 161);">},</span></code></p><p><code style="border: none; border-radius: 3px; word-wrap: break-word; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; max-width: 100%; background-color: transparent;"><span class="pln" style="color: rgb(72, 72, 76);"> </span><span class="com" style="color: rgb(147, 161, 161);">//渲染组件</span></code></p><p><code style="border: none; border-radius: 3px; word-wrap: break-word; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; max-width: 100%; background-color: transparent;"><span class="pln" style="color: rgb(72, 72, 76);"> renderComponent</span><span class="pun" style="color: rgb(147, 161, 161);">:</span><span class="pln" style="color: rgb(72, 72, 76);"> </span><span class="kwd" style="color: rgb(30, 52, 123);">function</span><span class="pun" style="color: rgb(147, 161, 161);">(){</span></code></p><p><code style="border: none; border-radius: 3px; word-wrap: break-word; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; max-width: 100%; background-color: transparent;"> </code></p><p><code style="border: none; border-radius: 3px; word-wrap: break-word; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; max-width: 100%; background-color: transparent;"><span class="pln" style="color: rgb(72, 72, 76);"> </span><span class="pun" style="color: rgb(147, 161, 161);">},</span></code></p><p><code style="border: none; border-radius: 3px; word-wrap: break-word; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; max-width: 100%; background-color: transparent;"> </code></p><p><code style="border: none; border-radius: 3px; word-wrap: break-word; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; max-width: 100%; background-color: transparent;"><span class="pln" style="color: rgb(72, 72, 76);"> </span><span class="com" style="color: rgb(147, 161, 161);">//事件监听</span></code></p><p><code style="border: none; border-radius: 3px; word-wrap: break-word; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; max-width: 100%; background-color: transparent;"><span class="pln" style="color: rgb(72, 72, 76);"> watch</span><span class="pun" style="color: rgb(147, 161, 161);">:</span><span class="pln" style="color: rgb(72, 72, 76);"> </span><span class="kwd" style="color: rgb(30, 52, 123);">function</span><span class="pun" style="color: rgb(147, 161, 161);">(){</span></code></p><p><code style="border: none; border-radius: 3px; word-wrap: break-word; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; max-width: 100%; background-color: transparent;"><span class="pln" style="color: rgb(72, 72, 76);"> </span><span class="kwd" style="color: rgb(30, 52, 123);">var</span><span class="pln" style="color: rgb(72, 72, 76);"> self </span><span class="pun" style="color: rgb(147, 161, 161);">=</span><span class="pln" style="color: rgb(72, 72, 76);"> </span><span class="kwd" style="color: rgb(30, 52, 123);">this</span><span class="pun" style="color: rgb(147, 161, 161);">;</span></code></p><p><code style="border: none; border-radius: 3px; word-wrap: break-word; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; max-width: 100%; background-color: transparent;"> </code></p><p><code style="border: none; border-radius: 3px; word-wrap: break-word; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; max-width: 100%; background-color: transparent;"><span class="pln" style="color: rgb(72, 72, 76);"> </span><span class="pun" style="color: rgb(147, 161, 161);">}</span></code></p><p><code style="border: none; border-radius: 3px; word-wrap: break-word; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; max-width: 100%; background-color: transparent;"><span class="pln" style="color: rgb(72, 72, 76);"> </span><span class="pun" style="color: rgb(147, 161, 161);">}</span></code></p><p><code style="border: none; border-radius: 3px; word-wrap: break-word; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; max-width: 100%; background-color: transparent;"> </code></p><p><code style="border: none; border-radius: 3px; word-wrap: break-word; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; max-width: 100%; background-color: transparent;"><span class="pln" style="color: rgb(72, 72, 76);"> dn</span><span class="pun" style="color: rgb(147, 161, 161);">.</span><span class="pln" style="color: rgb(72, 72, 76);">init</span><span class="pun" style="color: rgb(147, 161, 161);">(</span><span class="kwd" style="color: rgb(30, 52, 123);">function</span><span class="pun" style="color: rgb(147, 161, 161);">(){</span></code></p><p><code style="border: none; border-radius: 3px; word-wrap: break-word; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; max-width: 100%; background-color: transparent;"><span class="pln" style="color: rgb(72, 72, 76);"> registMain</span><span class="pun" style="color: rgb(147, 161, 161);">.</span><span class="pln" style="color: rgb(72, 72, 76);">h5</span><span class="pun" style="color: rgb(147, 161, 161);">();</span></code></p><p><code style="border: none; border-radius: 3px; word-wrap: break-word; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; max-width: 100%; background-color: transparent;"><span class="pln" style="color: rgb(72, 72, 76);"> </span><span class="pun" style="color: rgb(147, 161, 161);">})</span></code></p><p><code style="border: none; border-radius: 3px; word-wrap: break-word; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; max-width: 100%; background-color: transparent;"><span class="pln" style="color: rgb(72, 72, 76);"> </span><span class="pun" style="color: rgb(147, 161, 161);">})</span></code></p><p><code style="border: none; border-radius: 3px; word-wrap: break-word; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; max-width: 100%; background-color: transparent;"><span class="pun" style="color: rgb(147, 161, 161);">}</span></code></p><p><code style="border: none; border-radius: 3px; word-wrap: break-word; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; max-width: 100%; background-color: transparent;"><span class="tag" style="color: rgb(0, 0, 136);"></script></span></code></p><p><code style="border: none; border-radius: 3px; word-wrap: break-word; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; max-width: 100%; background-color: transparent;"><span class="tag" style="color: rgb(0, 0, 136);"/></code></p></pre><ul style="margin-top: 10px; margin-bottom: 10px; padding-left: 32px; font-family: Helvetica, 'Hiragino Sans GB', 微软雅黑, 'Microsoft YaHei UI', SimSun, SimHei, arial, sans-serif; font-size: 15px; line-height: 24px; white-space: normal; widows: auto;" class=" list-paddingleft-2"><li><p>命名</p></li><ul style="list-style-type: square;" class=" list-paddingleft-2"><li><p>id采用驼峰命名法则，如 formName</p></li><li><p>class中间用-隔开，如 li-col-50</p></li><li><p>图片命名也用-隔开，如 zhongan-bananer</p></li><li><p>模板以Tpl结尾，如 registerMainTpl</p></li><li><p>函数也用驼峰命名，使用 get/set/put/delete等前缀</p></li><li><p>文件名也用驼峰，使用跟文件内容相同的英文单词或词组</p></li><li><p>jquery选择器能用id就不用class</p></li></ul></ul><p style="margin-top: 10px; margin-bottom: 10px; font-size: 15px; font-family: Helvetica, 'Hiragino Sans GB', 微软雅黑, 'Microsoft YaHei UI', SimSun, SimHei, arial, sans-serif; line-height: 24px; white-space: normal; widows: auto;"><strong style="color: rgb(68, 81, 149);">目录结构</strong></p><p style="margin-top: 10px; margin-bottom: 10px; font-size: 15px; font-family: Helvetica, 'Hiragino Sans GB', 微软雅黑, 'Microsoft YaHei UI', SimSun, SimHei, arial, sans-serif; line-height: 24px; white-space: normal; widows: auto;">一个项目的目录结构就像人的骨架一样重要，对于日渐迭代版本越来越多的前端项目，如果没有一个好的目录结构会显得非常臃肿，难以维护，以下这个截图是我现在正使用的目录，也还有需要改进的地方，做一个参考：</p><p><img data-s="300,640" data-type="jpeg" referrerpolicy="no-referrer" data- referrerpolicy="no-referrer" src="http://mmbiz.qpic.cn/mmbiz_jpg/btsCOHx9LAMjYNofozReLWCkY8uuwiahoS9y8j0LPBia5QDNnERDlHL1TDCjFDzCZowVKAYG9pd0AF1hGhiatgDcg/0?wx_fmt=jpeg" data-ratio="1.2277777777777779" data-w="540"/></p><p style="margin-top: 10px; margin-bottom: 10px; font-size: 15px; font-family: Helvetica, 'Hiragino Sans GB', 微软雅黑, 'Microsoft YaHei UI', SimSun, SimHei, arial, sans-serif; line-height: 24px; white-space: normal; widows: auto;"><strong style="color: rgb(68, 81, 149);">定义readme.md</strong></p><p style="margin-top: 10px; margin-bottom: 10px; font-size: 15px; font-family: Helvetica, 'Hiragino Sans GB', 微软雅黑, 'Microsoft YaHei UI', SimSun, SimHei, arial, sans-serif; line-height: 24px; white-space: normal; widows: auto;">将规范规则，文档目录、wiki链接等说明放在readme必读文档里</p><p style="margin-top: 10px; margin-bottom: 10px; font-size: 15px; font-family: Helvetica, 'Hiragino Sans GB', 微软雅黑, 'Microsoft YaHei UI', SimSun, SimHei, arial, sans-serif; line-height: 24px; white-space: normal; widows: auto;"><strong style="color: rgb(68, 81, 149);">定义config.js</strong></p><p style="margin-top: 10px; margin-bottom: 10px; font-size: 15px; font-family: Helvetica, 'Hiragino Sans GB', 微软雅黑, 'Microsoft YaHei UI', SimSun, SimHei, arial, sans-serif; line-height: 24px; white-space: normal; widows: auto;">如果你是使用requirejs的项目，肯定有个config.js文件，这个文件每个页面都会引用，并且是在页面加载js的开始同步引用。官方说法是这个页面放js文件的key-value形式配置呢，而我习惯再js配置之前再定一个window对象的项目唯一子对象，再将项目一些常用的常量也定义好，以及请求状态码、url汇总，这样极有利于后续维护，如：</p><pre class="prettyprint linenums prettyprinted" style="margin-top: 10px; margin-bottom: 10px; border: 1px solid rgb(225, 225, 232); font-size: 13px; line-height: 19px; overflow: auto; padding: 10px; border-radius: 3px; word-wrap: break-word; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; widows: auto; background-color: rgb(247, 247, 249);"><p><code style="border: none; border-radius: 3px; word-wrap: break-word; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; max-width: 100%; background-color: transparent;"><span class="com" style="color: rgb(147, 161, 161);">//项目的全局唯一对象</span></code></p><p><code style="border: none; border-radius: 3px; word-wrap: break-word; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; max-width: 100%; background-color: transparent;"><span class="pln" style="color: rgb(72, 72, 76);">window</span><span class="pun" style="color: rgb(147, 161, 161);">.</span><span class="pln" style="color: rgb(72, 72, 76);">li </span><span class="pun" style="color: rgb(147, 161, 161);">=</span><span class="pln" style="color: rgb(72, 72, 76);"> </span><span class="pun" style="color: rgb(147, 161, 161);">{</span></code></p><p><code style="border: none; border-radius: 3px; word-wrap: break-word; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; max-width: 100%; background-color: transparent;"><span class="pln" style="color: rgb(72, 72, 76);"> version</span><span class="pun" style="color: rgb(147, 161, 161);">:</span><span class="pln" style="color: rgb(72, 72, 76);"> </span><span class="lit" style="color: rgb(25, 95, 145);">20170301</span><span class="pun" style="color: rgb(147, 161, 161);">,</span><span class="com" style="color: rgb(147, 161, 161);">//当前版本号，打包时用gulp自动变更</span></code></p><p><code style="border: none; border-radius: 3px; word-wrap: break-word; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; max-width: 100%; background-color: transparent;"><span class="pln" style="color: rgb(72, 72, 76);"> errorTips</span><span class="pun" style="color: rgb(147, 161, 161);">:</span><span class="pln" style="color: rgb(72, 72, 76);"> </span><span class="str" style="color: rgb(221, 17, 68);">'哎哟，网络好像有点问题了..'</span><span class="pun" style="color: rgb(147, 161, 161);">,</span><span class="com" style="color: rgb(147, 161, 161);">//无网络提示</span></code></p><p><code style="border: none; border-radius: 3px; word-wrap: break-word; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; max-width: 100%; background-color: transparent;"><span class="pln" style="color: rgb(72, 72, 76);"> timeout</span><span class="pun" style="color: rgb(147, 161, 161);">:</span><span class="pln" style="color: rgb(72, 72, 76);"> </span><span class="lit" style="color: rgb(25, 95, 145);">1000</span><span class="pun" style="color: rgb(147, 161, 161);">*</span><span class="lit" style="color: rgb(25, 95, 145);">60</span><span class="pun" style="color: rgb(147, 161, 161);">*</span><span class="lit" style="color: rgb(25, 95, 145);">60</span><span class="pun" style="color: rgb(147, 161, 161);">*</span><span class="lit" style="color: rgb(25, 95, 145);">24</span><span class="pun" style="color: rgb(147, 161, 161);">*</span><span class="lit" style="color: rgb(25, 95, 145);">20</span><span class="pun" style="color: rgb(147, 161, 161);">,</span><span class="com" style="color: rgb(147, 161, 161);">//登录失效暂时为20天</span></code></p><p><code style="border: none; border-radius: 3px; word-wrap: break-word; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; max-width: 100%; background-color: transparent;"><span class="pln" style="color: rgb(72, 72, 76);"> _MOBILE</span><span class="pun" style="color: rgb(147, 161, 161);">:</span><span class="pln" style="color: rgb(72, 72, 76);"> </span><span class="str" style="color: rgb(221, 17, 68);">'http://h5.liliangel.cn/base/mobile'</span><span class="pun" style="color: rgb(147, 161, 161);">,</span><span class="com" style="color: rgb(147, 161, 161);">//跳转手机页面</span></code></p><p><code style="border: none; border-radius: 3px; word-wrap: break-word; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; max-width: 100%; background-color: transparent;"><span class="pln" style="color: rgb(72, 72, 76);"> _ROOT</span><span class="pun" style="color: rgb(147, 161, 161);">:</span><span class="pln" style="color: rgb(72, 72, 76);"> </span><span class="str" style="color: rgb(221, 17, 68);">'http://www.liliangel.cn'</span><span class="pun" style="color: rgb(147, 161, 161);">,</span><span class="com" style="color: rgb(147, 161, 161);">//测试域名地址</span></code></p><p><code style="border: none; border-radius: 3px; word-wrap: break-word; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; max-width: 100%; background-color: transparent;"><span class="pln" style="color: rgb(72, 72, 76);"> _XHR</span><span class="pun" style="color: rgb(147, 161, 161);">:</span><span class="pln" style="color: rgb(72, 72, 76);"> </span><span class="str" style="color: rgb(221, 17, 68);">'/rest/'</span><span class="pun" style="color: rgb(147, 161, 161);">,</span><span class="com" style="color: rgb(147, 161, 161);">//ajax请求前缀</span></code></p><p><code style="border: none; border-radius: 3px; word-wrap: break-word; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; max-width: 100%; background-color: transparent;"><span class="pln" style="color: rgb(72, 72, 76);"> _CORS</span><span class="pun" style="color: rgb(147, 161, 161);">:</span><span class="pln" style="color: rgb(72, 72, 76);"> </span><span class="str" style="color: rgb(221, 17, 68);">'/cors/'</span><span class="pun" style="color: rgb(147, 161, 161);">,</span><span class="com" style="color: rgb(147, 161, 161);">//跨域请求前缀</span></code></p><p><code style="border: none; border-radius: 3px; word-wrap: break-word; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; max-width: 100%; background-color: transparent;"><span class="pln" style="color: rgb(72, 72, 76);"> _STATIC</span><span class="pun" style="color: rgb(147, 161, 161);">:</span><span class="pln" style="color: rgb(72, 72, 76);"> </span><span class="str" style="color: rgb(221, 17, 68);">'http://static.liliangel.cn'</span><span class="pun" style="color: rgb(147, 161, 161);">,</span><span class="com" style="color: rgb(147, 161, 161);">//静态资源域名</span></code></p><p><code style="border: none; border-radius: 3px; word-wrap: break-word; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; max-width: 100%; background-color: transparent;"><span class="pln" style="color: rgb(72, 72, 76);"> _WX</span><span class="pun" style="color: rgb(147, 161, 161);">:</span><span class="pln" style="color: rgb(72, 72, 76);"> </span><span class="str" style="color: rgb(221, 17, 68);">'http://h5.liliangel.cn/'</span><span class="com" style="color: rgb(147, 161, 161);">//微信h5服务器地址</span></code></p><p><code style="border: none; border-radius: 3px; word-wrap: break-word; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; max-width: 100%; background-color: transparent;"><span class="pun" style="color: rgb(147, 161, 161);">}</span></code></p><p><code style="border: none; border-radius: 3px; word-wrap: break-word; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; max-width: 100%; background-color: transparent;"> </code></p><p><code style="border: none; border-radius: 3px; word-wrap: break-word; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; max-width: 100%; background-color: transparent;"><span class="com" style="color: rgb(147, 161, 161);">//所有请求状态码</span></code></p><p><code style="border: none; border-radius: 3px; word-wrap: break-word; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; max-width: 100%; background-color: transparent;"><span class="pln" style="color: rgb(72, 72, 76);">li</span><span class="pun" style="color: rgb(147, 161, 161);">.</span><span class="pln" style="color: rgb(72, 72, 76);">code </span><span class="pun" style="color: rgb(147, 161, 161);">=</span><span class="pln" style="color: rgb(72, 72, 76);"> </span><span class="pun" style="color: rgb(147, 161, 161);">{</span></code></p><p><code style="border: none; border-radius: 3px; word-wrap: break-word; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; max-width: 100%; background-color: transparent;"><span class="pln" style="color: rgb(72, 72, 76);"> SUCCESS</span><span class="pun" style="color: rgb(147, 161, 161);">:</span><span class="pln" style="color: rgb(72, 72, 76);"> </span><span class="lit" style="color: rgb(25, 95, 145);">600</span><span class="pun" style="color: rgb(147, 161, 161);">,</span><span class="pln" style="color: rgb(72, 72, 76);"> </span><span class="com" style="color: rgb(147, 161, 161);">//成功</span></code></p><p><code style="border: none; border-radius: 3px; word-wrap: break-word; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; max-width: 100%; background-color: transparent;"><span class="pln" style="color: rgb(72, 72, 76);"> PHONE_EXIST</span><span class="pun" style="color: rgb(147, 161, 161);">:</span><span class="pln" style="color: rgb(72, 72, 76);"> </span><span class="lit" style="color: rgb(25, 95, 145);">603</span><span class="pln" style="color: rgb(72, 72, 76);"> </span><span class="com" style="color: rgb(147, 161, 161);">//手机号码已经存在</span></code></p><p><code style="border: none; border-radius: 3px; word-wrap: break-word; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; max-width: 100%; background-color: transparent;"><span class="pun" style="color: rgb(147, 161, 161);">}</span></code></p><p><code style="border: none; border-radius: 3px; word-wrap: break-word; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; max-width: 100%; background-color: transparent;"> </code></p><p><code style="border: none; border-radius: 3px; word-wrap: break-word; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; max-width: 100%; background-color: transparent;"><span class="com" style="color: rgb(147, 161, 161);">//所有请求url</span></code></p><p><code style="border: none; border-radius: 3px; word-wrap: break-word; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; max-width: 100%; background-color: transparent;"><span class="pln" style="color: rgb(72, 72, 76);">li</span><span class="pun" style="color: rgb(147, 161, 161);">.</span><span class="pln" style="color: rgb(72, 72, 76);">api </span><span class="pun" style="color: rgb(147, 161, 161);">=</span><span class="pln" style="color: rgb(72, 72, 76);"> </span><span class="pun" style="color: rgb(147, 161, 161);">{</span></code></p><p><code style="border: none; border-radius: 3px; word-wrap: break-word; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; max-width: 100%; background-color: transparent;"><span class="pln" style="color: rgb(72, 72, 76);"> sendMessage</span><span class="pun" style="color: rgb(147, 161, 161);">:</span><span class="pln" style="color: rgb(72, 72, 76);"> </span><span class="str" style="color: rgb(221, 17, 68);">'wechat/sendMessage'</span><span class="pln" style="color: rgb(72, 72, 76);"> </span><span class="com" style="color: rgb(147, 161, 161);">//发送消息url</span></code></p><p><code style="border: none; border-radius: 3px; word-wrap: break-word; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; max-width: 100%; background-color: transparent;"><span class="pun" style="color: rgb(147, 161, 161);">}</span></code></p><p><code style="border: none; border-radius: 3px; word-wrap: break-word; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; max-width: 100%; background-color: transparent;"> </code></p><p><code style="border: none; border-radius: 3px; word-wrap: break-word; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; max-width: 100%; background-color: transparent;"><span class="com" style="color: rgb(147, 161, 161);">//静态资源配置</span></code></p><p><code style="border: none; border-radius: 3px; word-wrap: break-word; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; max-width: 100%; background-color: transparent;"><span class="kwd" style="color: rgb(30, 52, 123);">require</span><span class="pun" style="color: rgb(147, 161, 161);">.</span><span class="pln" style="color: rgb(72, 72, 76);">config</span><span class="pun" style="color: rgb(147, 161, 161);">({</span></code></p><p><code style="border: none; border-radius: 3px; word-wrap: break-word; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; max-width: 100%; background-color: transparent;"><span class="pln" style="color: rgb(72, 72, 76);"> urlArgs</span><span class="pun" style="color: rgb(147, 161, 161);">:</span><span class="pln" style="color: rgb(72, 72, 76);"> </span><span class="str" style="color: rgb(221, 17, 68);">"v="</span><span class="pln" style="color: rgb(72, 72, 76);"> </span><span class="pun" style="color: rgb(147, 161, 161);">+</span><span class="pln" style="color: rgb(72, 72, 76);"> li</span><span class="pun" style="color: rgb(147, 161, 161);">.</span><span class="pln" style="color: rgb(72, 72, 76);">version</span><span class="pun" style="color: rgb(147, 161, 161);">,</span></code></p><p><code style="border: none; border-radius: 3px; word-wrap: break-word; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; max-width: 100%; background-color: transparent;"><span class="pln" style="color: rgb(72, 72, 76);"> baseUrl </span><span class="pun" style="color: rgb(147, 161, 161);">:</span><span class="pln" style="color: rgb(72, 72, 76);"> </span><span class="str" style="color: rgb(221, 17, 68);">"/"</span><span class="pun" style="color: rgb(147, 161, 161);">,</span></code></p><p><code style="border: none; border-radius: 3px; word-wrap: break-word; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; max-width: 100%; background-color: transparent;"><span class="pln" style="color: rgb(72, 72, 76);"> paths</span><span class="pun" style="color: rgb(147, 161, 161);">:</span><span class="pln" style="color: rgb(72, 72, 76);"> </span><span class="pun" style="color: rgb(147, 161, 161);">{</span></code></p><p><code style="border: none; border-radius: 3px; word-wrap: break-word; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; max-width: 100%; background-color: transparent;"><span class="pln" style="color: rgb(72, 72, 76);"> jquery</span><span class="pun" style="color: rgb(147, 161, 161);">:</span><span class="str" style="color: rgb(221, 17, 68);">'plugin/jquery/jquery-1.9.0.min'</span><span class="pun" style="color: rgb(147, 161, 161);">,</span></code></p><p><code style="border: none; border-radius: 3px; word-wrap: break-word; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; max-width: 100%; background-color: transparent;"><span class="pln" style="color: rgb(72, 72, 76);"> artTemplate</span><span class="pun" style="color: rgb(147, 161, 161);">:</span><span class="pln" style="color: rgb(72, 72, 76);"> </span><span class="str" style="color: rgb(221, 17, 68);">'plugin/template/artTemplate-3.0'</span><span class="pun" style="color: rgb(147, 161, 161);">,</span></code></p><p><code style="border: none; border-radius: 3px; word-wrap: break-word; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; max-width: 100%; background-color: transparent;"> </code></p><p><code style="border: none; border-radius: 3px; word-wrap: break-word; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; max-width: 100%; background-color: transparent;"><span class="pln" style="color: rgb(72, 72, 76);"> </span><span class="pun" style="color: rgb(147, 161, 161);">},</span></code></p><p><code style="border: none; border-radius: 3px; word-wrap: break-word; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; max-width: 100%; background-color: transparent;"><span class="pln" style="color: rgb(72, 72, 76);"> shim</span><span class="pun" style="color: rgb(147, 161, 161);">:</span><span class="pln" style="color: rgb(72, 72, 76);"> </span><span class="pun" style="color: rgb(147, 161, 161);">{</span></code></p><p><code style="border: none; border-radius: 3px; word-wrap: break-word; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; max-width: 100%; background-color: transparent;"><span class="pln" style="color: rgb(72, 72, 76);"> bootstrap</span><span class="pun" style="color: rgb(147, 161, 161);">:</span><span class="pln" style="color: rgb(72, 72, 76);"> </span><span class="pun" style="color: rgb(147, 161, 161);">{</span></code></p><p><code style="border: none; border-radius: 3px; word-wrap: break-word; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; max-width: 100%; background-color: transparent;"><span class="pln" style="color: rgb(72, 72, 76);"> deps</span><span class="pun" style="color: rgb(147, 161, 161);">:</span><span class="pln" style="color: rgb(72, 72, 76);"> </span><span class="pun" style="color: rgb(147, 161, 161);">[</span><span class="str" style="color: rgb(221, 17, 68);">'jquery'</span><span class="pun" style="color: rgb(147, 161, 161);">],</span></code></p><p><code style="border: none; border-radius: 3px; word-wrap: break-word; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; max-width: 100%; background-color: transparent;"><span class="pln" style="color: rgb(72, 72, 76);"> exports</span><span class="pun" style="color: rgb(147, 161, 161);">:</span><span class="pln" style="color: rgb(72, 72, 76);"> </span><span class="str" style="color: rgb(221, 17, 68);">'$'</span></code></p><p><code style="border: none; border-radius: 3px; word-wrap: break-word; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; max-width: 100%; background-color: transparent;"><span class="pln" style="color: rgb(72, 72, 76);"> </span><span class="pun" style="color: rgb(147, 161, 161);">}</span></code></p><p><code style="border: none; border-radius: 3px; word-wrap: break-word; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; max-width: 100%; background-color: transparent;"><span class="pln" style="color: rgb(72, 72, 76);"> </span><span class="pun" style="color: rgb(147, 161, 161);">},</span></code></p><p><code style="border: none; border-radius: 3px; word-wrap: break-word; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; max-width: 100%; background-color: transparent;"><span class="pln" style="color: rgb(72, 72, 76);"> waitSeconds</span><span class="pun" style="color: rgb(147, 161, 161);">:</span><span class="pln" style="color: rgb(72, 72, 76);"> </span><span class="lit" style="color: rgb(25, 95, 145);">15</span></code></p><p><code style="border: none; border-radius: 3px; word-wrap: break-word; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; max-width: 100%; background-color: transparent;"><span class="pun" style="color: rgb(147, 161, 161);">});</span></code></p></pre><p style="margin-top: 10px; margin-bottom: 10px; font-size: 15px; font-family: Helvetica, 'Hiragino Sans GB', 微软雅黑, 'Microsoft YaHei UI', SimSun, SimHei, arial, sans-serif; line-height: 24px; white-space: normal; widows: auto;"><strong style="color: rgb(68, 81, 149);">定义common.js</strong></p><p style="margin-top: 10px; margin-bottom: 10px; font-size: 15px; font-family: Helvetica, 'Hiragino Sans GB', 微软雅黑, 'Microsoft YaHei UI', SimSun, SimHei, arial, sans-serif; line-height: 24px; white-space: normal; widows: auto;">用来放置所有公共方法，同样也是每个页面都引用，正如上面定义好的一些常量一样，一个项目的开始，还需要一些方法上的准备工作，如：
请到「今天看啥」查看全文
推荐文章
|
全球健身指南 · 练就迷人肩膀，三角肌非常规训练！ 8 年前 |
|
科研圈 · Emoji 从何而来 因何而火 人们创造出千奇百怪的引申义 人工智能看得懂么 8 年前 |
|
YOHO潮流志 · MADNESS & MADGIRL新季型录发布！Fear Of God打造天价帽子 | 潮闻快食 7 年前 |
|
新财富 · 怎样从汽车金融产品上“薅羊毛”？ 7 年前 |
|
新智派 · 越狱插件：让iOS控制中心变的更加整洁！ 7 年前 |