了解MVC

一、MVC

MVC是一种设计模式，M指Model(模型)，V指View(视图)、C指Controller(控制器)

Model:数据层，封装数据以及对数据的处理方法
const M = {
      data:{},//数据
      create(){},//增
      delete(){},//删
      update(){},//改
      get(){}//查
}
View:表现层，当模型的数据发生变化，视图也会对应刷新
const V = {
      el:要刷新的元素,
      html:`页面内容`,
      init(){
            V.el：需要刷新的元素
      },
      render(){}//刷新页面
}
Controller:控制层，对Model里的数据加工，处理用户的行为和数据的改变并传到View
const C = {
      init(){
            V.init()//初始化View
            V.render()//第一次渲染页面
            C.autoBindEvents()//自动绑定事件
            eventBus.on('M:update',()=>{V.render()})//当eventBus触发'M:update'时刷新视图
      },
      events:{},//以哈希表的方式存储
      method(){},//处理用户的行为
      autoBindEvents(){}//自动绑定事件
}

二、eventBus的常用api

on()
trigger()
off()
eventBus 监听 M:updated，当 M:updated 触发时，执行一些内容
eventBus.on('M:updated',()=>{
v.render(M.data.n)
})

三、表驱动编程

消除代码中频繁的if else和switch case

C = {
     events:{
         'click #add1':'add',
         'click #minus1':'minus',
         'click #mul2':'mul',
         'click #divide2':'div'
     },
     autoBindEvents(){
         for(let key in C.events){
             const value = C[C.events[key]]
             const spaceIndex = key.indexOf(' ')
             const part1 = key.slice(0, spaceIndex)
             const part2 = key.slice(spaceIndex + 1)
             v.el.on(part1,part2,value)
         }
     }
 }

四、模块化的理解

按照某种规范，拆分成一块一块的，提供一种万金油的写法。使得项目结构更加合理清晰，提高代码的复用性，降低耦合度，便于后期维护。