首页

Javascript

Html
Css
Node.js
Electron
移动开发
小程序
工具类
服务端
浏览器相关
前端收藏
其他
关于

前端MVC、MVVM的简单实现

2019年10月20日 转载自 jianshu 阅读(124)

MVC

MVC是一种设计模式,它将应用划分为3个部分:数据(模型)、展示层(视图)和用户交互层。结合一下下图,更能理解三者之间的关系。

image

换句话说,一个事件的发生是这样的过程

  1. 用户和应用交互
  2. 控制器的事件处理器被触发
  3. 控制器从模型中请求数据,并将其交给视图
  4. 视图将数据呈现给用户

模型:用来存放应用的所有数据对象。模型不必知晓视图和控制器的细节,模型只需包含数据及直接和这些数据相关的逻辑。任何事件处理代码、视图模版,以及那些和模型无关的逻辑都应当隔离在模型之外。
视图:视图层是呈现给用户的,用户与之产生交互。在javaScript应用中,视图大都是由html、css和JavaScript模版组成的。除了模版中简单的条件语句之外,视图不应当包含任何其他逻辑。事实上和模型类似,视图也应该从应用的其他部分中解耦出来
控制器:控制器是模型和视图的纽带。控制器从视图获得事件和输入,对它们进行处理,并相应地更新视图。当页面加载时,控制器会给视图添加事件监听,比如监听表单提交和按钮单击。然后当用户和应用产生交互时,控制器中的事件触发器就开始工作。
例如JavaScript框架早期框架backbone就是采用的MVC模式。

上面的例子似乎太过空洞,下面讲一个生活中的例子进行讲解:
1、用户提交一个新的聊天信息
2、控制器的事件处理器被触发
3、控制器创建了一个新的聊天模型
4、然后控制器更新视图
5、用户在聊天窗口看到新的聊天信息
讲了一个生活的例子,我们用代码的方式更加深入了解MVC。

Model

MVC中M表示model,与数据操作和行为相关的逻辑都应当放入模型中。例如我们创建一个Model对象,所有数据的操作都应该都放在这个命名空间中。下面是一些简化的代码,首先创建新模型和实例

  1. var Model = {
  2. create: function() {
  3. this.records = {}
  4. var object = Object.create(this)
  5. object.prototype = Object.create(this.prototype)
  6. return object
  7. }
  8. }

create用于创建一个以Model为原型的对象,然后就是一些包括数据操作的一些函数包括查找,存储

  1. var Model = {
  2. /*---代码片段--*/
  3. find: function () {
  4. return this.records[this.id]
  5. },
  6. save: function () {
  7. this.records[this.id] = this
  8. }
  9. }

下面我们就可以使用这个Model了:

  1. user = Model.create()
  2. user.id = 1
  3. user.save()
  4. asset = Model.create()
  5. asset.id = 2
  6. asset.save()
  7. Model.find(1)
  8. => {id:1}

可以看到我们就已经查找到了这个对象。模型也就是数据的部分我们也就完成了。

Control

下面来讲讲mvc中的控制器。当加载页面的时候,控制器将事件处理程序绑定在视图中,并适时地处理回调,以及和模型必要的对接。下面是控制器的简单例子:

  1. var ToggleView = {
  2. init: function (view) {
  3. this.view = $(view)
  4. this.view.mouseover(this.toggleClass, true)
  5. this.view.mouseout(this.toggleClass, false)
  6. },
  7. this.toggleClass: function () {
  8. this.view.toggleClass('over', e.data)
  9. }
  10. }

这样我们就实现了对一个视图的简单控制,鼠标移入元素添加over class,移除就移除over class。然后在添加一些简单的样式例如

  1. ex:
  2. .over {color: red}
  3. p{color: black}
  4. 这样控制器就和视图建立起了连接。在MVC中有一个特性就是一个控制器控制一个视图,随着项目体积的增大,就需要一个状态机用于管理这些控制器。先来创建一个状态机
  5. var StateMachine = function() {}
  6. SateMachine.add = function (controller) {
  7. this.bind('change', function (e, current) {
  8. if (controller == current) {
  9. controller.activate()
  10. } else {
  11. controller.deactivate()
  12. }
  13. })
  14. controller.active = function () {
  15. this.trigger('change', controller)
  16. }
  17. }
  18. // 创建两个控制器
  19. var con1 = {
  20. activate: funtion() {
  21. $('#con1').addClass('active')
  22. },
  23. deactivate: function () {
  24. $('#con1').removeClass('active')
  25. }
  26. }
  27. var con2 = {
  28. activate: funtion() {
  29. $('#con2').addClass('active')
  30. },
  31. deactivate: function () {
  32. $('#con2').removeClass('active')
  33. }
  34. }
  35. // 创建状态机,添加状态
  36. var sm = new StateMachine
  37. sm.add(con1)
  38. sm.add(con2)
  39. // 激活第一个状态
  40. con1.active()

这样就实现了简单的控制器管理,最后我们在添加一些css样式。

  1. #con1, #con2 { display: none }
  2. #con2.active, #con2.active { display: block }

当con1激活的时候样式就发生了变化,也就是视图发生了变化。
控制器也就讲到了这里,下面来看看MVC中的View部分,也就是视图

View

视图是应用的接口,它为用户提供视觉呈现并与用户产生交互。在javaScript种,视图是无逻辑的HTML片段,又应用的控制器来管理,视图处理事件回调以及内嵌数据。简单来说就是在javaScript中写HTML代码,然后将HTML片段插入到HTML页面中,这里讲两种方法:

动态渲染视图

使用document.createElement创建DOM元素,设置他们的内容然后追加到页面中,例如
var views = documents.getElementById(‘views’)
views.innerHTML = ‘’ // 元素清空
var wapper = document.createElement(‘p’)
wrapper.innerText = ‘add to views’
views.appendChild(wrapper)
这样就完成了用createElement创建元素,然后添加到HTML页面中。

模板

如果以前有过后端开发经验,那么对模版应该比较熟悉。例如在nodejs中常用的就是ejs,下面是ejs的一个小例子,可以看到的是ejs将javascript直接渲染为HTML

  1. str = '<h1><%= title %></h1>'
  2. ejs.render(str, {
  3. title: 'ejs'
  4. });

那么这个渲染后的结果就是

ejs


当然实际中ejs的功能更强大,我们甚至可以在其中加入函数,模板语言是不是觉得跟vue,React的书写方式特别像,我也觉得像。那么view的作用就显而易见了,就是将HTML和javaScript连接起来。剩下一个问题就是在mvc原理图我们看到了视图和模型之间的关系,当模型更改的时候,视图也会跟着更新。那么视图和模型就需要进行绑定,它意味着当记录发生改变时,你的控制器不需要处理视图的更新,因为这些更新是在后台自动完成的。为了将javaScript对象和视图绑定在一起,我们需要设置一个回调函数,当对象的属性发生改变时发送一个更新视图的通知。下面是值发生变化的时候调用的回调函数,当然现在我们可以使用更简单的set,get进行数据的监听,这在我们后面的MVVM将会讲到。

  1. var addChange = function (ob) {
  2. ob.change = function (callback) {
  3. if (callback) {
  4. if (!this._change) this._change = {}
  5. this._change.push(callback)
  6. } else {
  7. if (!this._change) return
  8. for (var i = this._change.length - 1; i >= 0; i--) {
  9. this._change[i].apply(this)
  10. }
  11. }
  12. }
  13. }

我们来看看一个实际的例子

  1. var addChange = function (ob) {
  2. ob.change = function (callback) {
  3. if (callback) {
  4. if (!this._change) this._change = {}
  5. this._change.push(callback)
  6. } else {
  7. if (!this._change) return
  8. for (var i = this._change.length - 1; i >= 0; i--) {
  9. this._change[i].apply(this)
  10. }
  11. }
  12. }
  13. }
  14. var object = {}
  15. object.name = 'Foo'
  16. addChange(object)
  17. object.change(function () {
  18. console.log('Changed!', this)
  19. // 更新视图的代码
  20. })
  21. obejct.change()
  22. object.name = 'Bar'
  23. object.change()

这样就实现了执行和触发change事件了。
我相信大家对MVC有了比较深刻的理解,下面来学习MVVM模式。

MVVM

如今主流的web框架基本都采用的是MVVM模式,为什么放弃了MVC模式,转而投向了MVVM模式呢。在之前的MVC中我们提到一个控制器对应一个视图,控制器用状态机进行管理,这里就存在一个问题,如果项目足够大的时候,状态机的代码量就变得非常臃肿,难以维护。还有一个就是性能问题,在MVC中我们大量的操作了DOM,而大量操作DOM会让页面渲染性能降低,加载速度变慢,影响用户体验。最后就是当Model频繁变化的时候,开发者就主动更新View,那么数据的维护就变得困难。世界是懒人创造的,为了减小工作量,节约时间,一个更适合前端开发的架构模式就显得非常重要。这时候MVVM模式在前端中的应用就应运而生。
MVVM让用户界面和逻辑分离更加清晰。下面是MVVM的示意图,可以看到它由Model、ViewModel、View这三个部分组成。

image

下面分别来讲讲他们的作用

View

View是作为视图模板,用于定义结构、布局。它自己不处理数据,只是将ViewModel中的数据展现出来。此外为了和ViewModel产生关联,那么还需要做的就是数据绑定的声明,指令的声明,事件绑定的声明。这在当今流行的MVVM开发框架中体现的淋淋尽致。在示例图中,我们可以看到ViewModel和View之间是双向绑定,意思就是说ViewModel的变化能够反映到View中,View的变化也能够改变ViewModel的数据值。那如何实现双向绑定呢,例如有这个input元素:

  1. <input type='text' yg-model='message'>

随着用户在Input中输入值的变化,在ViewModel中的message也会发生改变,这样就实现了View到ViewModel的单向数据绑定。下面是一些思路:

  1. 扫描看哪些节点有yg-xxx属性
  2. 自动给这些节点加上onchange这种事件
  3. 更新ViewModel中的数据,例如ViewModel.message = xx.innerText

那么ViewModel到View的绑定可以是下面例子:

  1. <p yg-text='message'></p>

渲染后p中显示的值就是ViewModel中的message变量值。下面是一些思路:

  1. 首先注册ViewModel
  2. 扫描整个DOM Tree 看哪些节点有yg-xxx这中属性
  3. 记录这些被单向绑定的DOM节点和ViewModel之间的隐射关系
  4. 使用innerText,innerHTML = ViewModel.message进行赋值

ViewModel

ViewModel起着连接View和Model的作用,同时用于处理View中的逻辑。在MVC框架中,视图模型通过调用模型中的方法与模型进行交互,然而在MVVM中View和Model并没有直接的关系,在MVVM中,ViewModel从Model获取数据,然后应用到View中。相对MVC的众多的控制器,很明显这种模式更能够轻松管理数据,不至于这么混乱。还有的就是处理View中的事件,例如用户在点击某个按钮的时候,这个行动就会触发ViewModel的行为,进行相应的操作。行为就可能包括更改Model,重新渲染View。

Model

Model 层,对应数据层的域模型,它主要做域模型的同步。通过 Ajax/fetch 等 API 完成客户端和服务端业务 Model 的同步。在层间关系里,它主要用于抽象出 ViewModel 中视图的 Model。

MVVM简单实现

实现效果:

  1. <div id="mvvm">
  2. <input type="text" v-model="message">
  3. <p>{{message}}</p>
  4. <button v-click='changeMessage'></button>
  5. </div>
  6. <script type="">
  7. const vm = new MVVM({
  8. el: '#mvvm',
  9. methods: {
  10. changeMessage: function () {
  11. this.message = 'message has change'
  12. }
  13. },
  14. data: {
  15. message: 'this is old message'
  16. }
  17. })
  18. </script>

这里为了简单,借鉴了Vue的一些方法

Observer

MVVM为我们省去了手动更新视图的步骤,一旦值发生变化,视图就重新渲染,那么就需要对数据的改变就行检测。例如有这么一个例子:

  1. hero = {
  2. name: 'A'
  3. }

这时候但我们访问hero.name 的时候,就会打印出一些信息:

  1. hero.name
  2. // I'm A

当我们对hero.name 进行更改的时候,也会打印出一些信息:

  1. hero.name = 'B'
  2. // the name has change

这样我们是不是就实现了数据的观测了呢。
在Angular中实现数据的观测使用的是脏检查,就是在用户进行可能改变ViewModel的操作的时候,对比以前老的ViewModel然后做出改变。
而在Vue中,采取的是数据劫持,就是当数据获取或者设置的时候,会触发Object.defineProperty()。
这里我们采取的是Vue数据观测的方法,简单一些。下面是具体的代码

  1. function observer (obj) {
  2. let keys = Object.keys(obj)
  3. if (typeof obj === 'object' && !Array.isArray(obj)) {
  4. keys.forEach(key => {
  5. defineReactive(obj, key, obj[key])
  6. })
  7. }
  8. }
  9. function defineReactive (obj, key, val) {
  10. observer(val)
  11. Object.defineProperty(obj, key, {
  12. enumerable: true,
  13. configurable: true,
  14. get: function () {
  15. console.log('I am A')
  16. return val
  17. },
  18. set: function (newval) {
  19. console.log('the name has change')
  20. observer(val)
  21. val = newval
  22. }
  23. })
  24. }

把hero带入observe方法中,结果正如先前预料的一样的结果。这样数据的检测也就实现了,然后在通知订阅者。如何通知订阅者呢,我们需要实现一个消息订阅器,维护一个数组用来收集订阅者,数据变动触发notify(),然后订阅者触发update()方法,改善后的代码长这样:

  1. function defineReactive (obj) {
  2. dep = new Dep()
  3. Object.defineProperty(obj, key, {
  4. enumerable: true,
  5. configurable: true,
  6. get: function () {
  7. console.log('I am A')
  8. Dep.target || dep.depend()
  9. return val
  10. },
  11. set: function (newval) {
  12. console.log('the name has change')
  13. dep.notify()
  14. observer(val)
  15. val = newval
  16. }
  17. })
  18. }
  19. var Dep = function Dep () {
  20. this.subs = []
  21. }
  22. Dep.prototype.notify = function(){
  23. var subs = this.subs.slice()
  24. for (var i = 0, l = subs.length; i < l; i++) {
  25. subs[i].update()
  26. }
  27. }
  28. Dep.prototype.addSub = function(sub){
  29. this.subs.push(sub)
  30. }
  31. Dep.prototype.depend = function(){
  32. if (Dep.target) {
  33. Dep.target.addDep(this)
  34. }
  35. }

这跟Vue源码差不多,就完成了往订阅器里边添加订阅者,和通知订阅者。这里以前我看Vue源码的时候,困扰了很久的问题,就是在get方法中Dep是哪儿来的。这里说一下他是一个全局变量,添加target变量是用于向订阅器中添加订阅者。这里的订阅者是Wacther,Watcher就可以连接视图更新视图。下面是Watcher的一部分代码

  1. Watcher.prototype.get = function(key){
  2. Dep.target = this
  3. this.value = obj[key] // 触发get从而向订阅器中添加订阅者
  4. Dep.target = null // 重置
  5. };

Compile

在讲MVVM概念的时候,在View -> ViewModel的过程中有一个步骤就是在DOM tree中寻找哪个具有yg-xx的元素。这一节就是讲解析模板,让View和ViewModel连接起来。遍历DOM tree是非常消耗性能的,所以会先把节点el转换为文档碎片fragment进行解析编译操作。操作完成后,在将fragment添加到原来的真实DOM节点中。下面是它的代码

  1. function Compile (el) {
  2. this.el = document.querySelector(el)
  3. this.fragment = this.init()
  4. this.compileElement()
  5. }
  6. Compile.prototype.init = function(){
  7. var fragment = document.createDocumentFragment(), chid
  8. while (child.el.firstChild) {
  9. fragment.appendChild(child)
  10. }
  11. return fragment
  12. };
  13. Compile.prototype.compileElement = function(){
  14. fragment = this.fragment
  15. me = this
  16. var childNodes = el.childNodes
  17. [].slice.call(childNodes).forEach(function (node) {
  18. var text = node.textContent
  19. var reg = /\{\{(.*)\}\}/ // 获取{{}}中的值
  20. if (reg.test(text)) {
  21. me.compileText(node, RegExp.$1)
  22. }
  23. if (node.childNodes && node.childNodes.length) {
  24. me.compileElement(node)
  25. }
  26. })
  27. }
  28. Compile.prototype.compileText = function (node, vm, exp) {
  29. updateFn && updateFn(node, vm[exp])
  30. new Watcher(vm, exp, function (value, oldValue) {
  31. // 一旦属性值有变化,就会收到通知执行此更新函数,更新视图
  32. updateFn() && updateFn(node, val)
  33. })
  34. }
  35. // 更新视图
  36. function updateFn (node, value) {
  37. node.textContent = value
  38. }

这样编译fragment就成功了,并且ViewModel中值的改变就能够引起View层的改变。接下来是Watcher的实现,get方法已经讲了,我们来看看其他的方法。

Watcher

Watcher是连接Observer和Compile之间的桥梁。可以看到在Observer中,往订阅器中添加了自己。dep.notice()发生的时候,调用了sub.update(),所以需要一个update()方法,值发生变化后,就能够触发Compile中的回调更新视图。下面是Watcher的具体实现

  1. var Watcher = function Watcher (vm, exp, cb) {
  2. this.vm = vm
  3. this.cb = cb
  4. this.exp = exp
  5. // 触发getter,向订阅器中添加自己
  6. this.value = this.get()
  7. }
  8. Watcher.prototype = {
  9. update: function () {
  10. this.run()
  11. },
  12. addDep: function (dep) {
  13. dep.addSub(this)
  14. },
  15. run: function () {
  16. var value = this.get()
  17. var oldVal = this.value
  18. if (value !== oldValue) {
  19. this.value = value
  20. this.cb.call(this.vm, value, oldValue) // 执行Compile中的回调
  21. }
  22. },
  23. get: function () {
  24. Dep.target = this
  25. value = this.vm[exp] // 触发getter
  26. Dep.target = null
  27. return value
  28. }
  29. }

在上面的代码中Watcher就起到了连接Observer和Compile的作用,值发生改变的时候通知Watcher,然后Watcher调用update方法,因为在Compile中定义的Watcher,所以值发生改变的时候,就会调用Watcher()中的回调,从而更新视图。最重要的部分也就完成了。在加一个MVVM的构造器就ok了。推荐一篇文章自己实现MVVM,这里边讲的更加详细。

总结

ok,本篇文章就结束了,通过对比希望读者能够对前端当前框架能够更清晰的认识。谢谢大家

© 本文著作权归原作者所有 来源:jianshu 阅读原文

评论

  •