• 模型model用于封装与应用程序的业务逻辑相关的数据以及对数据的处理方法，会有一个或多个视图监听此模型。一旦模型的数据发生变化，模型将通知有关的视图。

    1. //示例
    2. let Model={
    3.   data:{数据源},
    4.   create:{增加数据},
    5.   delete:{删除数据},
    6.   update(data){
    7.       Object.assign(m.data,data)//用新数据替换旧数据
    8.       eventBus.trigger('m:update')//eventBus触发'm:update'信息，通知View刷新界面
    9.   },
    10.   get:{获取数据}
    11. }

  • 视图view是它在屏幕上的表示，描绘的是model的当前状态。当模型的数据发生变化，视图相应地得到刷新自己的机会。

    1. //示例
    2. let View={
    3.   el:要刷新的元素，
    4.   html：'要显示在页面上的内容'
    5.   init(){
    6.       v.el:需要刷新的元素
    7.   }，
    8.   render(){
    9.       刷新页面
    10.   }
    11. }

  • 控制器controller定义用户界面对用户输入的响应方式，起到不同层面间的组织作用，用于控制应用程序的流程，它处理用户的行为和数据model上的改变。

    1. //示例
    2. let Controller={
    3.   init(){
    4.       v.init()//初始化View
    5.       v.render()//第一次渲染页面
    6.       c.autoBindEvents()//自动的事件绑定
    7.       eventBus.on('m:update',()=>{v.render()}//当enentsBus触发'm:update'是View刷新
    8.   }，
    9.   events:{事件以哈希表的方式记录存储},
    10.   method(){
    11.       data=新数据
    12.       m.update(data)
    13.   },
    14.   autoBindEvents(){自动绑定事件}
    15. }

    <br />

    EventBus的作用

    模块通信

    解决模块之间通信的问题，view组件层面，父子组件、兄弟组件通信都可以使eventbus处理

    模块解耦

    storage change事件，cookie change事件，view组件的事件等，全部转换使用Event Bus来订阅和发布，这样就统一了整个应用不同模块之间的通信接口问题。

    父子页面通信

    1. window.postMessage + Event Bus

    多页面通信

    1. storage change + Event Bus

    EventBus的一些常用api

    1. on（监听事件）
    2. trigger（触发事件）
    3. off（取消监听）
    4. eventBus.trigger('m:updated') // 触发事件,大叫'm 已经更新了'
    5. eventBus.on('m:updated', () => { console.log('here') }) '监听事件，听
    6. 到后执行函数'

    模块化

    在一个完整的页面应用中，不同的节点功能，不同的结构可以规划为多个模块，每个模块的实现的方式以及用到的技术大不相同，使用模块化编程可以减小各个模块之间的影响和联系，可以更方便的优化代码和重构代码，提高我们代码的重用性，便于后期维护