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

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


文章目录

    • 前端发展
    • 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上供其他开发人员使用。目前已经是世界最大的包模块管理系统。

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

    前端小记录---浅谈前端发展与MVVM模式_第1张图片

  5. 前端技术的百花争鸣

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

    前端小记录---浅谈前端发展与MVVM模式_第2张图片


MVVM

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

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

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

前端小记录---浅谈前端发展与MVVM模式_第3张图片
mvc模式大致如上,画得有点紧凑,大家将就看一下。

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

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

一个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上。

前端小记录---浅谈前端发展与MVVM模式_第4张图片
实现这一模式的框架有vueaugular等等。不过后者比较重量级,但由于先发优势,所以市场占有率还是比较高的。前者vue相比与其它技术,属于后起之秀。但由于后劲十足,现在势头也很猛,成为前端三大框架之一。

杂记一下,感谢您的观看

你可能感兴趣的:(前端技术,web,vue,js,经验分享,恰饭)