浅析 MVC

290 阅读2分钟

MVC模式是软件工程中的一种软件架构模式,把软件系统分为三个基本部分:模型、视图和控制器。 MVC模式最早由Trygve Reenskaug在1978年提出,是施乐帕罗奥多研究中心在20世纪80年代为程序语言Smalltalk发明的一种软件架构。

1.MVC 三个对象分是什么

  • 模型model用于封装与应用程序的业务逻辑相关的数据以及对数据的处理方法,会有一个或多个视图监听此模型。一旦模型的数据发生变化,模型将通知有关的视图。
  • 视图view是它在屏幕上的表示,描绘的是model的当前状态。当模型的数据发生变化,视图相应地得到刷新自己的机会。
  • 控制器controller定义用户界面对用户输入的响应方式,起到不同层面间的组织作用,用于控制应用程序的流程,它处理用户的行为和数据model上的改变。
 //音量调节
m{//操作数据
音量加={}
音量减={}
}
v{//数据的展示
显示音量的多少,渲染到页面里
}
c{//控制器
初始化m和v;
V向M注册;
当M更新就会去通知V更新试图;
}

2.EventBus

EventBus 提供了 on、off 和 trigger 等 API,on 用于监听事件,trigger 用域触发事件

const eventBus = $(window)

update(data) {
    Object.assign(m.data, data)
    eventBus.trigger('m:updated')//触发事件
    localStorage.setItem('n', m.data.n)
  }
//监听事件
eventBus.on('m:updated', () => {
      console.log('here')
    })

EventBus 主要用于对象间通信,使用 eventBus 可以满足最小知识原则,m 和 v 互相不知道对方的细节,但是却可以调用对方的功能

3.表驱动编程

表指的是哈希表 表驱动编程可以减少重复代码,只将重要的信息放在表里,然后利用表来编程,与逻辑语句相比较有着更稳定的复杂度 代码示例:

events: {
'click #add1': 'add',
'click #minus1': 'minus',
'click #mul2': 'mul',
'click #divide2': 'div',
}
xxx(key){
if( key in events) {
const value = events[key]
}
return value
}

这种思路的优势:

1、可读性更强,消息处理流程一目了然。

2、更容易修改,要增加新的消息,只要修改数据即可,不需要修改流程。

4.如何理解模块化的

模块化开发使代码耦合度降低,模块化的意义在于最大化的设计重用,以最少的模块、零部件,更快速的满足更多的个性化需求。因为有了模块,我们就可以更方便地使用别人的代码,想要什么功能,就加载什么模块