MVC的三个对象

MVC即Model, View, Controller的缩写，它是一种设计模式。 MVC认为程序可以被分为三个大的类。使用MVC的目的是将M和V的实现代码分离，从而使同一个程序可以使用不同的表现形式

Model Model中封装了与程序有关的数据及其方法

Model = {
    data: { //存储数据 }，
    create: { //增 },
    delete: { //删 },
    update(data) { //改
       Object.assign(m.data, data) 
       eventBus.trigger('m:upate') // eventBus触发'm:update'信息, 通知View刷新 
    },
    get:{ //查 } 
}

View View是对数据的展示，展示的内容就是Model中的data

View = {
    el: //待渲染的元素
    html: `<div> ... <div> `
    init(){
        v.el: 
    },
    render(){ //渲染 }
}

Controller 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

常用的API

on --对事件添加监听
trigger --用于触发事件
off--取消监听

eventBus.on('xxx', () => { console.log('你被监听了！') }) //监听事件，听到后执行函数
eventBus.trigger('hello') // 触发事件
eventBus.off('xxx') //取消监听

表驱动编程

表驱动方法是一种使你可以在表中查找信息，而不必用重复多次的语句来把他们找出来的方法。事实上，任何信息都可以通过表来挑选。

function eatWhat(day) {
    if (day === '周一') {
        return '米饭'
    } else if (day === '周二') {
        return '面条'
    } else if (day === '周三') {
        return '大便'
    } else if (day === '周四') {   
        // 此处添加了一个新的名词翻译
        return '西北风'
    } else if (day==='周五'){
    	return '外卖'
    }
}

function eatWhat(day){
	let days={
    	'周一':'米饭'，
        '周二':'面条',
        '周三':'大便',
        '周四':'西北风',
        '周五':'外面',
        //直接在表里添加
    }
    if(day in days){
    	return days[day]
    }
    
}

好处

提高了程序的可读性
减少了重复代码
更强的可扩展性

模块化的理解

模块化可以使得程序员专注于每个模块的内容
模块化可以降低代码耦合度
模块化使得程序更容易维护，哪里出错了就去哪个模块该BUG
模块化使得代码的可利用率变高
不同模块可以使用不同的技术，不用担心每个人技术不同

浅析MVC

MVC的三个对象

EventBus

表驱动编程

模块化的理解