MVC是啥？

• 每个模块都可以写成三个对象，分别是M、V、C
• M - Model (数据模型) 负责操作所有数据
• V - View (视图) 负责所有UI界面
• C - Controller (控制器) 负责其他

MVC 三个对象分别做什么?

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

  伪代码示例

const m = new Model({
	data:{},
    create(){},
    delete(){},
    update(){},
})

• V - View (视图) 负责所有UI界面

  伪代码示例

const v = {
  el:null,
  html:`html代码`
  render() {},
} 	

• C - Controller (控制器) 负责其他

  伪代码示例

const c = {
  events: {
      "click #add1": "add",
      "click #minus1": "minus",
      "click #mul2": "mul",
      "click #divide2": "div",
    },
    add() {},
    minus() {},
    mul() {},
    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);
      }
    },
}

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

• EventBus 基本的 API 有 on （监听事件）， trigger （触发事件）, off （取消监听）方法。

  用于模块组件间的通信

伪代码示例

//使用jQuery中的eventBus
import $ from "jquery"

class EventBus{
	constructor(){
        this._eventBus =$(window)
    }
    on(eventName, fn){
        return this._eventBus.on(eventName,fn)
    }
    trigger(eventName,data){
        return this._trigger.tiggger(eventName,data)
    }
    off(eventName, fn){
        return this._eventBus.off(eventName,fn)
    }
}
}

表驱动编程是做什么的

表驱动方法编程（Table-Driven Methods）是一种编程模式,适用场景:消除代码中频繁的if else或switch case的逻辑结构代码,使代码更加直白。

• 当你看到大批类似但不重复的代码
• 眯起眼睛，看看到底哪些才是重要的数据
• 把重要的数据做成哈希表，你的代码就简单了
• 这是数据结构知识给我们的红利

伪代码示例

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

表驱动编程写法

events: {
    "click #add1": "add",
    "click #minus1": "minus",
    "click #mul2": "mul",
    "click #divide2": "div",
  },
  add() {
    m.data.n += 1 ;
  },
  minus() {
    m.data.n -= 1 ;
  },
  mul() {
    m.data.n *= 2 ;
  },
  div() {
    m.data.n /= 2 ;
  },
  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);
    }
  },

如何理解模块化

• 模块化是什么

  模块化开发，一个模块就是一个实现特定功能的文件，有了模块我们就可以更方便的使用别人的代码，要用什么功能就加载什么模块。

  将一个复杂的程序依据一定的规则(规范)封装成几个块(文件), 并进行组合在一起

块的内部数据与实现是私有的, 只是向外部暴露一些接口(方法)与外部其它模块通信

• 模块化的好处

  避免命名冲突(减少命名空间污染)

  更好的分离, 按需加载

  更高复用性

  高可维护性

• ES6模块化

  在之前的javascript中是没有模块化概念的。如果要进行模块化操作，需要引入第三方的类库。随着技术的发展，前后端分离，前端的业务变的越来越复杂化。直至ES6带来了模块化，才让javascript第一次支持了module。ES6的模块化分为导出（export）与导入（import）两个模块。