浅析 MVC

2022-07-21 68 阅读2分钟

一、MVC 三个对象的分别作用及伪代码示例

M - Model（数据模型）,数据模型，负责数据相关的任务

let Model = { 
data: { //数据源 }, 
create: { //增加数据 }, 
delete: { //删除数据 }, 
update(data) { //改数据
  Object.assign(m.data, data); //将data的值复制给m.data
  eventBus.trigger("m:update"); //eventBus触发'm:update'信息，通知View刷新界面
  localStorage.setItem('n', m.data.n)//存入数据
}, 
get: { //获取数据 },
};

V - View（视图）,负责用户界面

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

C - Controller（控制器）,负责监听用户事件，然后调用 M 和 V 更新数据和视图

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 的 API及API作用、伪代码示例

event bus（事件总线）,用于组件之间的监听与通信。
EvetBus API有三个，分别为EventBus.on()监听事件，EventBus.off()取消监听，EventBus.trigger()触发事件

EventBus.on() 监听事件 
EventBus.off() 取消监听 
EventBus.trigger() 触发事件

// 参数1:事件名称 参数2:事件函数 
eventBus.on('监听事件',()=>{}) 
// 参数1:事件名称 参数2:事件函数 
eventBus.off('监听事件',()=>{}) 
eventBus.trigger('m:updated') // 触发事件

三、表驱动编程

表驱动法，又称之为表驱动、表驱动方法。表驱动方法是一种使你可以在表中查找信息，而不必用很多的逻辑语句（if或Case）来把它们找出来的方法。事实上，任何信息都可以通过表来挑选。在简单的情况下，逻辑语句往往更简单而且更直接。但随着逻辑链的复杂，表就变得越来越富有吸引力了。
在JS中，表就是指的哈希表结构，使用表驱动编程，能使重复冗余的代码变的稳定简洁。
代码示例

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

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];
}

四、如何理解模块化

模块化是指将一个复杂问题，自上而下逐层把系统划分为若干模块的过程。模块化可以降低代码耦合度，减少重复代码，提高代码重用性，并且在项目结构上更加清晰，便于维护。