浅析MVC

150 阅读3分钟

一、MVC的三个对象

1. Model(模型) 模型代表一个存取数据的对象或 JAVA POJO。它也可以带有逻辑,在数据变化时更新控制器。
2. View(视图) 视图代表模型包含的数据的可视化。
3. Controller(控制器) 控制器作用于模型和视图上。它控制数据流向模型对象,并在数据变化时更新视图。它使视图与模型分离开。

image.png

class Model={
    data(){}         //保存数据
    //管理数据的用法
    create(){}      //增加数据 
    remove(){}    //删除数据
    update(){}     //改变数据
    get(){}           //查看数据
 }
 
 class View={
     el                //管理元素,
     html:        //管理HTML
     init(){
     v.el:            //需要刷新的元素
     },
     render(){}    //页面渲染
 }
 
 class Controller {
     init() {}              // 初始化相关操作
     events              // 用户操作的事件
     bindEvent() {}   // 绑定事件,响应用户操作
 }

二、如何理解EventBus? EventBus 是怎么运行的? 有哪些 API? 有什么用?

理解EventBus

用一个十分浅显的例子,Bus 即公交车,城市中的公交车的是怎么运作的呢?

公交车会在城市中按照既定的路线一遍遍的循环。乘客上车之后会跟公交车司机说一下”我在第二站,下车“,于是等公交车到了第二站后,会提醒乘客”第二站到了,请下车“,如果乘客中途改变了注意也会告诉司机”我第二站不下车了,后面的站再下车“。

EventBus 是怎么运行的

相应的,EventBus 对象会在 JS 线程中一遍一遍的循环。它是一个订阅中心,比如你向起订阅一个点击事件 EventBus.on('click'),当事件触发时 EventBus 会执行你添加的事件监听函数 EventBus.emit('click'),如果想取消订阅可以 EventBus.off('click') 来取消订阅

原生API

on 监听事件
off 取消监听
trigger(emit) 触发事件

有什么用

1. 模块通信 解决模块之间通信的问题,view组件层面,父子组件、兄弟组件通信都可以使eventbus处理

2. 模块解耦 storage change事件,cookie change事件,view组件的事件等,全部转换使用Event Bus来订阅和发布,这样就统一了整个应用不同模块之间的通信接口问题。

3. 父子页面通信 window.postMessage + Event Bus

4. 多页面通信 torage change + Event Bus

 eventBus.trigger('m:updated') // 触发事件
 eventBus.on('m:updated', () => { console.log('here') }) '监听事件,听到后执行函数'

三、表驱动编程是做什么的

表驱动法是一种编程模式,从表(哈希表)里面查找信息而不是使用逻辑语句(if…else…switch,可以减少重复代码,只将重要的信息放在表里,然后利用表来编程,与逻辑语句相比较有着更稳定的复杂度。

bindEvents(){
     v.el.on('click','#add1',()=>{
     m.data.n +=1
     v.render(m.data.n)
     })
     v.el.on('click','#minus1',()=>{
     m.data.n-=1
     v.render(m.data.n)
     })
     v.el.on('click','#mul2',()=>{
     m.data.n*=2
     v.render(m.data.n)
     })
     v.el.on('click','#divide2',()=>{
     m.data.n/=2
     v.render(m.data.n)
     })
 }

使用表驱动取出一个时间的哈希表,清晰的分明了数据和逻辑。

 events:{
     'click #aa1':'add',
     'click #minus1':'minus',
     'click #mul2':'mul',
     'click #divide2':'div'
 },
 add(){
     m.update( data: {n:m.data.n +1})
 },
 minus(){
     m.update( data:{n:m.data.n -1})
 },
 mul(){
     m.update( data: {n:m.data.n *2})
 },
 div(){
     m.update(data: {n:m.data.n /2})
 }

四、浅谈对模块化的理解

模块化是将代码封装起来放在独立的模块中,只留下必要的接口方便供给他人使用。

为什么要模块化?

  1. 维护性高,它的每个封装模块都是独立的。
  2. 需要改编或提出其他需求,不会影响其他文件内容。
  3. 复用性高,一个封装的模块能够被多次调用,省去重复编写时间。