浅谈MVC

317 阅读1分钟

image.png

1、MAC到底是个啥呢?

MVC (Model-View-Controller) 是一种软件设计模式,它强调分离软件的业务逻辑和显示,这种“分离”提供了更好的分工和改进的维护。

M-model:负责所有数据的操作
// 数据相关都放到m
const m = {
  data: {},
  create() {},//增
  delete() {},//删
  update(data) {},//改
  get() {}//查
}
V-view:负责所有用户能够看见的界面
// 视图相关都放到v
const v = {
  el: null,
  html: `代码`,
  init(container) {
    v.el = $(container)
  },
  render(n) {}
}
C-controller:是连接视图和模型桥梁,处理业务逻辑操作,它处理事件并作出响应(也可以理解为不是数据和界面的东西都放这里面)
const c = {
  init(container) {},
  events: {},
  add() {},
  autoBindEvents() {}
}

2、EventBus 有哪些 API,以及它的作用是啥?

EventBus中常用API分别是:on、trigger、off on:用来监听事件

this.on('m:updated', () => {
      this.render(this.data)
    })

trigger:用来自动触发事件

update(data) { Object.assign(m.data, data)//把传进来的data直接放在m.data上
eventBus.trigger('m:updated')//通过trigger自动更新数据 
localStorage.setItem('n', m.data.n)//储存数据

off:用来取消绑定事件

3、表驱动编程是做什么的?

表驱动编程是解决大量重复的代码,在进行重构时都会用数据结构里面哈希表以字符串的形式来存储重复的数据,需要用到里面的数据时,就遍历哈希表,去除对应的index即可,如下:

优化前:
$('#el1').on('A', fn1)
$('#el2').on('B', fn2)
$('#el3').on('C', fn3)
$('#el4').on('D', fn4)
$('#el5').on('E', fn5)
优化后:
const events = {
  "#el1 A": "fn1",
  "#el2 B": "fn2",
  "#el3 C": "fn3",
  "#el4 D": "fn4",
  "#el5 E": "fn5"
}

4、 浅谈模块化

模块化一般在工作的时候,比较方便同事之间项目的交接和沟通,当你在做一个前端项目时可以将css、js、以及各种导入的包分成一块一块的,在写代码的时候也不会考虑自己的代码是否对别人写的功能是否有影响。就是所谓的模块之间相互独立,互不影响,这样可以降低代码耦合度,减少重复代码,使得项目结构清晰,便于维护。