一、mvc是什么

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

Model：模型，承载数据，并对用户提交请求进行计算的模块

View：视图，为用户提供使用界面，与用户直接进行交互。

Controller：控制器，用于将用户请求转发给相应的Model进行处理，并处理Model的计算结果向用户提供相应响应。

MVC架构程序的工作流程是这样的：

(1)用户通过View页面向服务端提出请求，可以是表单请求、超链接请求、AJAX请求等。

(2)服务端Controller控制器接收到请求进行解析，找到相应的Model对用户请求进行处理。

(3)Model处理后，将处理结果在交给Controller

(4)Controller在接到处理结果后，根据处理结果找到作为向客户端发回的响应View页面。页面经渲染（数据填充）后，再发送给客户端。

各个部分的伪代码实现

Model

Model={
    data:{程序需要操作的数据或信息},
    create:{增数据},
    delete:{删数据},
    undate(data){
        Object.assign(m.data,data) //使用新数据替换旧数据
        eventsBus.trigger('m:upate') //eventBus触发'm:update'信息, 通知View刷新 
    },
    get:{获取数据}
}

View

View={
    el:需要刷新的元素，
    init(){
        v.el: 需要刷新的元素
    },
    template:'<h1></h2>' //html的内容
    render(){ 刷新页面 }
}

Controller

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() { 自动绑定事件 }
}EventBus

三、 EventBus

一种设计模式或框架，主要用于组件/对象间通信的优化简化。

EventBus里面涉及到很多API，下面我就列举几个常用，并对它们的用法进行分析。这个EventBus我们在运用的时候通常是这么来引入的：

const eventBus = $(window)

EventBus中涉及到了三个API，分别是：on、trigger、off; on:监听事件的变化监听数据的变化，如果数据有变化，直接render（再次将变化后的数据渲染到页面）

 this.on('m:updated', () => {
      this.render(this.data)
    })

tirgger:自动触发事件

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

off：关闭的意思

3、表驱动编程

表驱动编程就是将诸多事件进行简化的一种写法，因为这些事件涉及到很多的代码重复问题。

例如如果要一个可以返回每个月中天数的函数（为简单起见不考虑闰年），用if else：

function iGetMonthDays(iMonth) {
let iDays;
if(1 == iMonth) {iDays = 31;}
else if(2 == iMonth) {iDays = 28;}
else if(3 == iMonth) {iDays = 31;}
else if(4 == iMonth) {iDays = 30;}
else if(5 == iMonth) {iDays = 31;}
else if(6 == iMonth) {iDays = 30;}
else if(7 == iMonth) {iDays = 31;}
else if(8 == iMonth) {iDays = 31;}
else if(9 == iMonth) {iDays = 30;}
else if(10 == iMonth) {iDays = 31;}
else if(11 == iMonth) {iDays = 30;}
else if(12 == iMonth) {iDays = 31;}
return iDays;
}

用表驱动（包括闰年判断）：

const monthDays = [
[31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31],
[31, 29, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]
]
function getMonthDays(month, year) {
let isLeapYear = (year % 4 === 0) && (year % 100 !== 0 || year % 400 === 0) ? 1 : 0
return monthDays[isLeapYear][(month - 1)];
}
console.log(getMonthDays(2, 2000))

4、模块化

软件产品可以被看作是由一系列的特定功能的组件组成，一个完整的系统也可以被分解成一系列的功能模块，这些模块之间的相互作用就形成了系统的所有功能。

职责分清
各个部分互相独立不受干扰
修改维护起来也很方便

对MVC的理解

一、mvc是什么

各个部分的伪代码实现

三、 EventBus

3、表驱动编程

4、模块化