前端历史

前端历史

我们都知道现在流行的框架：Vue.Js、AngularJs、ReactJs，已经逐渐应用到各个项目和实际应用中，它们都是MVVM数据驱动框架系列的一种。

在了解MVVM之前，我们先回顾一下前端发展的历史阶段，做到心中有数，才会更好理解。

从静态走向动态

​ 1994年可以看做前端历史的起点，这一年10月13日网景推出了第一版Navigator；这一年，Tim Berners-Lee创建了W3C；这一年，Tim的基友发布了CSS。还是这一年，为动态web网页设计的服务端脚本PHP诞生。

​ 在上个世纪的1989年，欧洲核子研究中心的物理学家Tim Berners-Lee发明了超文本标记语言（HyperText Markup Language），简称HTML，并在1993年成为互联网草案。从此，互联网开始迅速商业化，诞生了一大批商业网站。

最早的HTML页面是完全静态的网页，它们是预先编写好的存放在Web服务器上的html文件。

​ 浏览器请求某个URL时，Web服务器把对应的html文件扔给浏览器，就可以显示html文件的内容了。

​ 如果要针对不同的用户显示不同的页面，显然不可能给成千上万的用户准备好成千上万的不同的html文件，所以，服务器就需要针对不同的用户，动态生成不同的html文件。比如一个电商网站有一千种商品，哪怕页面布局一模一样，也必须写一千个单独的页面。早期网页形态低下的效率是无法仅仅通过提高网速解决的。

​ 由于种种局限性，出现了新的创建动态HTML的方式：ASP、JSP和PHP等——分别由微软、SUN和开源社区开发。

​ 1994年一个叫Rasmus Lerdorf的加拿大人为了维护个人网站而创建了PHP。PHP原意是Personal Home Page，宣传语是Hypertext Preprocessor（超文本处理者）。PHP实现了与数据库的交互以及用于生产动态页面的模板引擎，是Web领域中最主流的服务端语言。

​ 1995年网景推出了JavaScript，实现了客户端的计算任务（如表单验证）。

​ 1996年微软推出了iframe标签，实现了异步的局部加载。

​ 1999年W3C发布第四代HTML标准，同年微软推出用于异步数据传输的ActiveX，随即各大浏览器厂商模仿实现了XMLHttpRequest。这标识着Ajax的诞生，但是Ajax这个词是在六年后问世的，特别是在谷歌使用Ajax技术打造了Gmail和谷歌地图之后，Ajax获得了巨大的关注。Ajax是Web网页迈向Web应用的关键技术，它标识着Web2.0时代的到来。

​ 2006年，XMLHttpRequest被W3C正式纳入标准。

​ 至此，早期的Document终于进化为了Web page，上述三个局限都得到了妥善的解决。

从后端走向前端

​ 早期的网页开发是由后端主导的，前端能做的也就是操作一下DOM。2006年 John Resig发布了jQuery，jQuery主要用于操作DOM，其优雅的语法、符合直觉的事件驱动型的编程思维使其极易上手，因此很快风靡全球，大量基于jQuery的插件构成了一个庞大的生态系统，更加稳固了jQuery作为JS库一哥的地位。

​ jQuery最早的版本在这里：

​ http://genius.it/ejohn.org/files/jquery-original.html

​ 起初制约Web开发从后到前的因素很简单，就是前端很多事干不了或干不好，当时的浏览器性能弱，标准化程度低。特别是占据大量市场份额的IE，不仅ugly，并且buggy。

​ 于2008年问世的谷歌V8引擎改变了这一局面。现代浏览器的崛起终结了微软的垄断时代，前端的计算能力一下子变得过剩了。标准组织也非常配合的在2009年发布了第五代JavaScript，前端的装备得到了整体性的提高，前端界如同改革开放走进了一个令人目不暇接的新时代。

​ 2009年AngularJS诞生，随后被谷歌收购。2010年backbone.js诞生。2011年React和Ember诞生。2014年Vue.js诞生……前后端分离可谓大势所趋。

​ 后端只负责数据，前端负责其余工作，这种分工模式一定是更清晰也更高效的。随着基础设置的不断完善以及代码封装层级的不断提高，使得前端一个人能够完成的事越来越多，这是技术积累的必然结果。就好像今天高中生的知识水平，可能远远超过五百年前的科学家，今天要成为Web全栈工程师，门槛也只会越来越低。

​ 2014年，第五代HTML标准发布。H5是由浏览器厂商主导，与W3C合作制定的一整套Web应用规范，至今仍在不断补充新的草案。我们可以清晰的感受到这一系列规范背后隐含的领导者的勃勃雄心：占领所有屏幕。

从前端走向全端

​ 2009年Ryan Dahl发布了node，node是一个基于V8引擎的服务端JavaScript运行环境，类似于一个虚拟机，也就是说js在服务端语言中有了一席之地。如果说ajax是前端的第一次飞跃，那么node可算作前端的第二次飞跃。它意味着JavaScript走出了浏览器的藩篱，迈出了全端化的第一步。

​ 一种流行的组合就是利用Express和Mongo搭建服务端程序。

​ Web开疆拓土的步伐并不止于此。

​ 2007年第一代iphone发布，2008年第一台安卓手机发布。悄然间互联网进入了移动时代。移动端的发展进程和PC的历史如出一辙，一开始都是Native App的天下。但浏览器试图取代操作系统的篡位之心从未消减。相比原生应用，Web APP有太多好处：无须开发两套系统版本、无须安装、无须手动升级、无须审核……我认为最大的好处以及驱动软件形态转向的主要原因在于降低成本，记得13年的时候韩寒说做一个APP大概需要五十万，今天网上比较靠谱的分析评估半年时间从零做出一个稍微像样的APP至少100万，而开发Web App花的钱一定少得多。

​ 制约Web App的因素有很多，但我们可以看到Web App一直在不断修复缺陷、突破局限。你说网页有tab bar，好吧，给你个fullpage API，你说网页不能调取系统功能，好吧，Geolocation API、Vibration API、Luminosity API、Orientation API、Camera API……你说网页不像APP有图标，IOS早就支持在桌面上添加网页链接的快捷图标，还得是乔帮主远见；你说网页必须联网，现在离线的方案也很多啊；你说Web App性能差，这个……你说得对，也就是这个原因，Native App还能作为主流存在一段时间，可是如果Web App的性能逐渐赶上Native了呢？目前的Hybrid、nw.js、Electron、react native、weex等都可以看做Web App在性能方面向Native靠近的尝试。更何况半路又杀出个微信小程序。

阮一峰说：

---

JavaScript操作HTML

至于 js如何在浏览器执行，这又是另外一个资深课题了（前端真的是只是庞杂），这里我们不做研究，有兴趣的可以自己去搜资料。我们只需要知道浏览器就是也JS执行容器，执行完之后，通过页面显示结果就行了，就像java需要编译器一样原理。

用JavaScript在浏览器中操作HTML，也经历了若干发展阶段： 我们利用【小北最帅】这个案例来展示

【第一阶段】

是JS原生通过浏览器解析机制，它的原理是使用浏览器提供的原生API 结合JS语法，可以直接操作DOM，如：

HTML:

<div id="name" style="color:#fff">前端你别闹</div> 
<div id="age">3</div>

JavaScript:

// JavaScriptvar 
var dom1 = document.getElementById('name');
var dom2 = document.getElementById('age');
dom1.innerHTML = '小北';
dom2.innerHTML = '666';
dom1.style.color = '#000000';  // css样式也可以操作

结果变成：

<div id="name" style="color:#000000">小北</div> <div id="age">666</div>

---

【第二阶段】

我用一个字总结 就是懒，就是我们上一篇说的jQuery时代，由于原生API晦涩难懂，语法很长不好用，最重要的是要考虑各种浏览器兼容性，因为他们的解析标准都不一样，造成了，写一段效果代码要写很多的兼容语法，令人沮丧，所以jQuery的出现，迅速占领了世界。

上边的例子用 jQuery 是这样的

HTML:

<div id="name" style="color:#fff">前端你别闹</div>
<div id="age">3</div>

JavaScript:

// jQuery 一句话就行
$('#name').text('小北好帅').css('color', '#000000'); 
$('#age').text('666').css('color', '#fff');

结果变成：

<div id="name" style="color:#000000">小北好帅</div>
<div id="age" style="color:#fff">666</div>

---

【第三阶段】

MVC模式，需要服务器端配合，JavaScript可以在前端修改服务器渲染后的数据。

一句话就是所有通信都是单向的： 也就是前期我们最常用的状态，提交一次反馈一次，通信一次相互制约。

比如：提交表单 填写内容 → 点击提交 →业务逻辑处理 →存入数据库 → 刷新页面→服务器取数据库数据→渲染到客户端页面→ 展示上一次你提交的内容

视图（View）：用户界面。
控制器（Controller）：业务逻辑
模型（Model）：数据保存

各部分之间的通信方式如下。

View 传送指令到 Controller

Controller 完成业务逻辑后，要求 Model 改变状态

Model 将新的数据发送到 View，用户得到反馈

这个模式缺点是什么呢？

缺点一：它必须等待服务器端的指示，而且如果是异步模式的话，所有html节点、数据、页面结构都是后端请求过来。

浏览器只作为一个解析显示容器，Model 作用几乎是废x，Model 层面做的很少几乎前端无法控制，你前端几乎是切图仔和做轮播图的工作

缺点二：因为你前端渲染的页面结构，几乎是后端服务器包扎一堆数据一起发送过来，前端的你只需要用拼接字符串 或者字符串拼接引擎

比如Mustache、Jade、artTemplate、tmpl、kissyTemplate、ejs等来做事，说白了纯苦力和重复工作居多，这也导致了，如果很多人认为前端并不重要，只负责美工 和 动作体验就好了。

缺点三：一发而动全身。数据、显示不分离！为什么这么说，因为如果业务逻辑要变，比如很简单的需求，你用jsp或者php 拼接出来的ajax数据页面，年龄这个字段我不需要了，把性别字段 区分开，男的单独显示，女的单独显示，以前是一起显示到一个表的

那么，后端先要sql查询把 男、女数据分开，然后渲染字符串时候把 年龄 这个字段去除，然后把男女分开成2个table，然后再推送给前端接收。

前端收到了，然后从新在渲染一遍，在加工一次页面甚至是展示动作效果

---

MVVM框架模式

终于来到【第四阶段】，为什么在MVC模式我说这么多废话呢，因为你了解了MVC才能更清楚的知道

「 何为mvvm模式 」

MVVM最早由微软提出来，它借鉴了桌面应用程序的MVC思想，在前端页面中，把Model用纯JavaScript对象表示，View负责显示，两者做到了最大限度的分离。也就是我们常说的，前后分离，真正在这里得以实现

它采用双向绑定（data-binding）：View的变动，自动反映在 ViewModel，反之亦然,model数据的变动，也自动展示给页面显示

把Model和View关联起来的就是ViewModel。ViewModel负责把Model的数据同步到View显示出来，还负责把View的修改同步回Model。

可能理论知识枯燥无味，那么我们还是实战派，来看代码不就好了吗？
还是刚才的 【小北最帅】案例

js和jQuery的写法 大家也看到了，那么我们来MVVM 数据绑定怎么实现。

由于数据驱动模式的精髓在于【数据】和【视图】分离，所以我们首先并不关心DOM结构，而是关心数据的展现。

最简单的数据存储方式是什么呢？显然不是mysql、数据库而是使用JavaScript对象

jquery:

// jQuery 一句话就行
$('#name').text('小北好帅').css('color', '#000000'); 
$('#age').text('666').css('color', '#fff');

JavaScript:

// 原始数据
var xiaobei = {name: '前端你别闹', age: 3, tag：'干货'};

结果是：

name: 前端你别闹
age: 3
tag: 干货

假设：
我们把变量xiaobei 看作Model数据，把HTML某些DOM节点看作View，并意淫它们已经通过某种手段被关联起来了。

下面我们把name 从[ 前端你别闹] 改为 [小北]，把显示的age从 [3] 改为 [666]，tag变成 [最帅！]
按照以前我们肯定操作DOM节点，而现在我们只需要修改JavaScript对象：

JavaScript:

// 改变的数据
var xiaobei = {name: '小北',age: 666, tag：'最帅'};

结果是：

name: 小北
age: 666
tag: 最帅

改变JavaScript对象的内容，就会导致DOM结构作出对应的变化！
这让我们的关注点从如何操作DOM变成了如何改变JavaScript对象的状态，而操作JavaScript对象比获取和操作DOM简单了一个地球的距离！

这也是MVVM的核心思想：关注Model的变化，让MVVM框架利用自己的机制去自动更新DOM，从而把开发者从操作DOM的繁琐中解脱出来！

也就是所谓的 数据 - 视图分离，数据驱动视图， 视图不影响数据，再也不用管繁琐的DOM结构操作了，世界顿时清净，完美！

常见的MVVM框架：Vue.JS、AngularJs、reactJs 等我们在下一篇讨论

参考：

Jack肖解读 Web 实时化https://blog.wilddog.com/?p=1772

玉伯：Web 开发模式演变历史和趋势http://www.cnblogs.com/lhb25/p/web-development-mode-evolve.html

Web开发的发展史http://blog.jobbole.com/45169/