浅析MVC

114 阅读2分钟

浅析MVC

MVC 三个对象分别做什么,给出伪代码示例

MVC(Model-View-Controller)是一种架构模式,是一种思想理念,并不是一种技术,塔通过关注点分离鼓励改进应用程序组织

其中:

M-Model 用于封装与应用的业务逻辑相关的数据以及对数据的处理方法,会有一个或多个视图监听此模型,与数据有关的就放在M里面

let Model={
    data:{},
    create:{},
    delete:{},
    update(data){
        Object.assign(m.data,data)//用新数据替换旧数据
        eventBus.trigger('m:update')//eventBus触发'm:update'信息,通知View刷新界面
    },
    get:{}
}

V-View 实现了M里数据的展示,展现了Model的当前状态,当模型里的数据发生变化时,视图相应地会刷新自己,与视图相关地放在V里面

let View={
    el:el,
    html:''//html
    init(){
        v.el://elments
    },
    render(){
        
    }
}

C-Controller 定义用户界面对用户输入地响应,起到承上启下的作用,用于控制应用的流程

,除了M和V的内容放在C里面

let Controller={
    init(){
        v.init()
        v.render()
        c.autoBindEvents()
        eventBus.on('m:update',()=>{v.render()}
    },
    events:{//hashtable},
    method(){
        data=data
        m.update(data)
    },
    autoBindEvents(){}
}

EventBus有哪些API,作用是

EventBus的作用是用来实现对象间的通信

EventBus基本的3个API是 on, trigger(emit),off, 作用分别是监听事件,触发事件,取消监听

const eventBus = $(window) 
const m = {
  data: {
    ...
  },
  update(data) {
    eventBus.trigger('m:updated')
  }
}

const v = {
  render(data) {
    ...
  }
}  
  
const c = {
  eventBus.on('m:updated', () => {
    v.render(m.data.n)
  })
}

表驱动编程是做什么的

表驱动编程是通过哈希表来优化代码,可以将大量重复的代码进行剥离,从而达到模块化的处理

Before:

$('#el1').on('事件A', fn1)
$('#el2').on('事件B', fn2)
$('#el3').on('事件C', fn3)
$('#el4').on('事件D', fn4)
$('#el5').on('事件E', fn5)

After:

const events = {
  "#el1 事件A": "fn1",
  "#el2 事件B": "fn2",
  "#el3 事件C": "fn3",
  "#el4 事件D": "fn4",
  "#el5 事件E": "fn5"
}

const eventFunctions = {
  fn1: function() {},
  fn2: function() {},
  fn3: function() {},
  fn4: function() {},
  fn5: function() {}
}

function autoBindEvents() {
  for(let key in events) {
    const spaceIndex = key.indexOf(' ')
    const el = key.splice(0, spaceIndex) 
    const event = key.splice(spaceIndex+1)
    const fn = eventFunctions[events[key]]
    $(el).on(event, fn)
  }
}

如何理解模块化的

我理解里的模块化是一种封装的思想,将大量的代码封装成几个模块,不同模块之间负责不同的工作,各个模块直接按协调完成一个项目,对于日后的优化和重构都非常重要