MVC笔记

MVC是什么

• MVC（Model-View-Controller）模式是软件工程中的是一种架构设计模式，把软件系统分为三个基本部分：模型（Model）、视图（View）和控制器（Controller）。MVC这一理念来源于后端的框架构建思想，是一种软件设计典范，用一种业务逻辑、数据、界面显示分离的方法组织代码，将业务逻辑聚集到同一个部件里面，在改进和个性化定制界面及用户交互的同时，无需再重新编写业务逻辑。

• Model-数据模型：负责操作所有数据，用于封装与应用程序的业务逻辑相关的数据以及对数据的处理方法。

  // Model层
  let Model = {
      data:{ }; // 需要用到的数据
      create:{ }; // 增数据
      delete:{ }; // 删数据
      update:{ }; // 更新数据
      get:{}; // 获取数据
  }
  

• View-视图：负责所有UI界面的布局和显示，用于处理控制器里的HTML资料并且将它们插入DOM中，能够实现数据有目的的显示以及访问它监视的数据模型。

  // View层
  let View = {
      el:null,
      html:`......` // 视图模板
      init(){ }, // 初始化页面
      render(){ } // 刷新页面
  }
  

• Controller-控制器：负责连接视图和模型，用于处理业务逻辑操作&处理事件并做出响应。

  // Controller层
  let Controller = {
      init() {
          v.init() // 初始化View 
          v.render() // 第一次渲染页面 
          c.autoBindEvents() // 自动的事件绑定 
          eventBus.on('m:update', () => {
              v.render()
          }  // 当EventsBus触发'm:update'时，View刷新 
      }
      events: { }, // 事件以哈希表的方式记录存储
      method() {
          data = // 改变后的新数据
          m.update(data)
      }
      autoBindEvents() { }; // 自动绑定事件
  }
  

EventBus是什么

• EventBus即事件总线，可以简化组件之间的监听和通信。当 Model 模块中的数据更新，触发了 EventBus 上的某个事件，而 Controller 恰好在监听这个事件，na那么这个事件触发时，Controller 就知道 Model 中的数据发生了更新了，从而做出相应反应。

• Eventbus的API

  • EventBus.on() 监听事件：当 m:updated 触发时，执行一些内容

    EventBus.on(eventName,callback) // 参数1-事件名，参数2-事件函数
    const eventList = {};
    EventBus.on = (eventName,callback)=>{
        if(!eventList[eventName]){
            eventList[eventName] = []
        } 
        eventList[eventName].push(callback) 
        // 判断事件名存在与否，若不存在则创建一个key值为事件名
    }
    

  • EventBus.trigger() 触发事件：当一个事件执行，eventBus 触发 m:updated

    EventBus.trigger(eventName,[params]) // 参数1-事件名称 参数2-[需要传递的参数]
    const eventList = {};
    EventBus.trigger = (eventName,params)=>{
        if(eventList[eventName]){
             let arr = eventList[eventName];
             arr.map((cb)=>{
                 cb(params)
             })
        } 
        // 判断当前事件的名称是否存在，如果存在则遍历数组，得到所有的函数，并执行，然后将params当做实参传递到函数中去
    }
    

  • EventBus.off() 解绑事件：取消监听

    EventBus.off(eventName,[callback]) // 参数1-事件名称，参数2-[事件函数]
    const eventList = {};
    EventBus.off = (eventName,callback)=>{
        if(eventList[eventName]){
              if(callback){
                     let index = eventList[eventName].indexOf(callback);
                     eventList[eventName].splice(index,1)
               }
        }else{
               eventList[eventName].length = 0; // 如果不存在则将整个数组清空
        }
        //判断当前事件名称是否存在，如果存在继续判断第二个参数是否存在，如果存在则找到相对应的下标，然后将函数在数组中移除
    }
    ​
    

表驱动编程

• 一种编程模式，从表里面查找信息而不使用逻辑语句(if 和case)。凡是能通过逻辑语句来选择的事物，都可以通过查表来选择。

• 使用方式：

  • 直接访问：将数据作为键值直接访问表
  • 索引访问：先用一个基本数据类型的数据从一张索引表中查出一个键值，然后再用这一键值查出你需要的主数据。
  • 当表的数据与键值不一致时，可以：（1）复制表的数据使其与键值一一对应，变成直接访问；（2）创建一个索引，与表数据对应，查询时将键值转换成索引，变成索引访问。

• 举个例子

  // 设置日期
  const day = new Date().getDay()
  let day_zh;
  if (day === 0) {
      day_zh = '1号'
  }else if (day === 1) {
      day_zh = '2号'
  }
  ...
  else {
      day_zh = '31号'
  };
  case 0:
    day_zh = '1号'
    break;
  case 1:
    day_zh = '2号'
    break;...
  }
  
  // 把这些数据存到一张表里面，简单方便。
  const mouth = ['1号', '2号',..., '31号'] 
  const day = new Date().getDay()
  const day_zh = mouth[day]
  

模块化

• 模块化是将一个复杂的程序依据一定的规范封装成几个块/文件并进行组合。模块内部数据的实现是私有的，只是向外部暴露一些接口从而可以跟外部其他模块通信。将代码模块化就是将代码分门别类归纳好，同种功能的代码放在一起归置好，待到要使用时再引入这段代码，就不需要重复写相同逻辑的代码了。
• 三个模块之间不会相互影响；多个View能共享一个Model，提高代码的可重用性；Controller 是自包含的对象，与 Model 和 View 保持相对独立，可以方便的改变应用程序的数据层和业务规则，从而提高了应用程序的灵活性和可配置性。