民主万岁 發表於 2019-11-9 00:57:00

前端开发的历史.md

<div style="color: rgba(47, 47, 47, 1); font-family: &quot;Helvetica Neue&quot;, Helvetica, Tahoma, Arial, &quot;Hiragino Sans GB&quot;, STHeiti, &quot;Microsoft YaHei&quot;, &quot;微软雅黑&quot;, &quot;WenQuanYi Micro Hei&quot;, STXihei, &quot;华文细黑&quot;, Heiti, &quot;黑体&quot;, SimSun, &quot;宋体&quot;, Song, sans-serif; font-size: 16px; line-height: 1.33; font-weight: 100; word-wrap: break-word; letter-spacing: 0; word-spacing: 0.25em">
        <div class="preview html_preview xsj_public"><div class="xiaoshujiang_element xsj_anchor">

</div>
<h1 class="xsj_heading_h1" style="line-height: 1.6; margin: 1em 0 0.6em; font-family: inherit; font-weight: 500; color: inherit; text-rendering: optimizelegibility; font-size: 3.4rem"><span class="xsj_heading_content">前端开发的历史</span></h1>
<div class="xiaoshujiang_element xsj_anchor">

</div>
<h2 class="xsj_heading_h2" style="margin: 1em 0 0.6em; font-family: inherit; font-weight: 500; line-height: 1.1; color: inherit; text-rendering: optimizelegibility; font-size: 3rem"><span class="xsj_heading_content">前端和后端</span></h2>
<p class="xsj_paragraph_level_0" style="line-height: 1.6; margin: 0 0 1.1em">前端（英语：front-end）和后端（英语：back-end）是描述进程开始和结束的通用词汇。前端作用于采集输入信息，后端进行处理。计算机程序的界面样式，视觉呈现属于前端。</p>
<ul style="padding: 0; margin: 0 0 10px 35px">
<li>web 前端：针对浏览器的开发，代码在浏览器运行</li>
<li>web 后端：针对服务器的开发，代码在服务器运行</li>
</ul>
<p class="xsj_paragraph_level_0" style="line-height: 1.6; margin: 0 0 1.1em"></p><div class="story_image_container story_block_image" style="text-align: center"><div class="story_image" style="display: inline-block; position: relative; max-width: 100%"><img src="https://img2018.cnblogs.com/blog/1569431/201911/1569431-20191109005706499-1425225807.png" alt="frontend" title="frontend" name="images/frontend.png" data-src="./images/frontend.png" style="vertical-align: middle; max-width: 100%; height: auto; border: 0; border-radius: 0.3125em; box-shadow: 0 2px 4px rgba(34, 36, 38, 0.12), 0 2px 10px rgba(34, 36, 38, 0.08)"><br><div class="story_image_caption " style="border-bottom: 1px solid rgba(217, 217, 217, 1); display: inline-block; color: rgba(153, 153, 153, 1); padding: 10px">frontend</div></div></div><p style="line-height: 1.6; margin: 0 0 1.1em"></p>
<div class="xiaoshujiang_element xsj_anchor">

</div>
<h2 class="xsj_heading_h2" style="margin: 1em 0 0.6em; font-family: inherit; font-weight: 500; line-height: 1.1; color: inherit; text-rendering: optimizelegibility; font-size: 3rem"><span class="xsj_heading_content">前后端不分的时代</span></h2>
<p class="xsj_paragraph_level_0" style="line-height: 1.6; margin: 0 0 1.1em">互联网发展的早期，前后端开发是一体的，前端代码是后端代码的一部分。</p>
<ol style="padding: 0; margin: 0 0 10px 35px">
<li>后端收到浏览器的请求</li>
<li>生成静态页面</li>
<li>发送到浏览器</li>
</ol>
<div class="xiaoshujiang_element xsj_anchor">

</div>
<h2 class="xsj_heading_h2" style="margin: 1em 0 0.6em; font-family: inherit; font-weight: 500; line-height: 1.1; color: inherit; text-rendering: optimizelegibility; font-size: 3rem"><span class="xsj_heading_content">后端 MVC 的开发模式</span></h2>
<p class="xsj_paragraph_level_0" style="line-height: 1.6; margin: 0 0 1.1em">那时的网站开发，采用的是后端 MVC 模式。MVC模式（Model–view–controller）是软件工程中的一种软件架构模式，把软件系统分为三个基本部分：模型（Model）、视图（View）和控制器（Controller）。</p>
<ul style="padding: 0; margin: 0 0 10px 35px">
<li>模型（Model） - 程序员编写程序应有的功能（实现算法等等）、数据库专家进行数据管理和数据库设计(可以实现具体的功能)；提供/保存数据</li>
<li>视图（View） - 界面设计人员进行图形界面设计；展示数据，提供用户界面</li>
<li>控制器（Controller）- 负责转发请求，对请求进行处理；数据处理，实现业务逻辑</li>
</ul>
<p class="xsj_paragraph_level_0" style="line-height: 1.6; margin: 0 0 1.1em">前端只是后端 MVC 的 V。<br>
通过<code style="background-color: rgba(214, 219, 223, 0.28); color: rgba(44, 62, 80, 1); border-radius: 4px; padding: 2px 4px; border: 0; font-size: 90%">JavaScript</code>所实现的基于 MVC 模型，需要注意的是：MVC 不是一种技术，而是一种理念:</p>
<div class="xiaoshujiang_code_container" style="margin: 1em 0; position: relative; padding-bottom: 2em"><pre style="word-wrap: break-word; tab-size: 4; white-space: pre-wrap; font-family: monospace; line-height: initial !important; margin: 0"><code data-info="javascript" class="language-javascript hljs" style="background: rgba(248, 248, 248, 1); color: rgba(51, 51, 51, 1); border-radius: 4px; padding: 0.5em; border: 0; font-size: 90%; overflow: visible !important; display: block; overflow-x: auto"><span class="hljs-comment" style="overflow: visible !important; color: rgba(153, 153, 136, 1); font-style: italic">/** 模擬 Model, View, Controller */</span>
<span class="hljs-keyword" style="overflow: visible !important; color: rgba(51, 51, 51, 1); font-weight: bold">var</span> M = {}, V = {}, C = {};

<span class="hljs-comment" style="overflow: visible !important; color: rgba(153, 153, 136, 1); font-style: italic">/** Model 負責存放資料 */</span>
M.data = <span class="hljs-string" style="overflow: visible !important; color: rgba(221, 17, 68, 1)">"hello world"</span>;

<span class="hljs-comment" style="overflow: visible !important; color: rgba(153, 153, 136, 1); font-style: italic">/** View 負責將資料輸出到螢幕上 */</span>
V.render = <span class="hljs-function" style="overflow: visible !important">(<span class="hljs-params" style="overflow: visible !important">M</span>) =&gt;</span> { alert(M.data); }

<span class="hljs-comment" style="overflow: visible !important; color: rgba(153, 153, 136, 1); font-style: italic">/** Controller 作為一個 M 和 V 的橋樑 */</span>
C.handleOnload = <span class="hljs-function" style="overflow: visible !important"><span class="hljs-params" style="overflow: visible !important">()</span> =&gt;</span> { V.render(M); }

<span class="hljs-comment" style="overflow: visible !important; color: rgba(153, 153, 136, 1); font-style: italic">/** 在網頁讀取的時候呼叫 Controller */</span>
<span class="hljs-built_in" style="overflow: visible !important; color: rgba(0, 134, 179, 1)">window</span>.onload = C.handleOnload;
</code></pre></div>
<p class="xsj_paragraph_level_0" style="line-height: 1.6; margin: 0 0 1.1em">以 PHP 框架 Laravel 为例。</p>
<p class="xsj_paragraph_level_0" style="line-height: 1.6; margin: 0 0 1.1em"></p><div class="story_image_container story_block_image" style="text-align: center"><div class="story_image" style="display: inline-block; position: relative; max-width: 100%"><img src="https://img2018.cnblogs.com/blog/1569431/201911/1569431-20191109005706858-796828758.png" alt="laravel-mvc" title="laravel-mvc" name="images/laravel-mvc.png" data-src="./images/laravel-mvc.png" style="vertical-align: middle; max-width: 100%; height: auto; border: 0; border-radius: 0.3125em; box-shadow: 0 2px 4px rgba(34, 36, 38, 0.12), 0 2px 10px rgba(34, 36, 38, 0.08)"><br><div class="story_image_caption " style="border-bottom: 1px solid rgba(217, 217, 217, 1); display: inline-block; color: rgba(153, 153, 153, 1); padding: 10px">laravel-mvc</div></div></div><p style="line-height: 1.6; margin: 0 0 1.1em"></p>
<div class="xiaoshujiang_element xsj_anchor">

</div>
<h2 class="xsj_heading_h2" style="margin: 1em 0 0.6em; font-family: inherit; font-weight: 500; line-height: 1.1; color: inherit; text-rendering: optimizelegibility; font-size: 3rem"><span class="xsj_heading_content">前端工程师的角色</span></h2>
<p class="xsj_paragraph_level_0" style="line-height: 1.6; margin: 0 0 1.1em">那时的前端工程师，实际上是模板工程师，负责编写页面模板。后端代码读取模板，替换变量，渲染出页面。</p>
<p class="xsj_paragraph_level_0" style="line-height: 1.6; margin: 0 0 1.1em">典型的 PHP 模板:</p>
<div class="xiaoshujiang_code_container" style="margin: 1em 0; position: relative; padding-bottom: 2em"><pre style="word-wrap: break-word; tab-size: 4; white-space: pre-wrap; font-family: monospace; line-height: initial !important; margin: 0"><code data-info="php" class="language-php hljs" style="background: rgba(248, 248, 248, 1); color: rgba(51, 51, 51, 1); border-radius: 4px; padding: 0.5em; border: 0; font-size: 90%; overflow: visible !important; display: block; overflow-x: auto">&lt;html&gt;
&lt;head&gt;&lt;title&gt;Car {{ $car-&gt;id }}&lt;/title&gt;&lt;/head&gt;
&lt;body&gt;
    &lt;h1&gt;Car {{ $car-&gt;id }}&lt;/h1&gt;
    &lt;ul&gt;
      &lt;li&gt;Make: {{ $car-&gt;make }}&lt;/li&gt;
      &lt;li&gt;Model: {{ $car-&gt;model }}&lt;/li&gt;
      &lt;li&gt;Produced on: {{ $car-&gt;produced_on }}&lt;/li&gt;
    &lt;/ul&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre></div>
<div class="xiaoshujiang_element xsj_anchor">

</div>
<h2 class="xsj_heading_h2" style="margin: 1em 0 0.6em; font-family: inherit; font-weight: 500; line-height: 1.1; color: inherit; text-rendering: optimizelegibility; font-size: 3rem"><span class="xsj_heading_content">HTML、Cookie、CSS、JS</span></h2>
<p class="xsj_paragraph_level_0" style="line-height: 1.6; margin: 0 0 1.1em">1991年10月HTML标签，一个非正式CERN文件首次公开18个HTML标签，2014年10月28日，HTML 5作为W3C推荐标准发布</p>
<p class="xsj_paragraph_level_0" style="line-height: 1.6; margin: 0 0 1.1em">Cookie（复数形态Cookies），又称为“小甜饼”。类型为“小型文本文件”，指某些网站为了辨别用户身份而储存在用户本地终端（Client Side）上的数据（通常经过加密）。由网景公司的前雇员卢·蒙特利在1993年3月发明。</p>
<p class="xsj_paragraph_level_0" style="line-height: 1.6; margin: 0 0 1.1em">1994年，哈肯·维姆·莱和伯特·波斯合作设计CSS。层叠样式表（英语：Cascading Style Sheets，缩写：CSS；又称串样式列表、级联样式表、串接样式表、阶层式样式表）是一种用来为结构化文档（如HTML文档或XML应用）添加样式（字体、间距和颜色等）的计算机语言，由W3C定义和维护。当前最新版本是CSS2.1，为W3C的推荐标准。CSS3现在已被大部分现代浏览器支持，而下一版的CSS4仍在开发中。</p>
<p class="xsj_paragraph_level_0" style="line-height: 1.6; margin: 0 0 1.1em">JavaScript（通常缩写为JS）是一种高级的、解释型的编程语言。JavaScript是一门基于原型、函数先行的语言，是一门多范式的语言，它支持面向对象编程，命令式编程，以及函数式编程。它提供语法来操控文本、数组、日期以及正则表达式等，不支持I/O，比如网络、存储和图形等，但这些都可以由它的宿主环境提供支持。它已经由ECMA（欧洲电脑制造商协会）通过ECMAScript实现语言的标准化。JavaScript最初开发于1996年，被使用于Netscape Navigator网页浏览器。</p>
<div class="xiaoshujiang_element xsj_anchor">

</div>
<h2 class="xsj_heading_h2" style="margin: 1em 0 0.6em; font-family: inherit; font-weight: 500; line-height: 1.1; color: inherit; text-rendering: optimizelegibility; font-size: 3rem"><span class="xsj_heading_content">Ajax</span></h2>
<p class="xsj_paragraph_level_0" style="line-height: 1.6; margin: 0 0 1.1em">AJAX即“Asynchronous JavaScript and XML”（异步的JavaScript与XML技术），指的是一套综合了多项技术的浏览器端网页开发技术。Ajax的概念由杰西·詹姆士·贾瑞特所提出。</p>
<p class="xsj_paragraph_level_0" style="line-height: 1.6; margin: 0 0 1.1em">1995年，JAVA语言的第一版发布，随之发布的的Java applets（JAVA小程序）首次实现了异步加载。浏览器通过运行嵌入网页中的Java applets与服务器交换数据，不必刷新网页。1996年，Internet Explorer将iframe元素加入到HTML，支持局部刷新网页。1998年前后，Outlook Web Access小组写成了允许客户端脚本发送HTTP请求（XMLHTTP）的第一个组件。2004年：Gmail；2005年：Google 地图。</p>
<p class="xsj_paragraph_level_0" style="line-height: 1.6; margin: 0 0 1.1em">前端不再是后端的模板，可以独立得到各种数据。</p>
<div class="xiaoshujiang_element xsj_anchor">

</div>
<h2 class="xsj_heading_h2" style="margin: 1em 0 0.6em; font-family: inherit; font-weight: 500; line-height: 1.1; color: inherit; text-rendering: optimizelegibility; font-size: 3rem"><span class="xsj_heading_content">Web 2.0</span></h2>
<p class="xsj_paragraph_level_0" style="line-height: 1.6; margin: 0 0 1.1em">Web 1.0 最早的概念包括常更新的静态HTML页面。而.com时代的成功则是依靠一个更加动态的Web（指代“Web 1.5”），其中CMS（内容管理系统）可以从不断变化的内容数据库中即时生成动态HTML页面。</p>
<p class="xsj_paragraph_level_0" style="line-height: 1.6; margin: 0 0 1.1em">Web 2.0是一种新的互联网方式，通过网络应用（Web Applications）促进网络上人与人间的信息交换和协同合作，其模式更加以用户为中心。典型的Web 2.0站点有：网络社区、网络应用程序、社交网站、博客、Wiki等等。动态网页，富交互，前端数据处理。</p>
<p class="xsj_paragraph_level_0" style="line-height: 1.6; margin: 0 0 1.1em">Ajax 技术促成了 Web 2.0 的诞生。</p>
<p class="xsj_paragraph_level_0" style="line-height: 1.6; margin: 0 0 1.1em">从那时起，前端变得复杂了，对前端工程师的要求越来越高。</p>
<div class="xiaoshujiang_element xsj_anchor">

</div>
<h2 class="xsj_heading_h2" style="margin: 1em 0 0.6em; font-family: inherit; font-weight: 500; line-height: 1.1; color: inherit; text-rendering: optimizelegibility; font-size: 3rem"><span class="xsj_heading_content">前端 MVC 框架</span></h2>
<p class="xsj_paragraph_level_0" style="line-height: 1.6; margin: 0 0 1.1em">前端通过 Ajax 得到数据，因此也有了处理数据的需求。前端代码变得也需要保存数据、处理数据、生成视图，这导致了前端 MVC 框架的诞生。</p>
<p class="xsj_paragraph_level_0" style="line-height: 1.6; margin: 0 0 1.1em">2010年，Backbone.js。Backbone.js是一套JavaScript框架与RESTful JSON的应用程序接口。也是一套大致上符合MVC架构的编程范型。常被用来开发单页的互联网应用程序，以及用来维护网络应用程序的各种部分（例如多用户与服务端）的同步。Backbone.js是由Jeremy Ashkenas所开发，他同时也是CoffeeScript的开发者。</p>
<p class="xsj_paragraph_level_0" style="line-height: 1.6; margin: 0 0 1.1em"></p><div class="story_image_container story_block_image" style="text-align: center"><div class="story_image" style="display: inline-block; position: relative; max-width: 100%"><img src="https://img2018.cnblogs.com/blog/1569431/201911/1569431-20191109005707089-1396971260.png" alt="backbone" title="backbone" name="images/backbone.png" data-src="./images/backbone.png" style="vertical-align: middle; max-width: 100%; height: auto; border: 0; border-radius: 0.3125em; box-shadow: 0 2px 4px rgba(34, 36, 38, 0.12), 0 2px 10px rgba(34, 36, 38, 0.08)"><br><div class="story_image_caption " style="border-bottom: 1px solid rgba(217, 217, 217, 1); display: inline-block; color: rgba(153, 153, 153, 1); padding: 10px">backbone</div></div></div><p style="line-height: 1.6; margin: 0 0 1.1em"></p>
<p class="xsj_paragraph_level_0" style="line-height: 1.6; margin: 0 0 1.1em">Backbone 将前端代码分成两个基本部分。</p>
<ul style="padding: 0; margin: 0 0 10px 35px">
<li>Model：管理数据</li>
<li>View：数据的展现</li>
</ul>
<p class="xsj_paragraph_level_0" style="line-height: 1.6; margin: 0 0 1.1em"></p><div class="story_image_container story_block_image" style="text-align: center"><div class="story_image" style="display: inline-block; position: relative; max-width: 100%"><img src="https://img2018.cnblogs.com/blog/1569431/201911/1569431-20191109005707273-1906085894.png" alt="backbone-model-view" title="backbone-model-view" name="images/backbone-model-view.png" data-src="./images/backbone-model-view.png" style="vertical-align: middle; max-width: 100%; height: auto; border: 0; border-radius: 0.3125em; box-shadow: 0 2px 4px rgba(34, 36, 38, 0.12), 0 2px 10px rgba(34, 36, 38, 0.08)"><br><div class="story_image_caption " style="border-bottom: 1px solid rgba(217, 217, 217, 1); display: inline-block; color: rgba(153, 153, 153, 1); padding: 10px">backbone-model-view</div></div></div><p style="line-height: 1.6; margin: 0 0 1.1em"></p>
<div class="xiaoshujiang_element xsj_anchor">

</div>
<h2 class="xsj_heading_h2" style="margin: 1em 0 0.6em; font-family: inherit; font-weight: 500; line-height: 1.1; color: inherit; text-rendering: optimizelegibility; font-size: 3rem"><span class="xsj_heading_content">前端 Controller</span></h2>
<p class="xsj_paragraph_level_0" style="line-height: 1.6; margin: 0 0 1.1em">Backbone 只有 M 和 V，没有 C。因为，前端 Controller 与后端不同。</p>
<ul style="padding: 0; margin: 0 0 10px 35px">
<li>不需要，也不应该处理业务逻辑</li>
<li>只需要处理 UI 逻辑，响应用户的一举一动</li>
</ul>
<p class="xsj_paragraph_level_0" style="line-height: 1.6; margin: 0 0 1.1em">所以，前端 Controller 相对比较简单。Backbone 没有 C，只用事件来处理 UI 逻辑。</p>
<div class="xiaoshujiang_code_container" style="margin: 1em 0; position: relative; padding-bottom: 2em"><pre style="word-wrap: break-word; tab-size: 4; white-space: pre-wrap; font-family: monospace; line-height: initial !important; margin: 0"><code data-info="javascript" class="language-javascript hljs" style="background: rgba(248, 248, 248, 1); color: rgba(51, 51, 51, 1); border-radius: 4px; padding: 0.5em; border: 0; font-size: 90%; overflow: visible !important; display: block; overflow-x: auto"> <span class="hljs-keyword" style="overflow: visible !important; color: rgba(51, 51, 51, 1); font-weight: bold">var</span> AppView = Backbone.View.extend({
    <span class="hljs-comment" style="overflow: visible !important; color: rgba(153, 153, 136, 1); font-style: italic">// ...</span>
    events: {
      <span class="hljs-string" style="overflow: visible !important; color: rgba(221, 17, 68, 1)">"keypress #new-todo"</span>:<span class="hljs-string" style="overflow: visible !important; color: rgba(221, 17, 68, 1)">"createOnEnter"</span>,
      <span class="hljs-string" style="overflow: visible !important; color: rgba(221, 17, 68, 1)">"click #clear-completed"</span>: <span class="hljs-string" style="overflow: visible !important; color: rgba(221, 17, 68, 1)">"clearCompleted"</span>,
      <span class="hljs-string" style="overflow: visible !important; color: rgba(221, 17, 68, 1)">"click #toggle-all"</span>: <span class="hljs-string" style="overflow: visible !important; color: rgba(221, 17, 68, 1)">"toggleAllComplete"</span>
},
});
</code></pre></div>
<div class="xiaoshujiang_element xsj_anchor">

</div>
<h2 class="xsj_heading_h2" style="margin: 1em 0 0.6em; font-family: inherit; font-weight: 500; line-height: 1.1; color: inherit; text-rendering: optimizelegibility; font-size: 3rem"><span class="xsj_heading_content">Router</span></h2>
<p class="xsj_paragraph_level_0" style="line-height: 1.6; margin: 0 0 1.1em">前端还有一种天然的方法，可以切换视图，那就是 URL。通过 URL 切换视图，这就是 Router（路由）的作用。以 Backbone 为例。</p>
<p class="xsj_paragraph_level_0" style="line-height: 1.6; margin: 0 0 1.1em"></p><div class="story_image_container story_block_image" style="text-align: center"><div class="story_image" style="display: inline-block; position: relative; max-width: 100%"><img src="https://img2018.cnblogs.com/blog/1569431/201911/1569431-20191109005707452-974821754.png" alt="backbone-routing" title="backbone-routing" name="images/backbone-routing.png" data-src="./images/backbone-routing.png" style="vertical-align: middle; max-width: 100%; height: auto; border: 0; border-radius: 0.3125em; box-shadow: 0 2px 4px rgba(34, 36, 38, 0.12), 0 2px 10px rgba(34, 36, 38, 0.08)"><br><div class="story_image_caption " style="border-bottom: 1px solid rgba(217, 217, 217, 1); display: inline-block; color: rgba(153, 153, 153, 1); padding: 10px">backbone-routing</div></div></div><p style="line-height: 1.6; margin: 0 0 1.1em"></p>
<div class="xiaoshujiang_code_container" style="margin: 1em 0; position: relative; padding-bottom: 2em"><pre style="word-wrap: break-word; tab-size: 4; white-space: pre-wrap; font-family: monospace; line-height: initial !important; margin: 0"><code data-info="javascript" class="language-javascript hljs" style="background: rgba(248, 248, 248, 1); color: rgba(51, 51, 51, 1); border-radius: 4px; padding: 0.5em; border: 0; font-size: 90%; overflow: visible !important; display: block; overflow-x: auto">App.Router = Backbone.Router.extend({
<span class="hljs-attr" style="overflow: visible !important">routes</span>: {
    <span class="hljs-string" style="overflow: visible !important; color: rgba(221, 17, 68, 1)">''</span>: <span class="hljs-string" style="overflow: visible !important; color: rgba(221, 17, 68, 1)">'index'</span>,
    <span class="hljs-string" style="overflow: visible !important; color: rgba(221, 17, 68, 1)">'show'</span>: <span class="hljs-string" style="overflow: visible !important; color: rgba(221, 17, 68, 1)">'show'</span>
    },
<span class="hljs-attr" style="overflow: visible !important">index</span>: <span class="hljs-function" style="overflow: visible !important"><span class="hljs-keyword" style="overflow: visible !important; color: rgba(51, 51, 51, 1); font-weight: bold">function</span> (<span class="hljs-params" style="overflow: visible !important"></span>) </span>{
    $(<span class="hljs-built_in" style="overflow: visible !important; color: rgba(0, 134, 179, 1)">document</span>.body).append(<span class="hljs-string" style="overflow: visible !important; color: rgba(221, 17, 68, 1)">"调用了 Index 路由"</span>);
},
<span class="hljs-attr" style="overflow: visible !important">show</span>: <span class="hljs-function" style="overflow: visible !important"><span class="hljs-keyword" style="overflow: visible !important; color: rgba(51, 51, 51, 1); font-weight: bold">function</span> (<span class="hljs-params" style="overflow: visible !important"></span>) </span>{
    $(<span class="hljs-built_in" style="overflow: visible !important; color: rgba(0, 134, 179, 1)">document</span>.body).append(<span class="hljs-string" style="overflow: visible !important; color: rgba(221, 17, 68, 1)">"调用了 Show 路由"</span>);
},
});
</code></pre></div>
<div class="xiaoshujiang_element xsj_anchor">

</div>
<h2 class="xsj_heading_h2" style="margin: 1em 0 0.6em; font-family: inherit; font-weight: 500; line-height: 1.1; color: inherit; text-rendering: optimizelegibility; font-size: 3rem"><span class="xsj_heading_content">MVVM 模式</span></h2>
<p class="xsj_paragraph_level_0" style="line-height: 1.6; margin: 0 0 1.1em">另一些框架提出 MVVM 模式，用 View Model 代替 Controller。</p>
<p class="xsj_paragraph_level_0" style="line-height: 1.6; margin: 0 0 1.1em">MVVM（Model–view–viewmodel）是一种软件架构模式。MVVM有助于将图形用户界面的开发与业务逻辑或后端逻辑（数据模型）的开发分离开来，这是通过标记语言或GUI代码实现的。</p>
<ul style="padding: 0; margin: 0 0 10px 35px">
<li>Model</li>
<li>View</li>
<li>View-Model：简化的 Controller，唯一作用就是为 View 提供处理好的数据，不含其他逻辑。</li>
</ul>
<p class="xsj_paragraph_level_0" style="line-height: 1.6; margin: 0 0 1.1em">本质：view 绑定 view-model，视图与数据模型强耦合。数据的变化实时反映在 view 上，不需要手动处理。</p>
<p class="xsj_paragraph_level_0" style="line-height: 1.6; margin: 0 0 1.1em"></p><div class="story_image_container story_block_image" style="text-align: center"><div class="story_image" style="display: inline-block; position: relative; max-width: 100%"><img src="https://img2018.cnblogs.com/blog/1569431/201911/1569431-20191109005707632-457681870.png" alt="mvvm" title="mvvm" name="images/mvvm.png" data-src="./images/mvvm.png" style="vertical-align: middle; max-width: 100%; height: auto; border: 0; border-radius: 0.3125em; box-shadow: 0 2px 4px rgba(34, 36, 38, 0.12), 0 2px 10px rgba(34, 36, 38, 0.08)"><br><div class="story_image_caption " style="border-bottom: 1px solid rgba(217, 217, 217, 1); display: inline-block; color: rgba(153, 153, 153, 1); padding: 10px">mvvm</div></div></div><p style="line-height: 1.6; margin: 0 0 1.1em"></p>
<div class="xiaoshujiang_element xsj_anchor">

</div>
<h2 class="xsj_heading_h2" style="margin: 1em 0 0.6em; font-family: inherit; font-weight: 500; line-height: 1.1; color: inherit; text-rendering: optimizelegibility; font-size: 3rem"><span class="xsj_heading_content">SPA</span></h2>
<p class="xsj_paragraph_level_0" style="line-height: 1.6; margin: 0 0 1.1em">前端可以做到：</p>
<ul style="padding: 0; margin: 0 0 10px 35px">
<li>读写数据</li>
<li>切换视图</li>
<li>用户交互</li>
</ul>
<p class="xsj_paragraph_level_0" style="line-height: 1.6; margin: 0 0 1.1em">这意味着，网页其实是一个应用程序。<code style="background-color: rgba(214, 219, 223, 0.28); color: rgba(44, 62, 80, 1); border-radius: 4px; padding: 2px 4px; border: 0; font-size: 90%">SPA = Single-page application</code></p>
<p class="xsj_paragraph_level_0" style="line-height: 1.6; margin: 0 0 1.1em">2010年后，前端工程师从开发页面，变成了开发“前端应用”（跑在浏览器里面的应用程序）。</p>
<p class="xsj_paragraph_level_0" style="line-height: 1.6; margin: 0 0 1.1em">传统的架构：</p>
<p class="xsj_paragraph_level_0" style="line-height: 1.6; margin: 0 0 1.1em"></p><div class="story_image_container story_block_image" style="text-align: center"><div class="story_image" style="display: inline-block; position: relative; max-width: 100%"><img src="https://img2018.cnblogs.com/blog/1569431/201911/1569431-20191109005707812-30560835.png" alt="architecture-old" title="architecture-old" name="images/architecture-old.png" data-src="./images/architecture-old.png" style="vertical-align: middle; max-width: 100%; height: auto; border: 0; border-radius: 0.3125em; box-shadow: 0 2px 4px rgba(34, 36, 38, 0.12), 0 2px 10px rgba(34, 36, 38, 0.08)"><br><div class="story_image_caption " style="border-bottom: 1px solid rgba(217, 217, 217, 1); display: inline-block; color: rgba(153, 153, 153, 1); padding: 10px">architecture-old</div></div></div><p style="line-height: 1.6; margin: 0 0 1.1em"></p>
<p class="xsj_paragraph_level_0" style="line-height: 1.6; margin: 0 0 1.1em">单页应用的架构（多了一个前端 MVC 层）：</p>
<p class="xsj_paragraph_level_0" style="line-height: 1.6; margin: 0 0 1.1em"></p><div class="story_image_container story_block_image" style="text-align: center"><div class="story_image" style="display: inline-block; position: relative; max-width: 100%"><img src="https://img2018.cnblogs.com/blog/1569431/201911/1569431-20191109005708000-420600745.png" alt="architecture-new" title="architecture-new" name="images/architecture-new.png" data-src="./images/architecture-new.png" style="vertical-align: middle; max-width: 100%; height: auto; border: 0; border-radius: 0.3125em; box-shadow: 0 2px 4px rgba(34, 36, 38, 0.12), 0 2px 10px rgba(34, 36, 38, 0.08)"><br><div class="story_image_caption " style="border-bottom: 1px solid rgba(217, 217, 217, 1); display: inline-block; color: rgba(153, 153, 153, 1); padding: 10px">architecture-new</div></div></div><p style="line-height: 1.6; margin: 0 0 1.1em"></p>
<div class="xiaoshujiang_element xsj_anchor">

</div>
<h2 class="xsj_heading_h2" style="margin: 1em 0 0.6em; font-family: inherit; font-weight: 500; line-height: 1.1; color: inherit; text-rendering: optimizelegibility; font-size: 3rem"><span class="xsj_heading_content">Angular</span></h2>
<p class="xsj_paragraph_level_0" style="line-height: 1.6; margin: 0 0 1.1em">Google 公司推出的 Angular 是最流行的 MVVM 前端框架。它的风格属于 HTML 语言的增强，核心概念是双向绑定。</p>
<p class="xsj_paragraph_level_0" style="line-height: 1.6; margin: 0 0 1.1em"></p><div class="story_image_container story_block_image" style="text-align: center"><div class="story_image" style="display: inline-block; position: relative; max-width: 100%"><img src="https://img2018.cnblogs.com/blog/1569431/201911/1569431-20191109005708201-1352460322.png" alt="angular" title="angular" name="images/angular.png" data-src="./images/angular.png" style="vertical-align: middle; max-width: 100%; height: auto; border: 0; border-radius: 0.3125em; box-shadow: 0 2px 4px rgba(34, 36, 38, 0.12), 0 2px 10px rgba(34, 36, 38, 0.08)"><br><div class="story_image_caption " style="border-bottom: 1px solid rgba(217, 217, 217, 1); display: inline-block; color: rgba(153, 153, 153, 1); padding: 10px">angular</div></div></div><p style="line-height: 1.6; margin: 0 0 1.1em"></p>
<div class="xiaoshujiang_code_container" style="margin: 1em 0; position: relative; padding-bottom: 2em"><pre style="word-wrap: break-word; tab-size: 4; white-space: pre-wrap; font-family: monospace; line-height: initial !important; margin: 0"><code data-info="html" class="language-html hljs xml" style="background: rgba(248, 248, 248, 1); color: rgba(51, 51, 51, 1); border-radius: 4px; padding: 0.5em; border: 0; font-size: 90%; overflow: visible !important; display: block; overflow-x: auto"><span class="hljs-tag" style="overflow: visible !important; color: rgba(0, 0, 128, 1); font-weight: normal">&lt;<span class="hljs-name" style="overflow: visible !important; color: rgba(0, 0, 128, 1); font-weight: normal">div</span> <span class="hljs-attr" style="overflow: visible !important; color: rgba(0, 128, 128, 1)">ng-app</span>=<span class="hljs-string" style="overflow: visible !important; color: rgba(221, 17, 68, 1)">""</span>&gt;</span>
<span class="hljs-tag" style="overflow: visible !important; color: rgba(0, 0, 128, 1); font-weight: normal">&lt;<span class="hljs-name" style="overflow: visible !important; color: rgba(0, 0, 128, 1); font-weight: normal">p</span>&gt;</span>
    姓名 :
    <span class="hljs-tag" style="overflow: visible !important; color: rgba(0, 0, 128, 1); font-weight: normal">&lt;<span class="hljs-name" style="overflow: visible !important; color: rgba(0, 0, 128, 1); font-weight: normal">input</span>
      <span class="hljs-attr" style="overflow: visible !important; color: rgba(0, 128, 128, 1)">type</span>=<span class="hljs-string" style="overflow: visible !important; color: rgba(221, 17, 68, 1)">"text"</span>
      <span class="hljs-attr" style="overflow: visible !important; color: rgba(0, 128, 128, 1)">ng-model</span>=<span class="hljs-string" style="overflow: visible !important; color: rgba(221, 17, 68, 1)">"name"</span>
      <span class="hljs-attr" style="overflow: visible !important; color: rgba(0, 128, 128, 1)">placeholder</span>=<span class="hljs-string" style="overflow: visible !important; color: rgba(221, 17, 68, 1)">"在这里输入您的大名"</span>
    &gt;</span>
<span class="hljs-tag" style="overflow: visible !important; color: rgba(0, 0, 128, 1); font-weight: normal">&lt;/<span class="hljs-name" style="overflow: visible !important; color: rgba(0, 0, 128, 1); font-weight: normal">p</span>&gt;</span>
<span class="hljs-tag" style="overflow: visible !important; color: rgba(0, 0, 128, 1); font-weight: normal">&lt;<span class="hljs-name" style="overflow: visible !important; color: rgba(0, 0, 128, 1); font-weight: normal">h1</span>&gt;</span>你好，{{name}}<span class="hljs-tag" style="overflow: visible !important; color: rgba(0, 0, 128, 1); font-weight: normal">&lt;/<span class="hljs-name" style="overflow: visible !important; color: rgba(0, 0, 128, 1); font-weight: normal">h1</span>&gt;</span>
<span class="hljs-tag" style="overflow: visible !important; color: rgba(0, 0, 128, 1); font-weight: normal">&lt;/<span class="hljs-name" style="overflow: visible !important; color: rgba(0, 0, 128, 1); font-weight: normal">div</span>&gt;</span>
</code></pre></div>
<div class="xiaoshujiang_element xsj_anchor">

</div>
<h2 class="xsj_heading_h2" style="margin: 1em 0 0.6em; font-family: inherit; font-weight: 500; line-height: 1.1; color: inherit; text-rendering: optimizelegibility; font-size: 3rem"><span class="xsj_heading_content">Vue</span></h2>
<p class="xsj_paragraph_level_0" style="line-height: 1.6; margin: 0 0 1.1em">Vue.js 是现在很热门的一种前端 MVVM 框架。它的基本思想与 Angular 类似，但是用法更简单，而且引入了响应式编程的概念。</p>
<p class="xsj_paragraph_level_0" style="line-height: 1.6; margin: 0 0 1.1em"></p><div class="story_image_container story_block_image" style="text-align: center"><div class="story_image" style="display: inline-block; position: relative; max-width: 100%"><img src="https://img2018.cnblogs.com/blog/1569431/201911/1569431-20191109005708392-1588589554.png" alt="vue" title="vue" name="images/vue-logo.png" data-src="./images/vue-logo.png" style="vertical-align: middle; max-width: 100%; height: auto; border: 0; border-radius: 0.3125em; box-shadow: 0 2px 4px rgba(34, 36, 38, 0.12), 0 2px 10px rgba(34, 36, 38, 0.08)"><br><div class="story_image_caption " style="border-bottom: 1px solid rgba(217, 217, 217, 1); display: inline-block; color: rgba(153, 153, 153, 1); padding: 10px">vue</div></div></div><p style="line-height: 1.6; margin: 0 0 1.1em"></p>
<div class="xiaoshujiang_code_container" style="margin: 1em 0; position: relative; padding-bottom: 2em"><pre style="word-wrap: break-word; tab-size: 4; white-space: pre-wrap; font-family: monospace; line-height: initial !important; margin: 0"><code data-info="html" class="language-html hljs xml" style="background: rgba(248, 248, 248, 1); color: rgba(51, 51, 51, 1); border-radius: 4px; padding: 0.5em; border: 0; font-size: 90%; overflow: visible !important; display: block; overflow-x: auto"><span class="hljs-tag" style="overflow: visible !important; color: rgba(0, 0, 128, 1); font-weight: normal">&lt;<span class="hljs-name" style="overflow: visible !important; color: rgba(0, 0, 128, 1); font-weight: normal">div</span> <span class="hljs-attr" style="overflow: visible !important; color: rgba(0, 128, 128, 1)">id</span>=<span class="hljs-string" style="overflow: visible !important; color: rgba(221, 17, 68, 1)">"journal"</span>&gt;</span>
<span class="hljs-tag" style="overflow: visible !important; color: rgba(0, 0, 128, 1); font-weight: normal">&lt;<span class="hljs-name" style="overflow: visible !important; color: rgba(0, 0, 128, 1); font-weight: normal">input</span> <span class="hljs-attr" style="overflow: visible !important; color: rgba(0, 128, 128, 1)">type</span>=<span class="hljs-string" style="overflow: visible !important; color: rgba(221, 17, 68, 1)">"text"</span> <span class="hljs-attr" style="overflow: visible !important; color: rgba(0, 128, 128, 1)">v-model</span>=<span class="hljs-string" style="overflow: visible !important; color: rgba(221, 17, 68, 1)">"message"</span>&gt;</span>
<span class="hljs-tag" style="overflow: visible !important; color: rgba(0, 0, 128, 1); font-weight: normal">&lt;<span class="hljs-name" style="overflow: visible !important; color: rgba(0, 0, 128, 1); font-weight: normal">div</span>&gt;</span>{{message}}<span class="hljs-tag" style="overflow: visible !important; color: rgba(0, 0, 128, 1); font-weight: normal">&lt;/<span class="hljs-name" style="overflow: visible !important; color: rgba(0, 0, 128, 1); font-weight: normal">div</span>&gt;</span>
<span class="hljs-tag" style="overflow: visible !important; color: rgba(0, 0, 128, 1); font-weight: normal">&lt;/<span class="hljs-name" style="overflow: visible !important; color: rgba(0, 0, 128, 1); font-weight: normal">div</span>&gt;</span>
<span class="hljs-tag" style="overflow: visible !important; color: rgba(0, 0, 128, 1); font-weight: normal">&lt;<span class="hljs-name" style="overflow: visible !important; color: rgba(0, 0, 128, 1); font-weight: normal">script</span>&gt;</span><span class="actionscript" style="overflow: visible !important">
<span class="hljs-keyword" style="overflow: visible !important; color: rgba(51, 51, 51, 1); font-weight: bold">var</span> journal = <span class="hljs-keyword" style="overflow: visible !important; color: rgba(51, 51, 51, 1); font-weight: bold">new</span> Vue({
el: <span class="hljs-string" style="overflow: visible !important; color: rgba(221, 17, 68, 1)">'#journal'</span>,
data: {
    message: <span class="hljs-string" style="overflow: visible !important; color: rgba(221, 17, 68, 1)">'Your first entry'</span>
}
});
</span><span class="hljs-tag" style="overflow: visible !important; color: rgba(0, 0, 128, 1); font-weight: normal">&lt;/<span class="hljs-name" style="overflow: visible !important; color: rgba(0, 0, 128, 1); font-weight: normal">script</span>&gt;</span>
</code></pre></div>
<div class="xiaoshujiang_element xsj_anchor">

</div>
<h2 class="xsj_heading_h2" style="margin: 1em 0 0.6em; font-family: inherit; font-weight: 500; line-height: 1.1; color: inherit; text-rendering: optimizelegibility; font-size: 3rem"><span class="xsj_heading_content">前后端分离</span></h2>
<ul style="padding: 0; margin: 0 0 10px 35px">
<li>Ajax -&gt; 前端应用兴起</li>
<li>智能手机 -&gt; 多终端支持</li>
</ul>
<p class="xsj_paragraph_level_0" style="line-height: 1.6; margin: 0 0 1.1em">这两个原因，导致前端开发方式发生根本的变化。前端不再是后端 MVC 中的 V，而是单独的一层。</p>
<div class="xiaoshujiang_element xsj_anchor">

</div>
<h2 class="xsj_heading_h2" style="margin: 1em 0 0.6em; font-family: inherit; font-weight: 500; line-height: 1.1; color: inherit; text-rendering: optimizelegibility; font-size: 3rem"><span class="xsj_heading_content">REST 接口</span></h2>
<p class="xsj_paragraph_level_0" style="line-height: 1.6; margin: 0 0 1.1em">表现层状态转换（英语：Representational State Transfer，缩写：REST）是Roy Thomas Fielding博士于2000年在他的博士论文中提出来的一种万维网软件架构风格，目的是便于不同软件/程序在网络（例如互联网）中互相传递信息。</p>
<p class="xsj_paragraph_level_0" style="line-height: 1.6; margin: 0 0 1.1em">前后端分离以后，它们之间通过接口通信。<br>
后端暴露出接口，前端消费后端提供的数据。<br>
后端接口一般是 REST 形式，前后端的通信协议一般是 HTTP。</p>
<div class="xiaoshujiang_code_container" style="margin: 1em 0; position: relative; padding-bottom: 2em"><pre style="word-wrap: break-word; tab-size: 4; white-space: pre-wrap; font-family: monospace; line-height: initial !important; margin: 0"><code data-info="" class="nohighlight hljs" style="background: rgba(248, 248, 248, 1); color: rgba(51, 51, 51, 1); border-radius: 4px; padding: 0.5em; border: 0; font-size: 90%; overflow: visible !important; display: block; overflow-x: auto">GET http://www.store.com/products// 列举所有商品

GET http://www.store.com/products/12345// 呈现某一件商品

POST http://www.store.com/orders// 下单购买
&lt;purchase-order&gt;
&lt;item&gt; ... &lt;/item&gt;
&lt;/purchase-order&gt;
</code></pre></div>
<div class="xiaoshujiang_element xsj_anchor">

</div>
<h2 class="xsj_heading_h2" style="margin: 1em 0 0.6em; font-family: inherit; font-weight: 500; line-height: 1.1; color: inherit; text-rendering: optimizelegibility; font-size: 3rem"><span class="xsj_heading_content">Node</span></h2>
<p class="xsj_paragraph_level_0" style="line-height: 1.6; margin: 0 0 1.1em">2009年，Node 项目诞生，它是服务器上的 JavaScript 运行环境。<code style="background-color: rgba(214, 219, 223, 0.28); color: rgba(44, 62, 80, 1); border-radius: 4px; padding: 2px 4px; border: 0; font-size: 90%">Node = JavaScript + 操作系统 API</code></p>
<p class="xsj_paragraph_level_0" style="line-height: 1.6; margin: 0 0 1.1em"></p><div class="story_image_container story_block_image" style="text-align: center"><div class="story_image" style="display: inline-block; position: relative; max-width: 100%"><img src="https://img2018.cnblogs.com/blog/1569431/201911/1569431-20191109005708579-313533952.png" alt="node" title="node" name="images/node-logo.png" data-src="./images/node-logo.png" style="vertical-align: middle; max-width: 100%; height: auto; border: 0; border-radius: 0.3125em; box-shadow: 0 2px 4px rgba(34, 36, 38, 0.12), 0 2px 10px rgba(34, 36, 38, 0.08)"><br><div class="story_image_caption " style="border-bottom: 1px solid rgba(217, 217, 217, 1); display: inline-block; color: rgba(153, 153, 153, 1); padding: 10px">node</div></div></div><p style="line-height: 1.6; margin: 0 0 1.1em"></p>
<p class="xsj_paragraph_level_0" style="line-height: 1.6; margin: 0 0 1.1em">Node 的意义:</p>
<ul style="padding: 0; margin: 0 0 10px 35px">
<li>JavaScript 成为服务器脚本语言，与 Python 和 Ruby 一样</li>
<li>JavaScript 成为唯一的浏览器和服务器都支持的语言</li>
<li>前端工程师可以编写后端程序了</li>
</ul>
<p class="xsj_paragraph_level_0" style="line-height: 1.6; margin: 0 0 1.1em">前端开发模式的根本改变:</p>
<ul style="padding: 0; margin: 0 0 10px 35px">
<li>Node 环境下开发</li>
<li>大量使用服务器端工具</li>
<li>引入持续集成等软件工程的标准流程</li>
<li>开发完成后，编译成浏览器可以运行的脚本，放上 CDN</li>
</ul>
<div class="xiaoshujiang_element xsj_anchor">

</div>
<h2 class="xsj_heading_h2" style="margin: 1em 0 0.6em; font-family: inherit; font-weight: 500; line-height: 1.1; color: inherit; text-rendering: optimizelegibility; font-size: 3rem"><span class="xsj_heading_content">全栈工程师</span></h2>
<p class="xsj_paragraph_level_0" style="line-height: 1.6; margin: 0 0 1.1em">前端工程师正在转变为全栈工程师</p>
<ul style="padding: 0; margin: 0 0 10px 35px">
<li>一个人负责开发前端和后端</li>
<li>从数据库到 UI 的所有开发</li>
</ul>
<div class="xiaoshujiang_element xsj_anchor">

</div>
<h2 class="xsj_heading_h2" style="margin: 1em 0 0.6em; font-family: inherit; font-weight: 500; line-height: 1.1; color: inherit; text-rendering: optimizelegibility; font-size: 3rem"><span class="xsj_heading_content">软件行业的发展动力</span></h2>
<p class="xsj_paragraph_level_0" style="line-height: 1.6; margin: 0 0 1.1em">历史演变：前后端不分 -&gt; 前后端分离 -&gt; 全栈工程师</p>
<p class="xsj_paragraph_level_0" style="line-height: 1.6; margin: 0 0 1.1em">动力：更加产业化、大规模地生产软件</p>
<ul style="padding: 0; margin: 0 0 10px 35px">
<li>效率更高</li>
<li>成本更低</li>
</ul>
<p class="xsj_paragraph_level_0" style="line-height: 1.6; margin: 0 0 1.1em">通用性好、能够快速产出的技术最终会赢，单个程序员的生产力要求越来越高。</p>
<div class="xiaoshujiang_element xsj_anchor">

</div>
<h2 class="xsj_heading_h2" style="margin: 1em 0 0.6em; font-family: inherit; font-weight: 500; line-height: 1.1; color: inherit; text-rendering: optimizelegibility; font-size: 3rem"><span class="xsj_heading_content">H5</span></h2>
<p class="xsj_paragraph_level_0" style="line-height: 1.6; margin: 0 0 1.1em">为什么 H5 技术会赢得移动端？</p>
<ul style="padding: 0; margin: 0 0 10px 35px">
<li>开发速度快：Native 需要重新编译才能看到结果，H5 是即时输出</li>
<li>开发成本低：Native 需要两个开发团队，H5 只要一个</li>
<li>快速发布：安卓 Native 新版本需要24小时，iOS 需要 3 ～ 4 天，H5 可以随时更新</li>
</ul>
<p class="xsj_paragraph_level_0" style="line-height: 1.6; margin: 0 0 1.1em">Hybrid App，Hybrid技术指的是利用Web开发技术，调用Native相关的API，实现移动与Web二者的有机结合。</p>
<div class="xiaoshujiang_element xsj_anchor">

</div>
<h2 class="xsj_heading_h2" style="margin: 1em 0 0.6em; font-family: inherit; font-weight: 500; line-height: 1.1; color: inherit; text-rendering: optimizelegibility; font-size: 3rem"><span class="xsj_heading_content">历史概览</span></h2>
<p class="xsj_paragraph_level_0" style="line-height: 1.6; margin: 0 0 1.1em">1991 年 HTML 诞生了<br>
1993 年 cookie 的诞生<br>
1998 年 ajax 的诞生<br>
2005 年 “web工程师” 的诞生<br>
2006 年 jQuery 的诞生<br>
2009 年 Node 的诞生<br>
2012 年 MVVM 的时代拉开序幕<br>
2014年 html5 css3 的诞生<br>
2015年6月，ECMAScript 6.0发布</p>
<p class="xsj_paragraph_level_0" style="line-height: 1.6; margin: 0 0 1.1em">参考资料：</p>
<ol style="padding: 0; margin: 0 0 10px 35px">
<li>前端和后端</li>
<li>MVC</li>
<li>Cookie</li>
<li>HTML</li>
<li>层叠样式表</li>
<li>JavaScript</li>
<li>Web_2.0</li>
<li>Backbone.js</li>
<li>MVVM</li>
<li>表现层状态转换</li>
<li>前端开发的历史和趋势</li>
<li>回顾前端历史，明晰前端未来</li>
</ol>
</div>
</div><br><br>
来源：https://www.cnblogs.com/dongqunren/p/11823993.html
頁: [1]
查看完整版本: 前端开发的历史.md