浅析MVC - 掘金

一、 MVC是什么

把每个模块都可以写成3个对象，分别是M、V、C。

M module(数据模型) 负责操作所有数据
V view（视图）负责所有UI界面
C controller（控制器）负责其他

const m ={
   data:{}
   create:{}//增
   delete:{}//删
   update(data):{
     Object.assign(m.data,data)
     eventBus.trigger('m:update')//触发data有改变，View对应改变
   
   }//改
   get:{}//查
}

const v={
    el:null 
    html:``//界面的html
    init(container){
      v.el=$(container)
    }
    render(n){}//n的值改变即重新渲染一次
}

const c = {
  init(){
    v.init()//调用view的初始化
    v.render()
    c.autoBindEvents()
    eventBus.on('m:update',()=>{v.render()})//接收tigger触发的改变，重新渲染
  }
  events:{事件以哈希表记录}
  autoBindEvents() 
}

二、 EventBus

在这里使用EventBus是实现以上不同部分的点与点的通信，也相当于是监听事件发生。

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

在vue中可以直接使用同样的作用的api

$on(eventName,callback)   
const eventList = {};
const $on = (eventName,callback)=>{
     if(!eventList[eventName]){
         eventList[eventName] = [];
     }
     eventList[eventName].push(callback)
}

$emit(eventName,[params]) 
const eventList = {};
const $emit = (eventName,params)=>{
    if(eventList[eventName]){
         let arr = eventList[eventName];
         arr.map((cb)=>{
             cb(params)
         })
    }
}

三、表驱动编程

减少if else语句的使用，可以通过表查询来执行不同的逻辑控制

先看if else写法下的例子：

function date(term){
    if(term==="1"){
        return"Monday"
    }else if(term==="2"){
        return"Tuesday"
    }else if(term==="3"){
        return"Wednesday"
    }else{
    }
    //每增加一个选项就要增加一个if语句
}

如果使用表驱动

function date(term){
  let weesdays=['Monday','Tuesday','Wednesday','Thursday','Friday']
  return weekdays[term]
}
  //增加新的选项只需要在weekdays里增加

四、模块化的个人理解

模块化可以使各个部分独立且针对性更强，降低了重复度便于管理，提取出“方法论”可重复使用。