MVC用来简化页面内容更新的写代码的设计模式.
使得操作方式与dom操作相比,复杂度更加稳定.
M(Model):数据模型
数据全都归它管,和数据相关的都放在这里
大概长这个样子
const m = { 获取数据(){ 获取数据 }, 储存数据(){ 储存数据 }, 增(){}, 删(){}, 改(){}, 查(){}//等一系列方法}
可以看到都是和数据有关系的功能,
V(View):视图
能看见的部分都归它管,视图相关都放在这里
const v = { el:"视图上已经存在用来装字符串模板的容器,一般是一个div" html:"视图字符串模板", 渲染(){ 把模板渲染到视图上 }}
C(Controller):控制器
M和V不管的,它都管比如:事件绑定,数据存储之类的
const c = { 初始化(){ v.渲染() c.绑定事件() }, 有关事件绑定的信息:{ 绑定主体1 : 事件1, 绑定主体2 : 事件2, }, 绑定事件(){ 把事件绑定到相应主体上 }, 事件1(){ 做一些事情 }, 事件2(){ 做一些事情 }, }
以上是MVC的简要介绍
主要的思路就是在数据发生变化的时重新渲染视图,减少了从页面获取dom元素再把它放回去的步骤
那么如果监听数据变化呢?
这里就可以用到eventBus了
EventBus
import $ from 'jquery'const eventBus = $({})
我们借用一下jQuery对象
一个jQuery对象同时拥有监听事件的方法和触发事件的方法,我们可以利用它做个监视器~
比如我们在m的改方法里加一个事件触发
改(){ 修改了一些数据; eventBus.trigger("修改啦")}
然后在c中监听这个事件
初始化(){ v.渲染(数据) c.绑定事件() eventBus.on("修改啦", () => { v.渲染(数据) })}
这样一旦调用改方法,就会触发"修改啦"这个事件,改事件被捕获就会重新渲染页面
有空还是要自己实现一下MVC就先写伪代码理解一下.
另外,下面是,一些提高代码效率的方法:
表驱动编程
所谓表驱动法(Table-Driven Approach),是指用查表的方法获取值。
这种方法的优点是:
1、可读性强,处理流程一目了然
2、更容易修改,增加新的消息时只要修改数据,不需要修改流程
3、重用,可以将相同的逻辑提取出来,将变化写在数据里
模块化
模块话就是将一个复杂的程序依据一定的规则封装成文件, 根据需要组合使用
它有一下优点: