浅析 MVC

MVC 三个对象分别做什么

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

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

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

var Model= {
    data:{},    //绑定数据
    init: function(){},     //增删改查
    add: function(){},
    delete: function(){},
    get:: function(){}
}
var View={
    el:'',  //挂载元素
    init:: function(){},    //初始化
    template:'',            //模板
    render:: function(){}   //渲染函数
}
var controller = {
    init(): function{},         //初始化
    bindEvents: function(){},   //绑定事件
}

EventBus的作用

window.postMessage + Event Bus

storage change + Event Bus

1. 绑定事件 eventBus.on()

   eventBus.on("eventName",callback)
   //参数依次为 事件名，回调函数名

2. 触发事件 eventBus.emit()

   eventBus.emit("eventName",[...args])
   //参数依次为 事件名 参数数组

3. 解绑事件 eventBus.off()

   eventBus.off("eventName",callback)
   //参数依次为 事件名，回调函数名

表驱动编程

表驱动法是一种编程模式(scheme)——从表里面查找信息而不使用逻辑语句(if和case)。事实上，凡是能通过逻辑语句来选择的事物，都可以通过查表来选择。对简单的情况而言，使用逻辑语句更为容易和直白。但随着逻辑链的越来越发杂，查表法也就愈发显得更具吸引力。

if(flg==1){
    add1()
}
else if(flg==2){
    add2()
}
else if(flg==3){
    add3()
}
else if(flg==4){
    add4()
}
else{
    add5()
}

例如这段代码，就是典型的面条式的代码，为了提高了程序的可读性，减少了重复代码，降低了复杂度，我们一般使用表编程的方法对代码进行优化

var obj={
    1：add1,
    2: add2,
    3：add3,
    4：add4,
    5：add5,
}
obj[flg]()

模块化

模块化编程是非常重要的一种编程模式，优势如下

• 多人协作互不干扰
  模块化避免了变量污染，并且可以使得分工更加容易
• 灵活架构，焦点分离
  可以将独立的功能从主干中分离开来单独开发，增加效率
• 方便模块间组合、分解 、解耦
  降低各个功能模块间的耦合度，方便维护和管理
• 方便单个模块功能调试、升级