浅析MVC

2022-08-11  本文已影响0人  饥人谷_折纸大师

MVC是什么

每一个模块可以写成三个对象，分别是M、V、C
M——Model（数据模型），负责操作所有数据
V——View（视图），负责所有UI界面
C——Controller（控制器），负责其他

其中涉及到的一些抽象思维

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

const m = {
  data: {数据A},
  create() {},
  delete() {},
  update(data) {
        Object.assign(m.data,data)//用新数据替换旧数据
        eventBus.trigger('m:update')//eventBus触发'm:update'信息，通知View刷新界面
},
  get() {数据A}
}

View：是应用程序处理应用数据显示的部分。
它是在屏幕上面表示，描绘的是Model当前的状态。当模型的数据发生变化，相应的得到刷新自己的机会。

const v = {
  el: 需要刷新的元素,  
  html: `
       body里面的内容
`,
  init(container) {
    v.el = $(container)
  },
  render(n) {刷新页面}
}

Controller：是应用程序处理人机交互的部分。
Controller定义用户界面对用户输入的响应式，起到不同层面间的组织作用，用于控制应用程序的流程，它处理用户的行为和数据Model上的变化。

const c = {
  init(container) {
        v.init()//初始化View
        v.render()//第一次渲染页面
        c.autoBindEvents()//自动的事件绑定
        eventBus.on('m:update',()=>{v.render()}//当enentsBus触发'm:update'是View刷新
    },
  events: {},   //事件以哈希表的方式记录存储
  add() {},
  minus() {},
  mul() {},
  div() {},
  autoBindEvents() {自动绑定事件}
}

EventBus

const eventBus = $(window)
eventBus.trigger('m:update') // 自动触发事件update
eventBus.on('m:update', () => {console.log('触发';)}) //监听事件 然后执行函数

表驱动编程

表驱动编程的意义在于逻辑与数据的分离

表驱动方法是一种使你可以在表中查找信息，而不必用逻辑语句（if 或 case）来把他们找出来的方法。事实上，任何信息都可以通过表来挑选。在简单的情况下，逻辑语句往往更简单而且更直接。但随着逻辑链的复杂，表就变得越来越富于吸引力了。

使用if-else

function translate(term) {
    if (term === '1') {
        return '一'
    } else if (term === '2') {
        return '二'
    } else if (term === '3') {
        return '三'
    } else {
        return '？？？'  
    }
}

// 如果想添加一个新的名词翻译，需要再添加一个if-else逻辑，例如：
function translate(term) {
    if (term === '1') {
        return '一'
    } else if (term === '2') {
        return '二'
    } else if (term === '3') {
        return '三'
    } else if (term === '4') {   
        // 此处添加了一个新的名词翻译
        return '四'
    } else {
        return '？？？'  
    }
}

如果使用表

function translate(term) {
    let terms = {
        '1': '一',
        '2': '二',
        '3': '三'
    }
    return terms[term];
}

// 如果想添加一个新的名词翻译，只需要在terms中添加一个新的表项，不需要修改整个逻辑
function translate(term) {
    let terms = {
        '1': '一',
        '2': '二',
        '3': '三'
        '4': '四'   // 添加一个新的名词翻译
   
    return terms[term];
}

显而易见，容易了很多。根本不用修改代码逻辑。

模块化的理解

上一篇下一篇

猜你喜欢

热点阅读