MVC는 애플리케이션을 데이터(모델), 프레젠테이션 계층(뷰), 사용자 상호 작용 계층의 세 부분으로 나누는 디자인 패턴입니다. 아래 사진과 함께 보면 세 사람의 관계를 더 잘 이해할 수 있습니다.
즉, 이벤트 발생은 프로세스입니다.
사용자가 애플리케이션과 상호작용합니다
컨트롤러의 이벤트 핸들러가 트리거됩니다
컨트롤러가 모델에 데이터를 요청하고, 뷰에 제공
뷰는 사용자에게 데이터를 표시합니다
모델: 애플리케이션의 모든 데이터 개체를 저장하는 데 사용됩니다. 모델은 뷰와 컨트롤러의 세부 사항을 알 필요가 없습니다. 모델은 데이터와 해당 데이터와 직접 관련된 논리만 포함하면 됩니다. 모델과 관련되지 않은 모든 이벤트 처리 코드, 뷰 템플릿 및 로직은 모델에서 격리되어야 합니다.
View: 뷰 레이어가 사용자에게 표시되고 사용자는 이와 상호 작용합니다. JavaScript 애플리케이션에서 뷰는 대부분 html, css 및 JavaScript 템플릿으로 구성됩니다. 뷰에는 템플릿의 간단한 조건문 이외의 논리가 포함되어서는 안 됩니다. 실제로 모델과 유사하게 뷰도 애플리케이션의 다른 부분과 분리되어야 합니다.
컨트롤러: 컨트롤러는 모델과 뷰 사이의 링크입니다. 컨트롤러는 뷰에서 이벤트와 입력을 받아 이를 처리하고 그에 따라 뷰를 업데이트합니다. 페이지가 로드되면 컨트롤러는 양식 제출 및 버튼 클릭 수신 대기와 같은 이벤트 리스너를 뷰에 추가합니다. 그런 다음 사용자가 애플리케이션과 상호 작용하면 컨트롤러의 이벤트 트리거가 작동하기 시작합니다.
예를 들어 초기 JavaScript 프레임워크 백본은 MVC 패턴을 채택했습니다.
위의 예는 너무 공허한 것 같습니다. 실제 사례를 살펴보겠습니다.
1. 사용자가 새 채팅 메시지를 제출합니다.
2. 컨트롤러의 이벤트 핸들러가 트리거됩니다.
3. 4. 그런 다음 컨트롤러는 뷰를 업데이트합니다
5. 사용자는 채팅 창에서 새로운 채팅 정보를 봅니다
실제 예를 들어 MVC를 더 깊이 이해하기 위해 코드를 사용합니다. MVC의
var Model = { create: function() { this.records = {} var object = Object.create(this) object.prototype = Object.create(this.prototype) return object } }
var Model = { /*---代码片段--*/ find: function () { return this.records[this.id] }, save: function () { this.records[this.id] = this } }
user = Model.create() user.id = 1 user.save() asset = Model.create() asset.id = 2 asset.save() Model.find(1) => {id:1}
var ToggleView = { init: function (view) { this.view = $(view) this.view.mouseover(this.toggleClass, true) this.view.mouseout(this.toggleClass, false) }, this.toggleClass: function () { this.view.toggleClass('over', e.data) } }
ex: .over {color: red} p{color: black} 这样控制器就和视图建立起了连接。在MVC中有一个特性就是一个控制器控制一个视图,随着项目体积的增大,就需要一个状态机用于管理这些控制器。先来创建一个状态机 var StateMachine = function() {} SateMachine.add = function (controller) { this.bind('change', function (e, current) { if (controller == current) { controller.activate() } else { controller.deactivate() } }) controller.active = function () { this.trigger('change', controller) } } // 创建两个控制器 var con1 = { activate: funtion() { $('#con1').addClass('active') }, deactivate: function () { $('#con1').removeClass('active') } } var con2 = { activate: funtion() { $('#con2').addClass('active') }, deactivate: function () { $('#con2').removeClass('active') } } // 创建状态机,添加状态 var sm = new StateMachine sm.add(con1) sm.add(con2) // 激活第一个状态 con1.active()
#con1, #con2 { display: none } #con2.active, #con2.active { display: block }
컨트롤러에 대한 내용은 여기까지입니다. MVC의 뷰(View) 부분을 살펴보겠습니다. 뷰
var views = document.getElementById('views')
views.innerHTML = '' // 요소가 지워졌습니다
var wapper = document.createElement('p')
wrapper.innerText = '뷰에 추가 '
views .appendChild(wrapper)
이렇게 하면 createElement로 요소를 생성한 후 HTML 페이지에 추가하는 작업이 완료됩니다.
str = '
title: 'ejs'
});
那么这个渲染后的结果就是
var addChange = function (ob) { ob.change = function (callback) { if (callback) { if (!this._change) this._change = {} this._change.push(callback) } else { if (!this._change) return for (var i = this._change.length - 1; i >= 0; i--) { this._change[i].apply(this) } } } }
我们来看看一个实际的例子
var addChange = function (ob) { ob.change = function (callback) { if (callback) { if (!this._change) this._change = {} this._change.push(callback) } else { if (!this._change) return for (var i = this._change.length - 1; i >= 0; i--) { this._change[i].apply(this) } } } } var object = {} object.name = 'Foo' addChange(object) object.change(function () { console.log('Changed!', this) // 更新视图的代码 }) obejct.change() object.name = 'Bar' object.change()
这样就实现了执行和触发change事件了。
我相信大家对MVC有了比较深刻的理解,下面来学习MVVM模式。
如今主流的web框架基本都采用的是MVVM模式,为什么放弃了MVC模式,转而投向了MVVM模式呢。在之前的MVC中我们提到一个控制器对应一个视图,控制器用状态机进行管理,这里就存在一个问题,如果项目足够大的时候,状态机的代码量就变得非常臃肿,难以维护。还有一个就是性能问题,在MVC中我们大量的操作了DOM,而大量操作DOM会让页面渲染性能降低,加载速度变慢,影响用户体验。最后就是当Model频繁变化的时候,开发者就主动更新View,那么数据的维护就变得困难。世界是懒人创造的,为了减小工作量,节约时间,一个更适合前端开发的架构模式就显得非常重要。这时候MVVM模式在前端中的应用就应运而生。
MVVM让用户界面和逻辑分离更加清晰。下面是MVVM的示意图,可以看到它由Model、ViewModel、View这三个部分组成。
下面分别来讲讲他们的作用
View是作为视图模板,用于定义结构、布局。它自己不处理数据,只是将ViewModel中的数据展现出来。此外为了和ViewModel产生关联,那么还需要做的就是数据绑定的声明,指令的声明,事件绑定的声明。这在当今流行的MVVM开发框架中体现的淋淋尽致。在示例图中,我们可以看到ViewModel和View之间是双向绑定,意思就是说ViewModel的变化能够反映到View中,View的变化也能够改变ViewModel的数据值。那如何实现双向绑定呢,例如有这个input元素:
<input type='text' yg-model='message'>
随着用户在Input中输入值的变化,在ViewModel中的message也会发生改变,这样就实现了View到ViewModel的单向数据绑定。下面是一些思路:
扫描看哪些节点有yg-xxx属性
自动给这些节点加上onchange这种事件
更新ViewModel中的数据,例如ViewModel.message = xx.innerText
那么ViewModel到View的绑定可以是下面例子:
<p yg-text='message'></p>
渲染后p中显示的值就是ViewModel中的message变量值。下面是一些思路:
首先注册ViewModel
扫描整个DOM Tree 看哪些节点有yg-xxx这中属性
记录这些被单向绑定的DOM节点和ViewModel之间的隐射关系
使用innerText,innerHTML = ViewModel.message进行赋值
ViewModel起着连接View和Model的作用,同时用于处理View中的逻辑。在MVC框架中,视图模型通过调用模型中的方法与模型进行交互,然而在MVVM中View和Model并没有直接的关系,在MVVM中,ViewModel从Model获取数据,然后应用到View中。相对MVC的众多的控制器,很明显这种模式更能够轻松管理数据,不至于这么混乱。还有的就是处理View中的事件,例如用户在点击某个按钮的时候,这个行动就会触发ViewModel的行为,进行相应的操作。行为就可能包括更改Model,重新渲染View。
Model 层,对应数据层的域模型,它主要做域模型的同步。通过 Ajax/fetch 等 API 完成客户端和服务端业务 Model 的同步。在层间关系里,它主要用于抽象出 ViewModel 中视图的 Model。
实现效果:
<p id="mvvm"> <input type="text" v-model="message"> <p>{{message}}</p> <button v-click='changeMessage'></button> </p> <script type=""> const vm = new MVVM({ el: '#mvvm', methods: { changeMessage: function () { this.message = 'message has change' } }, data: { message: 'this is old message' } }) </script>
这里为了简单,借鉴了Vue的一些方法
MVVM为我们省去了手动更新视图的步骤,一旦值发生变化,视图就重新渲染,那么就需要对数据的改变就行检测。例如有这么一个例子:
hero = { name: 'A' }
这时候但我们访问hero.name 的时候,就会打印出一些信息:
hero.name // I'm A
当我们对hero.name 进行更改的时候,也会打印出一些信息:
hero.name = 'B' // the name has change
这样我们是不是就实现了数据的观测了呢。
在Angular中实现数据的观测使用的是脏检查,就是在用户进行可能改变ViewModel的操作的时候,对比以前老的ViewModel然后做出改变。
而在Vue中,采取的是数据劫持,就是当数据获取或者设置的时候,会触发Object.defineProperty()。
这里我们采取的是Vue数据观测的方法,简单一些。下面是具体的代码
function observer (obj) { let keys = Object.keys(obj) if (typeof obj === 'object' && !Array.isArray(obj)) { keys.forEach(key => { defineReactive(obj, key, obj[key]) }) } } function defineReactive (obj, key, val) { observer(val) Object.defineProperty(obj, key, { enumerable: true, configurable: true, get: function () { console.log('I am A') return val }, set: function (newval) { console.log('the name has change') observer(val) val = newval } }) }
把hero带入observe方法中,结果正如先前预料的一样的结果。这样数据的检测也就实现了,然后在通知订阅者。如何通知订阅者呢,我们需要实现一个消息订阅器,维护一个数组用来收集订阅者,数据变动触发notify(),然后订阅者触发update()方法,改善后的代码长这样:
function defineReactive (obj) { dep = new Dep() Object.defineProperty(obj, key, { enumerable: true, configurable: true, get: function () { console.log('I am A') Dep.target || dep.depend() return val }, set: function (newval) { console.log('the name has change') dep.notify() observer(val) val = newval } }) } var Dep = function Dep () { this.subs = [] } Dep.prototype.notify = function(){ var subs = this.subs.slice() for (var i = 0, l = subs.length; i < l; i++) { subs[i].update() } } Dep.prototype.addSub = function(sub){ this.subs.push(sub) } Dep.prototype.depend = function(){ if (Dep.target) { Dep.target.addDep(this) } }
这跟Vue源码差不多,就完成了往订阅器里边添加订阅者,和通知订阅者。这里以前我看Vue源码的时候,困扰了很久的问题,就是在get方法中Dep是哪儿来的。这里说一下他是一个全局变量,添加target变量是用于向订阅器中添加订阅者。这里的订阅者是Wacther,Watcher就可以连接视图更新视图。下面是Watcher的一部分代码
Watcher.prototype.get = function(key){ Dep.target = this this.value = obj[key] // 触发get从而向订阅器中添加订阅者 Dep.target = null // 重置 };
在讲MVVM概念的时候,在View -> ViewModel的过程中有一个步骤就是在DOM tree中寻找哪个具有yg-xx的元素。这一节就是讲解析模板,让View和ViewModel连接起来。遍历DOM tree是非常消耗性能的,所以会先把节点el转换为文档碎片fragment进行解析编译操作。操作完成后,在将fragment添加到原来的真实DOM节点中。下面是它的代码
function Compile (el) { this.el = document.querySelector(el) this.fragment = this.init() this.compileElement() } Compile.prototype.init = function(){ var fragment = document.createDocumentFragment(), chid while (child.el.firstChild) { fragment.appendChild(child) } return fragment }; Compile.prototype.compileElement = function(){ fragment = this.fragment me = this var childNodes = el.childNodes [].slice.call(childNodes).forEach(function (node) { var text = node.textContent var reg = /\{\{(.*)\}\}/ // 获取{{}}中的值 if (reg.test(text)) { me.compileText(node, RegExp.$1) } if (node.childNodes && node.childNodes.length) { me.compileElement(node) } }) } Compile.prototype.compileText = function (node, vm, exp) { updateFn && updateFn(node, vm[exp]) new Watcher(vm, exp, function (value, oldValue) { // 一旦属性值有变化,就会收到通知执行此更新函数,更新视图 updateFn() && updateFn(node, val) }) } // 更新视图 function updateFn (node, value) { node.textContent = value }
这样编译fragment就成功了,并且ViewModel中值的改变就能够引起View层的改变。接下来是Watcher的实现,get方法已经讲了,我们来看看其他的方法。
Watcher是连接Observer和Compile之间的桥梁。可以看到在Observer中,往订阅器中添加了自己。dep.notice()发生的时候,调用了sub.update(),所以需要一个update()方法,值发生变化后,就能够触发Compile中的回调更新视图。下面是Watcher的具体实现
var Watcher = function Watcher (vm, exp, cb) { this.vm = vm this.cb = cb this.exp = exp // 触发getter,向订阅器中添加自己 this.value = this.get() } Watcher.prototype = { update: function () { this.run() }, addDep: function (dep) { dep.addSub(this) }, run: function () { var value = this.get() var oldVal = this.value if (value !== oldValue) { this.value = value this.cb.call(this.vm, value, oldValue) // 执行Compile中的回调 } }, get: function () { Dep.target = this value = this.vm[exp] // 触发getter Dep.target = null return value } }
在上面的代码中Watcher就起到了连接Observer和Compile的作用,值发生改变的时候通知Watcher,然后Watcher调用update方法,因为在Compile中定义的Watcher,所以值发生改变的时候,就会调用Watcher()中的回调,从而更新视图。最重要的部分也就完成了。在加一个MVVM的构造器就ok了。推荐一篇文章自己实现MVVM,这里边讲的更加详细。
相关推荐:
위 내용은 MVC 및 MVVM의 간단한 구현 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!