MVC以及表驱动

114 阅读1分钟

MVC

MVC主要是由模型(Model),视图(View)和控制器(controller)三部分组成。

  • Model:用于储存程序中使用到的数据
  • View:用不同的表现形式来呈现数据
  • Controller:更新模型 代码示例如下:
import $ from 'jquery'
const v = {
  html = `
  <button id='btn1'>{{data}}</button>
`
$(v.html.replace('{{data}}',m.data)).qppendTo($('section'))
}
const m = {
  data :1
}
const c = {
  const $btn1 = $('btn1')
  c.$btn1.on('click',()=>{
  m.data+=1
})
}

可以看出,关于视图的内容全部放在v里面,然后m里面保存了按钮的数据,c控制模型内容然后更新模型

EventBus

EventBus主要用于对象之间的通信,且可以保证m和v之间在不知道对方细节的情况下调用对方的方法

  1. eventBus的api
import $ from 'jquery'
const eventBus = $({})
console.log(eventBus)

其中比较典型的有on方法,trigger方法等 on方法可以监听事件是否触发,trigger表示事件触发了,代码示例

const m = {
  data: n
  update(data){
  	Object.assign(m.data,data)
    eventBus.trigger('m-updated')
  }
}
const v ={
	render(){
    }
}
const c ={
	init(){
    	eventBus.on('m-updated',()=>{
        v.render()
        })
    }
}

表驱动编程是做什么的(可以自己查查资料)

表驱动法编程就是从表里面查找信息,而不使用逻辑语句,当伴随着逻辑链越来越复杂,查表法就越发的清晰明了,代码示例

events :{
'#btn1':'+1'
'#btn2':'-1'
'#btn3': '*2'
'#btn4': '/2'
}

我是如何理解模块化的

模块化就是将一个复杂的程序抽出其中的公共方法或属性,把它单独封装成几个模块文件,然后把接口暴露在外面,使得其他的模块可以调用这个接口,进而操控里面的方法或属性,这样一是可以保护数据,使得各个模块不会互相篡改数据,然后避免命名冲突等,此外模块化也增加了代码的可读性