《浅析 MVC》

MVC 三个对象

• Model（模型）： 是数据模型，用于操作所有的数据。

class Model ={
    data(){}     //写数据
    create(){}      //增加数据
    remove(){}      //删除数据
    update(){}      //改变数据
    get(){}         //查看数据
}

• View（视图）：用于负责所有的UI界面。

class View={
    el：null          //管理元素
    html：` `         //管理HTML
    init(){           //初始化
     v.el:
    }，
    render(){}     //页面渲染    
}

• Controller（控制器）：负责其他。

class Controller {
    init() {}        // 初始化相关操作
    events          // 用户操作的事件
    bindEvent() {}   // 绑定事件，响应用户操作
}

EventBus

EventBus：一个以事件为驱动的消息服务总线。用来进行组件之间的监听和通信。

EventBus 有哪些 API，是做什么用的

• EventBus.on（）: 监听事件,当 m:updated 触发时，执行一些内容

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

• EventBus.trigger（）: 触发事件,当一个事件执行，eventBus 触发 m:updated

 update(data) {
    Object.assign(m.data, data)   //把传进来的data直接放在m.data上
    eventBus.trigger('m:updated')  //通过trigger自动更新数据
    localStorage.setItem('n', m.data.n)//储存数据
 }

• EventBus.off : 解绑事件。

表驱动编程

表驱动编程： 是一种可以在表中查找信息，而不必用很多的逻辑语句（if或Case）来把它们找出来的方法。表可以减少重复代码，只将重要的信息放在表里，然后利用表来编程，与逻辑语句相比较有着更稳定的复杂度。

未使用表驱动编程

bindEvents(){
  v.el.on('click', '#add1', () => {
    m.data.n += 1
    v.render(m.data.n)
  })
  v.el.on('click', '#minus1', () => {
    m.data.n -= 1
    v.render(m.data.n)
  })
  v.el.on('click', '#mul2', () => {
    m.data.n *= 2
    v.render(m.data.n)
  })
  v.el.on('click', '#divide2', () => {
    m.data.n /= 2
    v.render(m.data.n)
  })
}

使用表驱动编程

events: {
  'click #add1' : 'add',
  'click #minus1' : 'minus',
  'click #mul2' : 'mul',
  'click #divide2' : 'div'
},
add() {
  m.update( data: {n: m.data.n +1})
},
minus() {
  m.update( data: {n: m.data.n -1})
},
mul() {
  m.update( data: {n: m.data.n *2})
},
div() {
  m.update( data: {n: m.data.n /2})
}

模块化

模块化是把一些重复的代码或者一类的代码封装后放在一个一个的板块中，其他文件要使用的话用export命令输出该变量，使用import命令输入模块提供的功能。这样做可以降低代码耦合度，减少重复代码，提高代码重用性，在项目结构上更加清晰，便于维护。