MVC没有严格的定义,M - Model(数据模型,负责封装数据以及数据的处理方法) V - View(视图,负责所有UI界面) C - Controller(控制器,负责处理用户的行为和数据的改变)
伪代码示例
//M封装了数据及其处理方法等
m: {
data: () {};
create: () {};
delete: () {};
update: () {};
get: () {}
}
//V保存页面元素、初始化方法和重新渲染方法等
v: {
el: null;
init: (){};
render: (){}
}
//C控制程序的流程,处理用户行为和数据改变等
c: {
events: {};
init: () {};
autoBindEvents: () {}
}
EventBus
EventBus在MVC中的作用在于可以使不同的对象之间进行通讯。
//C对象中监听事件
c.eventBus.on(event)
//M对象中触发事件
m.eventBus.trigger(event)
表驱动编程
表驱动方法是一种使你可以在表中查找信息而不用使用逻辑语句来把他们找出来的方法。事实上任何信息都可以用表来选择,在简单的情况下,逻辑语句往往更简单直接,但是随着逻辑链的复杂,表的意义(数据与逻辑分离)便逐渐体现出来。
在MVC模式中,当类似的函数执行了多次,而他们只有参数和方法不同,那我们就应该把参数和方法抽出来,放到一个哈希表里再去遍历他。这样,我们通过观察哈希表,就可以大致知道这一模块的作用,同时避免了重复代码的出现。
c: {
//将事件写到一个表里
events: {
'click #add': add;
'click #minus': minus;
'click #mul': mul;
'click #divide': div
};
//遍历哈希表
autoBindEvents: () {
forEach(key in c.events) {}
}
}
模块化
模块化可以简单理解为对于复杂代码的隔离、封装等操作。
当一系列代码共同实现某项功能时,可以把他们单独放到一个文件里,再在另一个文件中引入。
好处:
- 代码规范。代码文件各自实现自身功能,再层层引入,更加规范。
- 视觉简洁。主要文件引入次级文件,无冗余代码,一目了然。
- 维护方便。后期维护时,不仅方便找到对应功能的代码,而且需要改动的地方也大大减少。
同样在MVC模式中,可以在一功能模块中暴露出一个接口,在上级模块调用并传入数据。
网友评论