前端小记录---浅谈前端发展与MVVM模式

最近在准备毕业设计的内容，因为本人是一名Java后端方向的学生，关于前端数据处理与样式方面无从下手，所以上网找资料学习了下前端。话不多说，这篇博客简单记录一下前端的发展史与我本人理解的MVVM模式。

---

前端发展

先聊一下前端的发展历程

1. 静态页面

   这个过程大家都懂，最初的网页以HTML为主，纯静态的网页。这种类型的网页，浏览器是不能提交信息给服务器，只能从服务器中获取数据。开发人员也只关心页面样式和内容即可。

2. javascript的问世

   1995年，网景工程师Brendan Eich 花了10天时间设计了JavaScript语言。（好像挺多计算机语言只用了很短的时间就出来了…）

   随着JavaScript的诞生，我们可以操作页面的DOM元素及样式，页面有了一些动态的效果，但是依然是以静态为主。

   因为此时还没有和服务器端进行数据互动，直到ajax的盛行。

3. ajax的盛行

   2005年开始，ajax逐渐被前端开发人员所重视，因为不用刷新页面就可以更新页面的数据和渲染效果。

   此时的开发人员不仅仅要编写HTML样式，还要懂ajax与后端交互，然后通过JS操作Dom元素来实现页面动态效果。比较流行的框架如Jquery就是典型代表。

4. node.js降临

   2008年，google的Chrome发布，随后就以极快的速度占领市场，超过IE成为浏览器市场的主导者。

   次年，Ryan Dahl在谷歌的Chrome V8引擎基础上，打造了基于事件循环的异步IO框架：Node.js。

   这里解释一下什么是基于事件。我们平时在网页中点击一个按钮，填写表单，刷新页面，所做的操作都是一个事件。而这些事件都会实时的影响服务器端的数据。也就是说，我们可以使用Node.js来作为后端开发语言，前端页面发生一个事件时，Node.js会实时的操作数据库，并响应给用户。

   Node.js的一些特点:

   • 基于事件循环的异步IO
   • 单线程运行，避免多线程的变量同步问题
   • JS可以编写后台代码，前后台统一编程语言

   node.js的伟大之处不在于让JS迈向了后端开发，而是构建了一个庞大的生态系统。

   2010年，NPM作为node.js的包管理系统首次发布，开发人员可以遵循Common.js规范来编写Node.js模块，然后发布到NPM上供其他开发人员使用。目前已经是世界最大的包模块管理系统。

   我们自己写好一些插件之后，可以在上面发行，这也是上文提到的生态系统。社区活跃度杠杠滴。

   

5. 前端技术的百花争鸣

   随后在Node的基础上，出现了一大批前端的优秀框架：

   

---

MVVM

写了这么久，终于到主角了。MVVM模式。

从上面的图片可以看到，此时出现一大批前端框架，它们架构都是MVVM、MVC、MVP等等。本质都可以归为MVC模式的分支。

不仅仅在后端开发有这概念，前端开发也是如此：

mvc模式大致如上，画得有点紧凑，大家将就看一下。

首先浏览器发送请求进来，进到controller，这是一个总的控制器，它会交给model处理。model处理完之后把结果返回给controller。controller收到后会把处理结果交给view进行视图渲染，渲染完成后会把渲染结果返回给controller。最后再返回给浏览器。

而MVVM模式与上面架构不同的是那个VM代表的是view与model的映射关系。

一个model对应一个view。你用了这个model，那渲染时就会用到对应的view。所以本质上和mvc模式还是一样的。但是还有个很大的区别，这个时候开发人员已经不需要去干涉view与model的映射了。

怎么讲呢？在MVVM之前，开发人员从后端获取需要的数据模型，然后要通过DOM操作Model渲染到View中。而后当用户操作视图，我们还需要通过DOM获取View中的数据，然后同步到Model中。

而MVVM中的VM要做的事情就是把DOM操作完全封装起来，开发人员不用再关心Model和View之间是如何互相影响的。

举个例子，用户填写了一个表单,以往前端开发人员需要去获取表单项(document.getElementById)，并整合表单项与通过ajax之类的异步请求将数据发送到后端。这里获取表单项的操作代表我们需要去关注view，整合表单项与发送数据至后端代表我们要去关注model。

而现在我们无须处理这种繁琐的操作。用户填写完表单(view)后，实现MVVM模式的框架会自动帮我们同步至model。反过来也一样，当model更新时，view也会自动更新。

把开发人员从繁琐的DOM操作中解放出来，把关注点放在如何操作Model上。

实现这一模式的框架有vue、augular等等。不过后者比较重量级，但由于先发优势，所以市场占有率还是比较高的。前者vue相比与其它技术，属于后起之秀。但由于后劲十足，现在势头也很猛，成为前端三大框架之一。

杂记一下，感谢您的观看🙏