我理解的MVC

never_abandon
234 阅读4分钟

先导

今天我们将会为大家介绍:

  1. MVC
  2. EventBus
  3. 表驱动编程
  4. 我对模块化的理解

MVC

何为MVC?
M- Model:负责操作所有的数据
V- View:负责所有UI界面
C- Controller:负责所有其他的内容
MVC其实是一种设计模式,我们将一系列复杂且重复的操作都分开来进行进一步的封装,那么肯定会有人问了,我只要能完成业务需求不就行了,管它封不封装呢,这样确实完成了需求,但是当公司后期业务需要调整时,将会异常的繁琐,你写的代码就变成了面条式代码.下面将会简单的给出伪代码来供大家理解mvc设计模式

const m = {
  data: {
    index: parseInt(localStorage.getItem(localKey)) || 0
  },
  create() {},
  delete() {},
  update(data) {
    Object.assign(m.data, data)
    eventBus.trigger('m:updated')
    localStorage.setItem('index', m.data.index)
  },
  get() {}
}

由于M是负责操作数据的,我们将我们所需要的变量index存入到了m对象中,这就是Model

const v = {
  el: null,
  html: (index) => {
    return `
    <div>
      <ol class="tab-bar">
        <li class="${index === 0 ? 'selected' : ''}" data-index="0"><span>1111</span></li>
        <li class="${index === 1 ? 'selected' : ''}" data-index="1"><span>2222</span></li>
      </ol>
      <ol class="tab-content">
        <li class="${index === 0 ? 'active' : ''}">内容1</li>
        <li class="${index === 1 ? 'active' : ''}">内容2</li>
      </ol>
    </div>
`
  },
  init(container) {
    v.el = $(container)
  },
  render(index) {
    if (v.el.children.length !== 0) v.el.empty()
    $(v.html(index)).appendTo(v.el)
  }
}

由于V是负责操作视图的,我们将所需要的添加的html文件以及渲染的函数封装到了V对象中

const c = {
  init(container) {
    v.init(container)
    v.render(m.data.index) // view = render(data)
    c.autoBindEvents()
    eventBus.on('m:updated', () => {
      v.render(m.data.index)
    })
  },
  events: {
    'click .tab-bar li': 'x',
  },
  x(e) {
    const index = parseInt(e.currentTarget.dataset.index)
    m.update({index: index})
  },
  autoBindEvents() {
    for (let key in c.events) {
      const value = c[c.events[key]]
      const spaceIndex = key.indexOf(' ')
      const part1 = key.slice(0, spaceIndex)
      const part2 = key.slice(spaceIndex + 1)
      v.el.on(part1, part2, value)
    }
  }
}

C代表的是其他的一些操作,我们在这里放入了绑定事件,以及初始化事件.
在MVC中我们遵循最小知识原则,原则如下:
引入一个模块需要引入 html css js↓
引入一个模块需要引入 html js↓
引入一个模块需要引入 js
至此可能用户只会看到一个js的文件,其他的文件都被我们通过export import 导入导出的方式放到了我们的js代码中,即可实现网页的展示
大家可以清晰的看到,我们将每一个部分都各自的抽成了一个模块,当我们需要改动数据,或者需要修改绑定事件时只需要去对应的位置进行修改即可,这就是MVC设计模式

EventBus

在jquery中有很多的事件,我们可以将该事件抽成一个eventbus 事件总线中去使用.EventBus主要用于对象间通信 这是$(window)显示出来的内容,以下我们通过代码模拟一下常见api

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

表驱动编程

当发现自己写的代码,有很多的地方都是重复的时候,就要想办法看看哪些才是最重要的内容,然后将其他重复的内容抽离出来做成哈希表,通过遍历的形式完成事件的绑定,举例代码如下

let $normal = {
  'click #add1': 'add',
  'click #decrease': 'dec',
  'click #double': 'dou',
  'click #divide': 'div',
}
for(let key in $normal) {
  const value = $normal[key]
  const spaceIndex = key.indexOf(' ')
  const part1 = key.slice(0, spaceIndex)
  const part2 = key.slice(spaceIndex + 1)
  v.el.on(part1, part2, value)
}

将绑定事件中重复的内容抽离出来,然后通过循环重复的进行绑定,这就是我对表驱动编程的理解,对每个节点都绑定一个click事件,事件的回调函数为相应的value值

我对模块化的理解

MVC是一个很好的设计模型,模块化的概念其实就是将每一个部分都抽成一个独自的仓库,在这个仓库内做着属于自己的事情,模块化的好处有很多,若在模块中我们都采用的是jquery的库,若以后公司不使用该库,我们可以直接修改对应的模块即可,倘若全都在一个js文件中,极其的不利于我们的修改,同时还增加了我们对代码的复用性,若有哪个地方需要用到一个独立的类,或者方法直接import导入即可使用

总结

若有一直看我的博客的读者会发现,我们从简单的js,css逐渐的上升了难度,未来我们的博客还会写一些promise,ajax,跨域等内容,我们的知识需要不断的更新,希望这篇MVC对大家理解前端模块化会有所帮助!
记得持续学习,不断跟进!加油!

avatar
文章
阅读
粉丝