浅析 MVC

68 阅读3分钟

MVC 三个对象分别做什么,给出伪代码示例 EventBus 有哪些 API,是做什么用的,给出伪代码示例 表驱动编程是做什么的(可以自己查查资料) 我是如何理解模块化的

1. MVC 的基本概念

MVC 包括三类对象,将他们分离以提高灵活性和复用性。

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

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

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

image.png

2. EventBus

JS 实现时间总线的本质就是发布-订阅模式,达成任意组件间相互通信的作用。在一个地方触发(发布)事件,然后通过事件中心通知所有订阅者(订阅)。 其原理可以简单总结为:

  • 先放一个总的事件对象,管理所有事件(EventList);
  • 每次执行$on 的时候,都会在 EventList 对应事件的回调函数列表中添加一项;
  • 每次执行$emit 的时候,会执行 EventList 对应事件的所有函数。

下面是简单的代码实现

//声明类
class EventBus(){
     constructor(){
       //定义事件总线对象
       this.eventList={};
  }
//监听,或者说是发布
  $on(event,fn){
      let  eventList=this.eventList[event];
      eventList? eventList.push(fn) : this.eventList[event]=[]
  }
//触发,订阅
  $emit(event,...arg){
    this.event[name]&&this.event[name].forEach(fn => {
                fn(...args)
            });
}
}

let  eventbus=new  EventBus();
eventbus.$on('sayHi',function(msg){
    console.log(msg)
});
eventbus.$emit('sayHi',Math.random())

3. 表驱动编程

表驱动方法(Table-Driven Approach)是一种使你可以在表中查找信息,而不必用很多的逻辑语句(if 或 case)来把它们找出来的方法。事实上,任何信息都可以通过表来挑选。在简单的情况下,逻辑语句往往更简单而且更直接。

简单讲是指用查表的方法获取值。 我们平时查字典以及念初中时查《数学用表》找立方根就是典型的表驱动法。在数值不多的时候我们可以用逻辑语句(if 或 case)的方法来获取值,但随着数值的增多逻辑语句就会越来越长,此时表驱动法的优势就显现出来了。

需求:假设 day 的起始值为 1,下面的代码就是为了输出某天是星期几

// 使用if else
function weekday(day) {
  if(day&7===0){
    return '星期天';
  }
  else if(day%7===2){
    return '星期二';
  }
  else if(day%7===3){
    return '星期三';
  }
  else if(day%7===4){
    return '星期四';
  }
  else if(day%7===5){
    return '星期五';
  }
  else if(day%7===6){
    return '星期六';
  }
}
// 使用表驱动
function week(days){
  let weekdays=['星期天','星期一','星期二','星期三','星期四','星期五','星期六'];
  return weekdays[days%7];
}

4. 对模块化的理解

模块化简单来说就是将一个完整的长篇代码文件根据功能进行划分成几个文件,这些文件各自负责一个独立的功能,各个文件组合起来实现一个完整的大功能,这就是模块化,每个负责独立功能的文件就是模块。

由于一开始 JavaScript 是在 web 页面需要的地方提供一定交互,所以一般不需要多大的脚本。但随着 JavaScript 脚本的复杂化,最新的浏览器已经开始原生支持 JavaSript 模块功能了。

目前 JavaScript 领域广泛使用的模块化规范包括,commonJs 规范、AMD 规范,CMD 规范以及 es6 的模块化标准