什么是MVC

229 阅读3分钟

MVC 是什么

MVC 是一种软件架构模式,把软件系统分为三个基本部分:模型( Model )、视图( View )和控制器( Controller

M-Model(数据模型)

负责操作所有数据

//示例如下
const m = {
   data:{ 程序所需要的数据 },
   create(){ 增加数据 },
   delete(){ 删除数据 },
   get(){ 获得数据 },
   update(){ 修改数据 }
}

V-View(视图)

负责所有UI界面

//示例如下
const View={
    el:要刷新的元素,
    html:'要显示在页面上的刷新内容'
    init(){
        v.el:初始化需要刷新的元素
    },
    render(){
        刷新页面
    }
}

C-Controller(控制器)

负责根据用户从“视图层”输入指令,选取“数据层中的数据”,对其进行相应的操作(绑定事件等),产生最终结果

//示例如下
const Controller={
    init(){
        v.init()
        v.render()//第一次渲染页面
        c.autoBindEvents()//自动事件绑定
        eventBus.on('m:update',()=>{v.render()}//当enentsBus触发'm:update'时View刷新
    },
    events:{事件以哈希表的方式记录存储},
    method(){
        data=新数据
        m.update(data)
    },
    autoBindEvents(){自动绑定事件}
}

EventBus 的作用

上文中提到的 MVC 三层是紧密联系在一起,但又互相独立,每一层内部的变化不影响其他层。当层与层之间需要通信时,这时就需要用到 EventBusEventBus 主要用于组件之间的监听与通信。

  • EventBus 的常用 API
// on(监听事件)
const eventBus = $(window)
evnetBus.on("监听事件",() => {})

// trigger(触发事件)
const eventBus = $(window)
eventBus.trigger("事件")

// off(取消监听)
const eventBus = $(window)
eventBus.off("监听事件")

关于表驱动编程

表驱动方法是一种使你可以在表中查找信息,而不必用逻辑语句( ifcase )来把他们找出来的方法。事实上,任何信息都可以通过表来挑选。在简单的情况下,逻辑语句往往更简单而且更直接。但随着逻辑链的复杂,表就变得越来越富于吸引力了。

表驱动编程的意义在于逻辑与数据的分离。(类似于事件委托 )

  • if-else 为例
function translate(term) {
    if (term === '1') {
        return '一'
    } else if (term === '2') {
        return '二'
    } else if (term === '3') {
        return '三'
    } else {
        return '???'  
    }
}

// 如果想添加一个新的名词翻译,需要再添加一个if-else逻辑,例如:
function translate(term) {
    if (term === '1') {
        return '一'
    } else if (term === '2') {
        return '二'
    } else if (term === '3') {
        return '三'
    } else if (term === '4') {   
        // 此处添加了一个新的名词翻译
        return '四'
    } else {
        return '???'  
    }
}
  • 转化为表驱动
function translate(term) {
    let terms = {
        '1': '一',
        '2': '二',
        '3': '三'
    }
    return terms[term];
}

// 如果想添加一个新的名词翻译,只需要在terms中添加一个新的表项,不需要修改整个逻辑
function translate(term) {
    let terms = {
        '1': '一',
        '2': '二',
        '3': '三'
        '4': '四'   // 添加一个新的名词翻译
    }
    return terms[term];
}

模块化编程

维基百科里说:模块化编程是指,将计算机程序的功能分离成独立的、可相互改变的“模块”软件设计技术,它使每个模块都包含着执行预期功能的一个唯一方面所必需的所有东西。模块接口表达了这个模块所提供的和所要求的元素。

简单来说,模块化就是把相对独立的代码从一大段代码里抽取成一个个小模块,每个模块之间相对独立,实现相应的功能,更加简洁美观,也方便维护。

本文参考摘录了:

  1. MVC---维基百科
  2. 浅析MVC---欧大雄
  3. 浅析MVC---Zeroy
  4. 浅析,什么是MVC?---荏狸十三
  5. 浅析 MVC---csy没有昵称
  6. 表驱动编程---社本