浅析MVC

时间:2021-1-18 作者:admin

一、MVC

MVC包括三类对象:

  1. 模型model用于封装与应用程序的业务逻辑相关的数据以及对数据的处理方法,会有一个或多个视图监听此模型。一旦模型的数据发生变化,模型将通知有关的视图。
const m = {
  data: {存储数据},
  create() {添加数据},
  delete() {删除数据},
  update(data) {         更新数据
    eventBus.trigger()    触发事件
  },
  get() {读取数据}
}
  1. 视图view是它在屏幕上的表示,描绘的是model的当前状态。当模型的数据发生变化,视图相应地得到刷新自己的机会。
const v = {
  el: 渲染标记,
  html: `页面内容`,
  init(){初始化页面},
  render(){渲染页面}
}
  1. 控制器controller定义用户界面对用户输入的响应方式,起到不同层面间的组织作用,用于控制应用程序的流程,它处理用户的行为和数据model上的改变。
const c = {
  init() {                
    v.init(container)           初始化view
    v.render()                 第一次渲染
    c.autoBindEvents()            自动绑定事件
    eventBus.on(){}            监听事件
    },
  events: {哈希表记录事件},
  autoBindEvents() {自动绑定事件}
}

二、EventBus

EventBus事件总线,可以用来进行组件之间的监听和通信。

  • 初始化
import $ from 'jquery'
const eventBus = $(window)
  • api:eventBus.trigger():触发事件;eventBus.on(){}:监听事件;eventBus.off(){}:解除事件
const m = {
    ...
   update(data) {
   ...
    eventBus.trigger('m:updated')        //在更新数据时触发事件
  },
const c = {
      ...
    eventBus.on('m:updated', () => {v.render(m.data.n)})
  },        //接收事件,事件触发就执行后面的函数
  const

  eventBus.off('m:updated')        //移除事件

三、表驱动编程

简单来说,就是以查表的方式获取数据而不使用逻辑语句。事实上,凡是能通过逻辑语句来选择的事物,都可以通过查表来选择。
从表中查询数据主要有直接访问、索引访问、阶梯访问三种方式。

例:今天星期几

const day = new Date().getDay()
let day_zh;
if(day === 0){
    day_zh = '星期日'
}else if(day === 1) {
    day_zh = '星期一'
}
...
else{
    day_zh = '星期六'
}

// 或者 用 switch case
switch(day) {
    case 0:
        day_zh = '星期日'
        break;
    case 1:
        day_zh = '星期一'
        break;
        ...
}

使用表驱动法,将数据放在一个表里

const week = ['星期日', '星期一',..., '星期六']
const day = new Date().getDay(
const day_zh = week[day]

四、如何理解模块化的

模块化就是将一个复杂的程序,通过一定规则封装成不同的模块,可以是对象、文件等。降低代码耦合度,各个模块有更好的独立性。这样做可以解决项目中的全局变量污染的问题,使开发效率更高,方便代码复用和维护 。

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。