Web前端技术的发展，介绍MV*模式

Web前端技术的发展

早期的Web应用主要是静态页面的浏览（如新闻的浏览），这些静态页面使用HTML语言来编写（这是HTML5的前身）.1995年设计出JavaScript脚本语言，从而让前端网页具有了动态的效果（跑马灯、浮动广告等），以及与用户交互的能力（表单）。

然而随着网络的发展，很多线下业务开始向线上发展，基于Internet的Web应用也变得越来越复杂，用户访问的资源不仅仅局限与服务器硬盘存放的静态网页，更多的应用需要更具用户的请求动态生成页面信息，复杂一些的需要从数据库中查询数据，经过计算，生成一个页面返回给客户。1996年微软退出ASP技术，1997年Sun公司推出了JSP技术，1998年PHP正式发布，由此网页开启真正动态交互的阶段。这些服务器端的动态页面技术使得网页可以获取服务器的数据信息并保持更新，推动了搜索引擎和各种论坛的出现，万维网开始快速发展。服务器端网页动态交互功能的不断丰富，伴随的是后端逻辑复杂度的快速上升，代码越来越复杂。为了更好的管理后端逻辑，出现了大量后端的MVC框架。

动态页面实现了动态交互和数据即时存取，但由于动态页面时有后端技术驱动的，每次数据交互都需要刷新一次浏览器，频繁的页面刷新非常影响用户的体验，这个问题知道Google再2004年使用Ajax技术开发的Gmail和谷歌地图的发布，才得到解决。

Ajax改变了传统的用户请求-等待-响应这种Web交互模式，采用异步交互机制避免了用户对服务器响应的等待，提供了更好的用户体验。此外也改变了用户请求-服务器-页面刷新的用户体验方式，提供了页面局部刷新的实现机制。Ajax开启了Web2.0的时代。

由于Ajax的火热，带动了古老的技术CSS和JavaScript着两个被程序员瞧不起的技术。

Ajax的全程时Asynchronous JavaScript and XML，即异步JavaScript和XML。

Ajax并不是一种技术，它是多种技术的组合，包括

• 使用XHTML和CSS来呈现数据
• 使用DOM实现动态显示和交互
• 使用XML和XSLT实现数据交互和操作
• 使用XMLHttpRequest实现异步数据的发送与接收
• 使用JavaScript将XHTML、DOM、XML和XmLHttpRequest绑定

之后的一段时间，前端技术的发展主要几种如果简化页面的开发，如何实现富页面，相继涌现出很多前端框架和库，如jQuery、Dojo、ExtJS、ECharts等。直到HTML5的出现，打破这种格局，各大浏览器纷纷支持HTML5，前端能够实现的交互功能越来越多，相应的代码复杂度也快速提高，以至于用于后端的MV*框架开始出现再前端部分。

2010年10月出现Backbone开始，Knockout、Angular、Ember、React、Vue相继出现，这些框架的应用，使得网站从WebSite进化成Web App，开启了网站应用的SPA（Single Page Application）时代

SPA即单页应用程序，是指只有一个Web页面的应用。单页应用是加载单个HTML页面并在用户与应用程序交互时动态更新该页面的Web应用程序。浏览器一开始必须的HTML、CSS和JavaScript，所有的操作都在这个页面上完成，有JavaScript来控制交互和页面的局部刷新。

优点：

• 前后端分离-前端工作在浏览器端，后端工作在服务器端，使得前后端彻底分离开发，并行工作，对开发人员的技能要求也会变得更加单一。
• 良好的用户体验-不需要重新刷新页面
• 减轻服务器压力-服务器只需要提供数据
• 公用一套后端程序代码-不用修改后端程序代码就可以同时用于Web界面、手机、平板等多种客户端  （导致微服务架构的兴起）

缺点：

• 初次加载耗时较多---为实现单页Web应用功能及显示效果，需要在加载页面的时候JavaScript和CSS统一加载（部分也买你可以在需要的时候异步加载），因此第一次加载的时候会稍微慢一点。为了减少 加载时的数据流量，提高加载时间，必须对JavaScript及CSS代码进行合并压缩处理
• 前进、后退的问题---由于单页Web应用在一个页面中显示所有的内容，所以不能使用浏览器的前进、后退功能。如果要实现浏览器的前进后退功能，需要编写额外的代码手动实现
• SEO难度较高---由于所有的内容都在一个页面中动态替换显示，所以SEO上有着天然的弱势，如果你的站点对SEO很看重，且要用单页应用，那么可以编写一些静态页面给搜索引擎，或者通过服务器渲染技术来解决

2015年ES6发布，由于ES6语法支持的滞后，出现了Babel编译器，他可以将ES6编译成ES5

后续会介绍ES6

当前的前端技术已经形成了一个大的技术体系：

• 以Github为代表的代码管理仓库
• 以NPM和Yarn为代表的包管理工具
• ECMAScript6、TypeScript及Babel构成的脚本体系
• HTML5、CSS3和相应的处理技术
• 以React、vue、Angular为代表的前端框架
• 以Webpack为代表的打包工具
• 以Node.js为基础的Express和Koa后端框架

介绍MC*

MVC

MVC是Web开发中应用非常广泛的一种架构模式，之后又演变出MVP模式和MVVM模式。

在MVC架构中，一个应用被分为三个部分，即模型（Model）、视图（View）和控制器{Controller}。

MVP

MVP（Model-View-Presenter）是由经典的MVC模式演变而来，它们的基本思想有相同的地方：Presenter负责逻辑的处理，Model提供数据，View负责显示。

MVC和MVP最大的区别就是MVP中View并不直接使用Model，他们之间的通信时通过Presenter来进行的，所有的交互都发生在Presenter内部，而在MVC中View会直接从Model中读取数据而不是通过Controller。

MVVM

MVVM（Model-View-ViewModel）是一种软件架构模式，由微软WPF和Silverlight的架构师Ken Cooper和Teb Peters开发，是一种简化用户界面的时间驱动编程方式。

MVVM模式的核心数据驱动，即ViewModel，ViewModel是View和Model的关系映射。ViewModel是一个值转换器（Value Converter），负责转换Model中数据对象，使得数据变得更加易于管理和使用。在MVVM中View和Model是不可以直接进行通信的，他们之间存在着ViewModel这个中介充当观察者的角色。

MVVM模式最核心的特性就是数据双向绑定，当用户操作View，ViewModel感知变化，然后通知Model发生相应改变；反之Model发生了改变，ViewModel感知到变化通知View进行更新。ViewModel向上与视图层View进行双向数据绑定，向下与Model通过接口请求进行数据交互，起到承上启下的作用。

MVVM的核心理念是通过声明式的数据绑定来实现View的分离，完全解耦View。