什么是MVC？MVC分别表示什么？

MVC模式是软件工程中的是一种架构设计模式，把软件系统分为三个基本部分：模型（Model）、视图（View）和控制器（Controller）。

M是modal(数据模型)的简称，它是用于操作所有数据

Model= {
  data: {
    n: parseInt(localStorage.getItem('n'))//用于存储数据
  },
  create() {},//增加数据
  delete() {},//删除数据
  update(data) {//更新数据
    Object.assign(m.data, data)//把参数data传进来的属性全部赋给m.data
    eventBus.trigger('m:updated')//用eventBus自定义的触发事件（trigge）名为m:updated
    localStorage.setItem('n', m.data.n)//将数据存储在浏览器的localStorage，并命名为n
  },
  get() {}//获取数据
}

V是view(视图)的简称，它是用于负责所有UI界面

View = {
  el: null,
  html:
  `
  //试图的模板
  `,
  init(选择器) {
  //初始需要刷新的元素
    v.el = $(选择器)
  },
  render(n) {
  //用于渲染页面
    if (v.el.children.length !== 0) v.el.empty()
    $(v.html.replace('{{n}}', n))
      .appendTo(v.el)
  }
}

C是controller（控制器）的简称，它负责其他

Model= {
  init(container) {//在外部传入一个选择器
    v.init(container)//View模块的初始化
    v.render(m.data.n) // view = render(data)，重新渲染数据
    c.autoBindEvents()
    eventBus.on('m:updated', () => {//利用eventBus提供的on函数监听m:updated事件
      v.render(m.data.n)
    })
  },
  events: {
  //利用哈希表的方式记录事件类型，如下例子
    'click #add1': 'add',
    'click #minus1': 'minus',
    'click #mul2': 'mul',
    'click #divide2': 'div',
  },
  add() {//该函数作用
    m.update({n: m.data.n + 1})
  },
  minus() {
    m.update({n: m.data.n - 1})
  },
  mul() {
    m.update({n: m.data.n * 2})
  },
  div() {
    m.update({n: m.data.n / 2})
  },
  autoBindEvents() {//遍历上述的events哈希表
    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

EventBus 又称为事件总线,主要用于对象之间的通信。使用 eventBus 可以满足最小知识原则，m 和 v 互相不知道对方的细节，但是却可以调用对方的功能.比如说当 Model 模块中的数据发生更新，触发了 EventBus 上的某个事件，而 Controller 恰好在监听这个事件，当这个事件触发时，Controller 就知道 Model 中的数据发生了更新了。

eventBus主要提供了三个API，on、off 和 trigger ，on 用于监听事件，trigger 用于触发事件，off用于取消事件

Model= {
  data: {
    存储数据
  },
  create() {},
  delete() {},
  update(data) {
    Object.assign(m.data, data)
    eventBus.trigger('m:updated')//用eventBus自定义的触发事件（trigge）名为m:updated
  },
  get() {}
}

Controller = {
  init(container) {
    v.init(container)
    v.render(m.data.n) 
    c.autoBindEvents()
    eventBus.on('m:updated', () => {//利用eventBus提供的on函数监听m:updated事件
      v.render(m.data.n)
    })
  },
  events: {

  },
  add() {
   
  },
  minus() {
  
  },
  mul() {
   
  },
  div() {
    
  },
  autoBindEvents() {
    
}

表驱动编程

表驱动编程就是一种编程模式——从表里面查找信息而不使用逻辑语句(if和case)。事实上，凡是能通过逻辑语句来选择的事物，都可以通过查表来选择,比如说我们可以使用哈希表,用以下例子说明

//我们用了四个监听函数，而用表驱动方程只需要一个事件监听
$button1.on("click", () => {
  let n = parseFloat($number.text());
  n += 1;
  localStorage.setItem("n", n);
  $number.text(n);
});
$button2.on("click", () => {
  let n = parseFloat($number.text());
  n -= 1;
  localStorage.setItem("n", n);
  $number.text(n);
});
$button3.on("click", () => {
  let n = parseFloat($number.text());
  n *= 2;
  localStorage.setItem("n", n);
  $number.text(n);
});
$button4.on("click", () => {
  let n = parseFloat($number.text());
  n /= 2;
  localStorage.setItem("n", n);
  $number.text(n);
});

events: {//这就是一个哈希表，我们将每个监听函数不同的部分做成一个哈希表，最后用一个函数遍历每一个key属性
    'click #add1': 'add',
    'click #minus1': 'minus',
    'click #mul2': 'mul',
    'click #divide2': 'div',
  },
  add() {
    m.update({n: m.data.n + 1})
  },
  minus() {
    m.update({n: m.data.n - 1})
  },
  mul() {
    m.update({n: m.data.n * 2})
  },
  div() {
    m.update({n: m.data.n / 2})
  },
  autoBindEvents() {
  ////在这里我们只需要使用一个函数去遍历哈希表的key，并将其value提取出来
    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 的语法里引入了 Import 和 export 就是用来实现模块化。例如，我们在写一个项目是，引入一个模块我们需要引入 html、css、js，但我们利用Import 和 export，引入一个模块需要引入 js

/*我们只需要在一个JS中用Import，将每个模块的JS引入，这样各个模块的JS里又引入CSS，
这样我们在完成每个模块时，都不影响其他模块的实现*/
import "./reset.css";
import "./global.css";
import "./app1.js";
import "./app2.js";
import "./app3.js";
import "./app4.js";

浅析MVC

什么是MVC？MVC分别表示什么？

EventBus

表驱动编程

模块化