MVC 的三个对象
M - model(数据模型)
负责操作所有数据
const m = {
data: {数据},
create() {},
delete() {},
update(data) {
Object.assign(m.data,data)// 替换旧数据
eventBus.trigger('m:update')// eventBus触发'm:update'信息,通知View刷新界面 },
get() {数据} }
V - view(视图)
负责视图相关的内容, 提供操作界面
const v = {
el: 需要刷新的元素,
html: ` body里面的内容 `,
init(container) {
v.el = $(container) },
render() {刷新页面} // 渲染页面
}
C - Control(其他相关操作)
负责数据和视图以外的其他操作
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
相关的 API
on (监听事件)
eventBus.on('监听的内容',()=>{
监听后的操作
})
trigger (触发事件)
eventBus.trigger('监听的内容',)
off (取消事件)
eventBus.off('监听的内容')
表驱动编程
原理
将相对重要的数据放到 hash 表进行操作
作用
可以避免代码的重复
模块化
目的
把相关的功能整合到一个模块里,将各个功能分开来,这样操作其中任何一个功能的时候都不会影响其他的功能。