MVC入门学习

107 阅读2分钟

1.MVC是什么

M-Model (数据模型)负责操作所有数据

Model = {
    data: { 需要用到的数据 },
    create(): { 增数据 },
    delete(): { 删数据 },
    update() {更新数据},
    get():{ 获取数据 } 
}

V-View (视图)负责所有UI界面
View层
View = {
    el:null,
    html: `......` //视图模板
    init(){初始化页面},
    render(){ 刷新页面 }
}

C-Contorl (控制器)负责其他
Controller = {
   init(){
      v.init() // View初始化
      v.render() // 第一次渲染
      c.autoBindEvents() // 自动的事件绑定
      eventBus.on('m:update', () => { v.render() }) // 当eventBus触发'm:update'时View刷新
   },
   events:{ 事件以哈希表方式记录 },
   method() {
      data = 改变后的新数据
      m.update(data)
   },
   autoBindEvents() { 自动绑定事件 }

2.EventBus

EventBus 又称为事件总线,可以用来进行组件之间的监听和通信。比如说当 Model 模块中的数据发生更新,触发了 EventBus 上的某个事件,而 Controller 恰好在监听这个事件,当这个事件触发时,Controller 就知道 Model 中的数据发生了更新了,从而做出一些反应

API: EventBus.on()监听事件:当 m:updated 触发时,执行一些内容

EventBus.on(eventName,callback)  
//参数1:事件名称  参数2:事件函数
//判断当前事件名称是否存在,如果不存在则创建一个key值为事件名称
//value为一个数组 将callback push到数组中
 
const eventList = {};
EventBus.on = (eventName,callback)=>{
     if(!eventList[eventName]){
         eventList[eventName] = [];
     }
     eventList[eventName].push(callback)
}

EventBus.trigger()触发事件:当一个事件执行,eventBus 触发 m:updated

EventBus.trigger(eventName,[params]) 
//参数1:事件名称 参数2:[需要传递的参数]
//判断当前事件的名称是否存在,如果存在则遍历数组,得到所有的函数,
//并执行。然后将params当做实参传递到函数中去
const eventList = {};
EventBus.trigger = (eventName,params)=>{
    if(eventList[eventName]){
         let arr = eventList[eventName];
         arr.map((cb)=>{
             cb(params)
         })
    }
}
eventBus.trigger('event') //触发事件 
eventBus.on('event',()=>{ //监听事件
     do something()
 })

EventBus.off,解绑事件

EventBus.off(eventName,[callback])  
//参数1:事件名称  参数2:[事件函数]
//判断当前事件名称是否存在,如果存在继续判断第二个参数是否存在,如果存在则找到相//对应的下标 然后将函数在数组中移除
//如果不存在则将整个数组清空
 
const eventList = {};
EventBus.off = (eventName,callback)=>{
    if(eventList[eventName]){
          if(callback){
                 let index = eventList[eventName].indexOf(callback);
                 eventList[eventName].splice(index,1)
           }
    }else{
           eventList[eventName].length = 0; 
    }
}

3. 表驱动编程

表驱动法就是一种编程模式(scheme)——从表里面查找信息而不使用逻辑语句(if 和case)。事实上,凡是能通过逻辑语句来选择的事物,都可以通过查表来选择

4.我是如何理解模块化的

模块化将代码分块,并减少代码重复率,方便维护代码