浅析 MVC

148 阅读2分钟

MVC 三个对象分别做什么

M是model(数据模型),负责增删改查数据层

const model = { //这个模块负责操作所有数据
    get(){
        //获取数据
    },
    update(){
        //修改数据
    },
    delete(){
        //删除数据
    }
}

V是view(视图),负责用户视图界面

const view = {
  el: null,
  template: `   //html模板
  <div>
  </div>
  `,
  init() {
    //初始化视图
  },
  render() {
    //将模板渲染到视图
  }
}

C是controller(控制器),负责其他

const controller = {
    init(){
      //初始化调用绑定事件等  
    },
    events(){
        //所有事件绑定
    }
}

EventHub 有哪些 API,是做什么用的

on(绑定),emit(触发),off(解绑)
//用vue的eventHub举例,假设引入vue的前提下
const app = new Vue()
//此时app对象的原型链上就有vue封装过的eventHub($on,$off,$emit)

app.$on('eventName',fn(data)=>{}) //绑定监听事件
app.$off('eventName') //解绑监听事件
app.$emit('eventName',data) //触发事件

表驱动编程是做什么的

假设现在有一个需求,有七天的工作行程安排,要求返回每天的工作内容

//可以使用if...else...或者switch语法来实现
function dayWork(day){
    let workContent
    if(day === 1){
        workContent = '第1天做这个'
    }else if(day === 2){
        workContent = '第2天做这个'
    }else if(day === 3){
        workContent = '第3天做这个'
    }else if(day === 4){
        workContent = '第4天做这个'
    }else if(day === 5){
        workContent = '第5天做这个'
    }else if(day === 6){
        workContent = '第6天做这个'
    }if(day === 7){
        workContent = '第7天做这个'
    }
    return workContent
}

但如果有100天的工作安排,则需要写100次判断语句,现在试试使用表驱动编程来实现需求

//表驱动法编程的使用与访问方式:直接访问通过索引/key值来直接访问数组/集合
const workDay = {
    1:{
        workContent : '第1天做这个'
    },
    2:{
        workContent : '第2天做这个'
    },
    3:{
        workContent : '第3天做这个'
    },
    4:{
        workContent : '第4天做这个'
    },
    5:{
        workContent : '第5天做这个'
    },
    6:{
        workContent : '第6天做这个'
    },
    7:{
        workContent : '第7天做这个'
    },
}

function getWork(day){
    return workDay[day].workContent
}
//对比条件判断冗长的写法,显得更加清晰,我们不需要关心数据的数量,例子中不管是7天或者1000天的工作,只需要写好表数据即可
数据驱动编程的核心出发点是相对于程序逻辑,人类更擅长于处理数据。数据驱动编程就是通过把程序逻辑的复杂度转移到人类更容易处理的数据中来,从而达到控制复杂度的目标。

我是如何理解模块化的

模块化的优势在于可以将一个系统划分为多个高度解耦且可替代的模块,模块之间互不影响,更方便于管理和维护,当出现问题时亦可快速定位问题模块。