mvc_中_表驱动,eventBus

上文链接:mvc-1

项目链接:mvc-2

主要内容

使用mvc的思想,来重构代码 隐藏细节,暴露接口

简介

MVC 是一种框架型模式，它可以实现应用程序的模型和视图相分离，提高开发和维护效率。 可以让前端人员只负责视图部分，后端负责控制器和数据部分，简化了前后端的协作。MVC 可以实现视图层的重复利用，减少代码的冗余。 改模式的创新就是将数据就是渲染, 更改了数据,就重新替换下container里的内容

重构#app1

app.js

• 将数据方法m
• 视图的方法v
• 控制和其他c
• 最后暴露出一个接口

流程:

main > init > render > autoBindEvent > eventBus

init

我们暴露一个接口给main, 从main里面给接口传入一个容器, 就是#app1

1. v.init 我们记住容器.
2. v.render(m.data.m) 获取数据,渲染页面
3. autoBindEvents() 绑定事件
4. eventBus

render

渲染就是获取更新的数据, 插入模板, 然后替换掉容器里的内容

• html 就是模板
• v.el 就是容器东西

每次渲染判断容器是否有内容, 有则替换掉,没有就添加,将新的html appendTo 到容器内

autoBindEvent

绑定事件存在重复

由于渲染视图后会失去事件的绑定, 我们将事件绑定不会变的container容器上 由于绑定事件里有大量的重复,这里使用表驱动.

我们将多有的事件写到一个对象, key 是事件名 对象 , value是触发的函数

循环Events 给所有的button 都绑定了事件

触发函数存在重复

按钮只变更了 m.data.n,然后就是渲染 这个函数可能重复四次,使用eventBus eventBus 有on用来监听, trigger 用来触发事件, 那我们每个事件触发同一个事件

update({n:m.data.n += 1 }),

传我们更改后的数据,然后由eventBus.trigger()触发事件

触发事件: Object.assign(a, b) 回想b里的可枚举属性,复制到a里,重复会更新. 监听事件: 监听事件会统一触发render()渲染

重构#app2

#app2.js

让我们重复一次刚才的流程:

init > render > autoBindEvent > eventBus

1. 暴露接口

2. 渲染页面

3. 绑定事件

4. eventBus

el: 容器里的东西 html: 一个函数接受参数 init: 初始化el

绑定事件

表驱动 autoBindEvents绑定 eventBus监听 eventBus触发