MVC
MVC是三个字母的缩写,分别是Model
(模型)、View
(视图)和Controller
(控制)
这个模式认为,程序不论简单或复杂,从结构上看,都可以分成三类对象。
所有的页面都可以使用MVC来优化代码结构.
Model
模型model用于封装与应用程序的业务逻辑相关的数据以及对数据的处理方法,会有一个或多个视图监听此模型。一旦模型的数据发生变化,模型将通知有关的视图。
// 伪代码示例 Model = { data: { 程序需要操作的数据或信息 }, create: { 增数据 }, delete: { 删数据 }, update(data) { Object.assign(m.data, data) //使用新数据替换旧数据 eventBus.trigger('m:upate') // eventBus触发'm:update'信息, 通知View刷新 }, get:{ 获取数据 } }
View
视图view是屏幕上的表示,描绘的是model的当前状态。当模型的数据发生变化,视图相应地得到刷新自己的机会
// 伪代码示例 View = { el: 需要刷新的元素, html: `<h1>M V C</h1>....显示在页面上的内容` init(){ v.el: 需要刷新的元素 }, render(){ 刷新页面 } }
controller
控制器controller定义用户界面对用户输入的响应方式,起到不同层面间的组织作用,用于控制应用程序的流程,它处理用户的行为和数据model上的改变。
// 伪代码示例 Controller = { init(){ v.init() // View初始化 v.render() // 第一次渲染 c.autoBindEvents() // 自动的事件绑定 eventBus.on('m:update', () => { v.render() }) // 当eventBus触发'm:update'时View刷新 }, events:{ 事件以哈希表方式记录 }, method() { data = 改变后的新数据 m.update(data) }, autoBindEvents() { 自动绑定事件 } }EventBus
为什么要用mvc?
Don't Repeat Youself - DRY 原则
代码级别的重复
你把相同的三行代码写了两遍
那么你就应该重构它
页面级别
你把类似的页面做了10遍
那么你就应该相处一个万金油写法
MVC就是一个万金油
所有的页面都可以使用MVC来优化代码结构
不学MVC又怎样
会写出意大利面条式代码,也就是垃圾代码
你将编程外包式程序员
不停重复自己,不懂得抽象
只会调用API,不能提升自己
只会写业务,不会封装,更不会造轮子,更不会加薪
MVVM
MVVM是Model-View-ViewModel的简写。
它本质上就是MVC (Model-View- Controller)的改进版。
即模型-视图-视图模型。
【模型】指的是后端传递的数据。
【视图】指的是所看到的页面。
【视图模型】mvvm模式的核心,它是连接view和model的桥梁。
它有两个方向:
一是将【模型】转化成【视图】,即将后端传递的数据转化成所看到的页面。
实现的方式是:数据绑定。
二是将【视图】转化成【模型】,即将所看到的页面转化成后端的数据。
实现的方式是:DOM 事件监听。
这两个方向都实现的,我们称之为数据的双向绑定。
为什么会有MVVM框架?
在过去的10年中,我们已经把很多传统的服务端代码放到了浏览器中,
这样就产生了成千上万行的javascript
代码,它们连接了各式各样的HTML
和CSS
文件,
但缺乏正规的组织形式,这也就是为什么越来越多的开发者使用javascript
框架。
比如:angular
、react
、vue
。浏览器的兼容性问题已经不再是前端的阻碍。
前端的项目越来越大,项目的可维护性和扩展性、安全性等成了主要问题。
当年为了解决浏览器兼容性问题,出现了很多类库,其中最典型的就是jquery
。
但是这类库没有实现对业务逻辑的分成,所以维护性和扩展性极差。
综上两方面原因,才有了MVVM模式一类框架的出现。
比如vue,通过数据的双向绑定,极大了提高了开发效率。
总结
在MVVM的框架下视图和模型是不能直接通信的。
它们通过ViewModel来通信,ViewModel通常要实现一个observer观察者,当数据发生变化,ViewModel能够监听到数据的这种变化
然后通知到对应的视图做自动更新,而当用户操作视图,ViewModel也能监听到视图的变化
然后通知数据做改动,这实际上就实现了数据的双向绑定。并且MVVM中的View 和 ViewModel可以互相通信。