《MVC的学习心得》

Inside Out

前段时间学MVC，总感觉设计模式这种东西特别抽象，也很容易忘，不太理解，今天有时间，特此写一篇博客归纳一下MVC的重点概念，当作笔记。

参考文章：

MVC 三个对象分别做什么

首先,MVC是一种设计模式，为什么要有设计模式？--Don't repeat yourself 原则，为了防止写出spaghetti code，防止代码和页面级别的重复。

简单来说, MVC就是每个模块都可以写成三个对象，分别是 M、V、C，

M- Model（数据模型）负责操作所有数据，数据管理，主要负责和服务器进行交互。将请求到的数据传给Controller。

let Model={
    data:{数据源},
    create:{增加数据},
    delete:{删除数据},
    update(data){
        Object.assign(m.data,data)//用新数据替换旧数据
        eventBus.trigger('m:update')//eventBus触发'm:update'信息，通知View刷新界面
    get:{获取数据}

V-View（视图）负责所有 UI 界面

let View={
    el:要刷新的元素，
    template{}
    html：'要显示在页面上的内容'
    init(){
        v.el:需要刷新的元素
    render(){

C- Controller（控制器）负责监听并处理View 的事件，更新和调用 Model；也负责监听 Model的变化（Model从服务器获得数据），并更新 View。

let Controller={
    init(){
        v.init()//初始化View
        v.render()//第一次渲染页面
        c.autoBindEvents()//自动的事件绑定
        eventBus.on('m:update',()=>{v.render()}//当enentsBus触发'm:update'是View刷新
    events:{事件以哈希表的方式记录存储},
    method(){
        data=新数据
        m.update(data)
    autoBindEvents(){自动绑定事件}

要弄清楚MVC，首先理解下面3个问题：

1.EventBus是什么，有哪些 API，是做什么用的 。
简单的说，EventBus就是一个以事件为驱动的消息服务总线，用来简化组件/对象之间的通信。当有事件执行，就会触发EventBus API。EventBus 实现了 M 和 C 间的通信，因为 m.data.x 在更新后可以触发一个函数告诉 C 我更新了，而 C 用一个监听就可以知道数据更改，那我就在渲染一次页面。

const eventBus = $(window) // $ 为 jquery  
const m = {
    data: x
    update(){
        eventBus.trigger('m:changed')
// v 已经写好
cosnt c = {
    add(){
        m.data.x += 1
        eventBus.on('m:changed', (){
            c.render()
//EventBus 就这样实现了 M 和 C 之间的通信

EventBus API有：有on（监听事件），trigger(emit)（触发事件）,off（取消监听)

import $ from 'jquery'
class EventBus {           //创建一个eventBus类，让 m 和 v 引用或者继承
  constructor() {
    this._eventBus = $(window)
  on(eventName, fn){       //监听事件
    return this._eventBus.on(eventName, fn)
  trigger(eventName){      //触发事件
    return this._eventBus.trigger(eventName)
  off(eventName, fn){      //停止监听事件
    return this._eventBus.off(eventName, fn)
export default EventBus

让Model继承EventBus，以简化代码

import EventBus from './...'
class Model extends EventBus{
  constructor(options){
    super()                        //等价于调用EventBus#constructor()
    const keys = ['data','update','get']
    keys.forEach((key)=>{          //或者使用Object.assign(this, options)然后赋值操作  
      if(key in options){
        this[key] = options[key]
  update(){
    console && console.error && console.error('你还未实现 update')
}

2. 表驱动编程

表驱动方法(Table-Driven Approach)是一种使你可以在表中查找信息，而不必用很多的逻辑语句（if或case）来把它们找出来的方法。简单的说就是用哈希表来获取值。

表驱动编程将代码中的有效信息存储在hash表中，以突出重点信息，降低复杂度。通过对hash表的遍历操作使用表中数据（或者函数等），实现对代码的简化，有效控制代码的复杂度。

getweek(value){
    this.dayOfWeek = value;
    if(this.dayOfWeek == 1){
        this.Week = "星期一";
    }else if(this.dayOfWeek == 2){
        this.Week = "星期二";
    }else if(this.dayOfWeek == 3){
        this.Week = "星期三";
    }else if(this.dayOfWeek == 4){
        this.Week = "星期四";
    }else if(this.dayOfWeek == 5){
        this.Week = "星期五";
    }else if(this.dayOfWeek == 6){
        this.Week = "星期六";
    }else if(this.dayOfWeek == 0){