专栏名称: JavaScript
面向JavaScript爱好人员提供:前端最新资讯、原创内容、JavaScript、HTML5、Ajax、jQuery、Node.js等一系列教程和经验分享。
目录
相关文章推荐
51好读  ›  专栏  ›  JavaScript

前端开发的历史和趋势

JavaScript  · 公众号  · Javascript  · 2017-03-08 11:08

正文

转自:https://github.com/ruanyf/jstraining/blob/master/docs/history.md

什么是前端

  • 前端:针对浏览器的开发,代码在浏览器运行

  • 后端:针对服务器的开发,代码在服务器运行

前后端不分的时代

互联网发展的早期,前后端开发是一体的,前端代码是后端代码的一部分。 
1.后端收到浏览器的请求 
2.生成静态页面 
3.发送到浏览器

后端 MVC 的开发模式

那时的网站开发,采用的是后端 MVC 模式。

  • Model(模型层):提供/保存数据

  • Controller(控制层):数据处理,实现业务逻辑

  • View(视图层):展示数据,提供用户界面

前端只是后端 MVC 的 V。

以 PHP 框架 Laravel 为例。

前端工程师的角色

那时的前端工程师,实际上是模板工程师,负责编写页面模板。 
后端代码读取模板,替换变量,渲染出页面。

典型的 PHP 模板

 </span><span class="pln" style="color: rgb(72, 72, 76);">Car {{ $car->id }}</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);"/></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);"><h1/></span><span class="pln" style="color: rgb(72, 72, 76);">Car {{ $car->id }}</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);"><ul/></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);"><li/></span><span class="pln" style="color: rgb(72, 72, 76);">Make: {{ $car->make }}</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);"><li/></span><span class="pln" style="color: rgb(72, 72, 76);">Model: {{ $car->model }}</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);"><li/></span><span class="pln" style="color: rgb(72, 72, 76);">Produced on: {{ $car->produced_on }}</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);"/></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);"/></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><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, 84, 149);">Ajax</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;">Ajax 技术诞生,改变了一切。</p><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>2004年:Gmail</p></li><li><p>2005年:Google 地图</p></li></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;">前端不再是后端的模板,可以独立得到各种数据。</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, 84, 149);">Web 2.0</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;">Ajax 技术促成了 Web 2.0 的诞生。</p><p><img data-type="gif" referrerpolicy="no-referrer" data- referrerpolicy="no-referrer" src="http://mmbiz.qpic.cn/mmbiz_png/btsCOHx9LANUFPImUPwk3o98FhicibNZdtLuPcxicqAic1UPgpaKpMaLp5WF1azLxz7U1BicAXEB5jpVsmS8ogsaQqA/0?wx_fmt=gif" data-ratio="0.6382978723404256" data-w="470"/></p><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>Web 1.0:静态网页,纯内容展示</p></li><li><p>Web 2.0:动态网页,富交互,前端数据处理</p></li></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;">从那时起,前端变得复杂了,对前端工程师的要求越来越高。</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, 84, 149);">前端 MVC 框架</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;">前端通过 Ajax 得到数据,因此也有了处理数据的需求。</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;">前端代码变得也需要保存数据、处理数据、生成视图,这导致了前端 MVC 框架的诞生。</p><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>2010年,Backbone.js</p></li></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, 84, 149);"><p/></strong></p><p><img data-s="300,640" data-type="png" referrerpolicy="no-referrer" data- referrerpolicy="no-referrer" src="http://mmbiz.qpic.cn/mmbiz_png/btsCOHx9LANUFPImUPwk3o98FhicibNZdtZgRAoYNShK3e4k2k613hwu8V3et3ia1ibt660OgDoPxSVsicIUO55DBJA/0?wx_fmt=png" data-ratio="0.17797552836484984" data-w="899"/></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, 84, 149);">Backbone.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;">Backbone 将前端代码分成两个基本部分。</p><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>Model:管理数据</p></li><li><p>View:数据的展现</p></li></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, 84, 149);"><p/></strong></p><p><img data-s="300,640" data-type="png" referrerpolicy="no-referrer" data- referrerpolicy="no-referrer" src="http://mmbiz.qpic.cn/mmbiz_png/btsCOHx9LANUFPImUPwk3o98FhicibNZdtpjicgQ7lkOa1ffsnjfqxY9KVf6rvPqyJ1khOq6eicktzjhic60NyCcuOQ/0?wx_fmt=png" data-ratio="0.18764044943820224" data-w="890"/></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, 84, 149);">前端 Controller</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;">Backbone 只有 M 和 V,没有 C。因为,前端 Controller 与后端不同。 <br/></p><ul class=" list-paddingleft-2" style="list-style-type: disc;"><li><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></li><li><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;">只需要处理 UI 逻辑,响应用户的一举一动</p></li></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;">所以,前端 Controller 相对比较简单。Backbone 没有 C,只用事件来处理 UI 逻辑。</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="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);"> </span><span class="typ" style="color: teal;">AppView</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="typ" style="color: teal;">Backbone</span><span class="pun" style="color: rgb(147, 161, 161);">.</span><span class="typ" style="color: teal;">View</span><span class="pun" style="color: rgb(147, 161, 161);">.</span><span class="pln" style="color: rgb(72, 72, 76);">extend</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);">    events</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);">      </span><span class="str" style="color: rgb(221, 17, 68);">"keypress #new-todo"</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);">"createOnEnter"</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);">"click #clear-completed"</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);">"clearCompleted"</span><span class="pun" style="color: rgb(147, 161, 161);">,</span></code> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <ins class="adsbygoogle" style="display:block; text-align:center;" data-ad-layout="in-article" data-ad-format="fluid" data-ad-client="ca-pub-1837452791782084" data-ad-slot="7041996284"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </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);">"click #toggle-all"</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);">"toggleAllComplete"</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></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, 84, 149);">Router</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;">前端还有一种天然的方法,可以切换视图,那就是 URL。</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;">通过 URL 切换视图,这就是 Router(路由)的作用。以 Backbone 为例。</p><p><img data-s="300,640" data-type="png" referrerpolicy="no-referrer" data- referrerpolicy="no-referrer" src="http://mmbiz.qpic.cn/mmbiz_png/btsCOHx9LANUFPImUPwk3o98FhicibNZdt5mqxwLicCCIiaP0iahusLJabNICpcLvmiabvPfyh3PE9Q14iaDYqcMic3jDg/0?wx_fmt=png" data-ratio="0.2662921348314607" data-w="890"/></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="typ" style="color: teal;">App</span><span class="pun" style="color: rgb(147, 161, 161);">.</span><span class="typ" style="color: teal;">Router</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="typ" style="color: teal;">Backbone</span><span class="pun" style="color: rgb(147, 161, 161);">.</span><span class="typ" style="color: teal;">Router</span><span class="pun" style="color: rgb(147, 161, 161);">.</span><span class="pln" style="color: rgb(72, 72, 76);">extend</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);">  routes</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);">    </span><span class="str" style="color: rgb(221, 17, 68);">''</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);">'index'</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);">'show'</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);">'show'</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);">  index</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="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></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);">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><span class="pln" style="color: rgb(72, 72, 76);">append</span><span class="pun" style="color: rgb(147, 161, 161);">(</span><span class="str" style="color: rgb(221, 17, 68);">"调用了 Index 路由"</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);">  show</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="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></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);">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><span class="pln" style="color: rgb(72, 72, 76);">append</span><span class="pun" style="color: rgb(147, 161, 161);">(</span><span class="str" style="color: rgb(221, 17, 68);">"调用了 Show 路由"</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></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, 84, 149);">MVVM 模式</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;">另一些框架提出 MVVM 模式,用 View Model 代替 Controller。</p><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>Model</p></li><li><p>View</p></li><li><p>View-Model:简化的 Controller,唯一作用就是为 View 提供处理好的数据,不含其他逻辑。</p></li></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;">本质:view 绑定 view-model,视图与数据模型强耦合。数据的变化实时反映在 view 上,不需要手动处理。</p><p><img data-s="300,640" data-type="png" referrerpolicy="no-referrer" data- referrerpolicy="no-referrer" src="http://mmbiz.qpic.cn/mmbiz_png/btsCOHx9LANUFPImUPwk3o98FhicibNZdtiab8PH3TBic6fxURLAKJFMs8dj1zy7ibtT1BOr4V7VObDh4tXfuwbq4Vg/0?wx_fmt=png" data-ratio="0.2987012987012987" data-w="770"/></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, 84, 149);">SPA</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><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><li><p>切换视图</p></li><li><p>用户交互</p></li></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;">这意味着,网页其实是一个应用程序。</p><blockquote style="margin-top: 10px; margin-bottom: 10px; padding-right: 12px; padding-left: 12px; border-left-width: 4px; border-left-color: rgb(221, 221, 221); color: rgb(170, 170, 170); 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;"><p>SPA = Single-page application</p></blockquote><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;">2010年后,前端工程师从开发页面,变成了开发”前端应用“(跑在浏览器里面的应用程序)。</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="png" referrerpolicy="no-referrer" data- referrerpolicy="no-referrer" src="http://mmbiz.qpic.cn/mmbiz_png/btsCOHx9LANUFPImUPwk3o98FhicibNZdttwwzxb9ZXSh4DxHF9nQCeUa18H2cdEsId4q6wbPjno11KMkh8afqmg/0?wx_fmt=png" data-ratio="0.18083333333333335" data-w="1200"/></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="png" referrerpolicy="no-referrer" data- referrerpolicy="no-referrer" src="http://mmbiz.qpic.cn/mmbiz_png/btsCOHx9LANUFPImUPwk3o98FhicibNZdtujnclMtCUQgjtxTWbmmfcjWSico580WxjWmLg7lxTM7cgibeKhL4BAicw/0?wx_fmt=png" data-ratio="0.18083333333333335" data-w="1200"/></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;">多了一个前端 MVC 层</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, 84, 149);">Angular</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;">Google 公司推出的 Angular 是最流行的 MVVM 前端框架。</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;">它的风格属于 HTML 语言的增强,核心概念是双向绑定。</p><p><img data-s="300,640" data-type="png" referrerpolicy="no-referrer" data- referrerpolicy="no-referrer" src="http://mmbiz.qpic.cn/mmbiz_png/btsCOHx9LANUFPImUPwk3o98FhicibNZdtcZjImKbI4EguDf0icwQ4cxp2iaVNY7nGibmy98xvPcqlsibuxetfn4m61g/0?wx_fmt=png" data-ratio="0.271484375" data-w="512"/></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="tag" style="color: rgb(0, 0, 136);"><div><span class="pln" style="color: rgb(72, 72, 76);"> </span><span class="atn" style="color: teal;">ng-app</span><span class="pun" style="color: rgb(147, 161, 161);">=</span><span class="atv" style="color: rgb(221, 17, 68);">""</span><span class="tag" style="color: rgb(0, 0, 136);">></span><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);"><p/></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></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);"><input/></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="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"</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="atn" style="color: teal;">ng-model</span><span class="pun" style="color: rgb(147, 161, 161);">=</span><span class="atv" style="color: rgb(221, 17, 68);">"name"</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="atn" style="color: teal;">placeholder</span><span class="pun" style="color: rgb(147, 161, 161);">=</span><span class="atv" 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="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="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);"><h1/></span><span class="pln" style="color: rgb(72, 72, 76);">你好,{{name}}</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="tag" style="color: rgb(0, 0, 136);"/></code></p> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <ins class="adsbygoogle" style="display:block; text-align:center;" data-ad-layout="in-article" data-ad-format="fluid" data-ad-client="ca-pub-1837452791782084" data-ad-slot="7041996284"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div></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, 84, 149);">Vue</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;">Vue.js 是现在很热门的一种前端 MVVM 框架。</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;">它的基本思想与 Angular 类似,但是用法更简单,而且引入了响应式编程的概念。</p><p><img data-s="300,640" data-type="png" referrerpolicy="no-referrer" data- referrerpolicy="no-referrer" src="http://mmbiz.qpic.cn/mmbiz_png/btsCOHx9LANUFPImUPwk3o98FhicibNZdtFcLrz32ARqkEmcpsjl6nI0zqYxCCKibXdohcMbUnuvuRjHEUCTNPkJQ/0?wx_fmt=png" data-ratio="0.8783783783783784" data-w="370"/></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;">HTML 代码</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="tag" style="color: rgb(0, 0, 136);"><div><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);">"journal"</span><span class="tag" style="color: rgb(0, 0, 136);">></span><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);"><input/><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"</span><span class="pln" style="color: rgb(72, 72, 76);"> </span><span class="atn" style="color: teal;">v-model</span><span class="pun" style="color: rgb(147, 161, 161);">=</span><span class="atv" style="color: rgb(221, 17, 68);">"message"</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="pln" style="color: rgb(72, 72, 76);">  </span><span class="tag" style="color: rgb(0, 0, 136);"><div><span class="pln" style="color: rgb(72, 72, 76);">{{message}}</span><span class="tag" style="color: rgb(0, 0, 136);"/></div></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></div></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;">JS 代码</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="kwd" style="color: rgb(30, 52, 123);">var</span><span class="pln" style="color: rgb(72, 72, 76);"> journal </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);">new</span><span class="pln" style="color: rgb(72, 72, 76);"> </span><span class="typ" style="color: teal;">Vue</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);">  el</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);">'#journal'</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);">  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;"><span class="pln" style="color: rgb(72, 72, 76);">    message</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);">'Your first entry'</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></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, 84, 149);">前后端分离</strong></p><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>Ajax -> 前端应用兴起</p></li><li><p>智能手机 -> 多终端支持</p></li></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;">这两个原因,导致前端开发方式发生根本的变化。</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;">前端不再是后端 MVC 中的 V,而是单独的一层。</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, 84, 149);">REST 接口</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 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 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;">后端接口一般是 REST 形式,前后端的通信协议一般是 HTTP。</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, 84, 149);">Node</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;">2009年,Node 项目诞生,它是服务器上的 JavaScript 运行环境。</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;">Node = JavaScript + 操作系统 API</p><p><img data-s="300,640" data-type="png" referrerpolicy="no-referrer" data- referrerpolicy="no-referrer" src="http://mmbiz.qpic.cn/mmbiz_png/btsCOHx9LANUFPImUPwk3o98FhicibNZdtngyYAQOocA6FynSFicYGiamOr4Cf9iaK058gw7jXVzNcJQCsiatTTF0ndA/0?wx_fmt=png" data-ratio="0.5" data-w="600"/></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, 84, 149);">Node 的意义</strong></p><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>JavaScript 成为服务器脚本语言,与 Python 和 Ruby 一样</p></li><li><p>JavaScript 成为唯一的浏览器和服务器都支持的语言</p></li><li><p>前端工程师可以编写后端程序了</p></li></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, 84, 149);">前端开发模式的根本改变</strong></p><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>Node 环境下开发</p></li><li><p>大量使用服务器端工具</p></li><li><p>引入持续集成等软件工程的标准流程</p></li><li><p>开发完成后,编译成浏览器可以运行的脚本,放上 CDN</p></li></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, 84, 149);">全栈工程师</strong> <br/>前端工程师正在转变为全栈工程师</p><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><li><p>从数据库到 UI 的所有开发</p></li></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, 84, 149);">全栈技能</strong> <br/>怎样才能称为全栈工程师?</p><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>传统前端技能:HTML、JavaScript、CSS</p></li><li><p>一门后端语言</p></li><li><p>移动端开发:iOS / Android / HTML5</p></li><li><p>其他技能:数据库、HTTP 等等</p></li></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, 84, 149);">软件行业的发展动力</strong> <br/>历史演变:前后端不分 -> 前后端分离 -> 全栈工程师 <br/>动力:更加产业化、大规模地生产软件</p><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><li><p>成本更低</p></li></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;">通用性好、能够快速产出的技术最终会赢,单个程序员的生产力要求越来越高。</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, 84, 149);">H5 就是一个最好的例子</strong> <br/>为什么 H5 技术会赢得移动端?</p><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>开发速度快:Native 需要重新编译才能看到结果,H5 是即时输出</p></li><li><p>开发成本低:Native 需要两个开发团队,H5 只要一个</p></li><li><p>快速发布:安卓 Native 新版本需要24小时,iOS 需要 3 ~ 4 天,H5 可以随时更新</p></li></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, 84, 149);">未来软件的特点</strong></p><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><li><p>高并发</p></li><li><p>分布式</p></li><li><p>跨终端</p></li></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;">现在基于 Web 的前端技术,将演变为未来所有软件的通用的 GUI 解决方案。</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, 84, 149);">未来只有两种软件工程师</strong></p><ul style="margin-top: 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>手机端</p></li><li><p>PC 端</p></li><li><p>TV 端</p></li><li><p>VR 端</p></li><li><p>……</p></li></ul><li><p>云工程师</p></li></ul><p><br/></p><p style="max-width: 100%; min-height: 1em; color: rgb(62, 62, 62); font-size: 16px; line-height: 25.6px; white-space: normal; text-align: center; box-sizing: border-box !important; word-wrap: break-word !important; background-color: rgb(255, 255, 255);"><span style="max-width: 100%; font-size: 14px; color: rgb(134, 134, 134); box-sizing: border-box !important; word-wrap: break-word !important;">---- 广告 <span style="max-width: 100%; box-sizing: border-box !important; word-wrap: break-word !important;">----</span></span></p><p style="max-width: 100%; min-height: 1em; color: rgb(62, 62, 62); font-size: 16px; line-height: 25.6px; white-space: normal; box-sizing: border-box !important; word-wrap: break-word !important; background-color: rgb(255, 255, 255);"><span style="max-width: 100%; font-size: 14px; color: rgb(134, 134, 134); box-sizing: border-box !important; word-wrap: break-word !important;">掘金是一个高质量的技术社区,从ECMAScript6到Vue.js,性能优化到开源类库,让你不错过前端开发的每一个技术干货。点击链接即可访问掘金官网,或到各大应用市场搜索「掘金」下载APP,技术干货尽在掌握中</span></p><p style="max-width: 100%; min-height: 1em; color: rgb(62, 62, 62); font-size: 16px; line-height: 25.6px; white-space: normal; box-sizing: border-box !important; word-wrap: break-word !important; background-color: rgb(255, 255, 255);"><img data-ratio="0.53125" data-s="300,640" referrerpolicy="no-referrer" data- referrerpolicy="no-referrer" src="http://mmbiz.qpic.cn/mmbiz_jpg/btsCOHx9LAMv4YkaGWHDVChhicrvFAvzYibic7mdmo56WZNuFDWe4qZgaKjvRpGLF3ib1ex49NriavH77j73vdgJNsw/640?wx_fmt=jpeg" data-type="jpeg" data-w="640" style="box-sizing: border-box !important; word-wrap: break-word !important; width: auto !important; visibility: visible !important;"/></p> </div> </div> </div> </div> <div class="topic_buttons"> <div class="fr gray f11" style="line-height: 12px; padding-top: 3px; text-shadow: 0px 1px 0px #fff;"> </div> </div> </div> <div class="sep5"></div> <div class="box"> <div class="cell"> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <!-- jintian_wenzhi --> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-1837452791782084" data-ad-slot="8042312523" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> <div class="sep5"></div> <div class="sep10"></div> <div class="box"> <div class="cell"> <span class="gray">推荐文章</span> </div> <div class="cell"> <table cellpadding="0" cellspacing="0" border="0" width="100%"> <tbody> <tr> <td width="32" valign="top" align="center"> <img src="http://img2.jintiankansha.me/get?src=http://mmbiz.qpic.cn/mmbiz_jpg/fQIPnblE3Yjw53FZSTIwx0iawia1ialTrFS3rvnMvYbJL6UyM3WeKjczmGME9JRWaIctbhqp66LBkQdvR5DVGiabvw/0?wx_fmt=jpeg" referrerpolicy="no-referrer" class="avatar" style="max-width: 32px; max-height: 32px;" border="0" align="default"> </td> <td width="10" valign="top"></td> <td width="auto" valign="top" align="left"> <span class="item_hot_topic_title"> <span>Focus生活家</span>  ·  <a href="/t/enM4!zhxRnE3Zg==">新晋维密雎晓雯的男友不仅卖肉夹馍,也开兰博基尼!| 明星の深夜食堂</a> </span> <div class="sep5"></div> <span class="fade">7 年前</span> </td> </tr> </tbody> </table> </div> <div class="cell"> <table cellpadding="0" cellspacing="0" border="0" width="100%"> <tbody> <tr> <td width="32" valign="top" align="center"> <img src="http://img2.jintiankansha.me/get?src=http://mmbiz.qpic.cn/mmbiz_jpg/3uh0uAC8qM9ON0vwYictffBoqqB8a8A7Ru5w6rULN56RXLB2bibb1HkgXIq6psL4FHBGIU62haG6cgs511jgicwtA/0?wx_fmt=jpeg" referrerpolicy="no-referrer" class="avatar" style="max-width: 32px; max-height: 32px;" border="0" align="default"> </td> <td width="10" valign="top"></td> <td width="auto" valign="top" align="left"> <span class="item_hot_topic_title"> <span>汽车最前线</span>  ·  <a href="/t/UWRnQjlsMG!TOQ==">这3款车堪称自主标杆!颜值甩宝马奥迪好几条街?</a> </span> <div class="sep5"></div> <span class="fade">7 年前</span> </td> </tr> </tbody> </table> </div> <div class="cell"> <table cellpadding="0" cellspacing="0" border="0" width="100%"> <tbody> <tr> <td width="32" valign="top" align="center"> <img src="http://img2.jintiankansha.me/get?src=http://mmbiz.qpic.cn/mmbiz_jpg/qwldA1IRoDBuKuFCEcFvJlUnRcn0yibYPrnrdUqSWH4hHBZdiaM2S0E8L6uf9O49OXRuu8ccxaZeSw36f8xJUcyQ/0?wx_fmt=jpeg" referrerpolicy="no-referrer" class="avatar" style="max-width: 32px; max-height: 32px;" border="0" align="default"> </td> <td width="10" valign="top"></td> <td width="auto" valign="top" align="left"> <span class="item_hot_topic_title"> <span>黄三角早报</span>  ·  <a href="/t/UEhzcDBx!lA4bw==">手机每天关机一次,好还是不好?这些关于手机的“冷知识”,99%的人都不知道!</a> </span> <div class="sep5"></div> <span class="fade">7 年前</span> </td> </tr> </tbody> </table> </div> <div class="cell"> <table cellpadding="0" cellspacing="0" border="0" width="100%"> <tbody> <tr> <td width="32" valign="top" align="center"> <img src="http://img2.jintiankansha.me/get?src=http://mmbiz.qpic.cn/mmbiz_jpg/pmBoItic0Bygjic69W7uNcbrDRMibqsTswSticOHX673cAgQR7xMGwrUeo6LQAbgdw8ASqQqMXYNzmbn6AZABmKfBQ/0?wx_fmt=jpeg" referrerpolicy="no-referrer" class="avatar" style="max-width: 32px; max-height: 32px;" border="0" align="default"> </td> <td width="10" valign="top"></td> <td width="auto" valign="top" align="left"> <span class="item_hot_topic_title"> <span>吴晓波频道</span>  ·  <a href="/t/NTNsbkh3a0xsMA==">我特反感别人说我拥有完美的生活 | 刘楠直播精华</a> </span> <div class="sep5"></div> <span class="fade">7 年前</span> </td> </tr> </tbody> </table> </div> <div class="cell"> <table cellpadding="0" cellspacing="0" border="0" width="100%"> <tbody> <tr> <td width="32" valign="top" align="center"> <img src="http://img2.jintiankansha.me/get?src=http://mmbiz.qpic.cn/mmbiz_jpg/dqoaIYOHmZ28XicgR4UibMw3Th8ibNaPgOKxZYjpeGY4iapkTwyyqGXylZRUdfsE1eP8sUic0dOy4jLJKrLLm6wxGdg/0?wx_fmt=jpeg" referrerpolicy="no-referrer" class="avatar" style="max-width: 32px; max-height: 32px;" border="0" align="default"> </td> <td width="10" valign="top"></td> <td width="auto" valign="top" align="left"> <span class="item_hot_topic_title"> <span>销售与市场</span>  ·  <a href="/t/QUtGMHhUTTJEZA==">你的工作越重要,你也越重要</a> </span> <div class="sep5"></div> <span class="fade">7 年前</span> </td> </tr> </tbody> </table> </div> </div> <div class="sep5"></div> <div class="box"> <div class="cell"> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <!-- jintian_wenzhi --> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-1837452791782084" data-ad-slot="8042312523" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> <div class="sep5"></div> </div> </div> <div class="c"></div> <div class="sep20"></div> </div> <div id="Bottom"> <div class="content footer"> <div class="inner"> <div class="sep10"></div> <div class="fr"> </div> <strong> <a href="http://www.sov5.org" class="dark" target="_blank">Sov5搜索</a>   <span class="snow">·</span>   <a href="http://baike.sov5.org" class="dark" target="_blank">小百科</a>   <span class="snow">·</span>   <a class="go-mobile" href="javascript:;">移动版</a> </strong> <div class="sep20"></div> 51好读 - 好文章就要读起来! </div> </div> </div> <script type="text/javascript" src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/highlight.js/9.2.0/highlight.min.js"></script> <script type="text/javascript" src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/1.11.0/jquery.min.js"></script> <script type="text/javascript" src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/jqueryui/1.9.2/jquery-ui.min.js"></script> <script type="text/javascript" src="/static/js/vendors/jquery/jquery.autosize.js?v=ac4d62e3842f55aa2b78d2c2ef1af833"></script> <script type="text/javascript" src="/static/js/vendors/lscache/lscache.min.js?v=bf403ab76d287d394375662defac76c3"></script> <script type="text/javascript" src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/select2/3.0.0/select2.min.js"></script> <script type="text/javascript" src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery.selectboxit/3.8.0/jquery.selectBoxIt.min.js"></script> <script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery.textcomplete/0.3.3/jquery.textcomplete.min.js" type="text/javascript"></script> <script type="text/javascript" src="/static/js/site/base/common.js?v=97646d06e4a04b2bf43b7b467cfd321e"></script> <script type="text/javascript" src="/static/js/site/base/v2ex.js?v=d41d8cd98f00b204e9800998ecf8427e"></script> <script type="text/javascript" src="/static/js/site/base/base.js?v=edcfd5298fe2acdc62d7fb498c373f99"></script> <!-- Google tag (gtag.js) --> <script async src="https://www.googletagmanager.com/gtag/js?id=G-0SBZ564CXS"></script> <script> window.dataLayer = window.dataLayer || []; function gtag() { dataLayer.push(arguments); } gtag('js', new Date()); gtag('config', 'G-0SBZ564CXS'); </script> <script> var _hmt = _hmt || []; (function () { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?55a854de13a9633b2937a3c24817fc7b"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> <script> (function () { var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https') { bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; } else { bp.src = 'http://push.zhanzhang.baidu.com/push.js'; } var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s); })(); </script> <!-- 多条广告如下脚本只需引入一次 --> <script type="text/javascript" src="//cpro.baidustatic.com/cpro/ui/cm.js" async="async" defer="defer"> </script> <script type="text/javascript" src="/static/js/site/post/post.js?v=e7935b685b5f2aef4de680492fd620cf"></script> <script type="text/javascript"> jQuery.browser = {}; (function () { jQuery.browser.msie = false; jQuery.browser.version = 0; if (navigator.userAgent.match(/MSIE ([0-9]+)\./)) { jQuery.browser.msie = true; jQuery.browser.version = RegExp.$1; } })(); </script> <script type="text/javascript" src="/static/js/site/post/post_common.js?v=15968870dc6780d5664012d59b217894"></script> <script type="text/javascript" src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery-hashchange/1.3/jquery.ba-hashchange.min.js"></script> <script type="text/javascript" src="/static/js/site/post/post_folder.js?v=d3abab84fa5b19533d2131bf98e690f7"></script> </body> </html>