写代码啦
浅析 MVC
回复数(0) 浏览数(43)
{{topic.upvote_count || 0}} 编辑 回复

最近学习了 MVC,不得不说,学得感觉脑袋嗡嗡的,一团浆糊。为了能够比较好的理解,还是决定整理一下关于 MVC 的知识,让自己可以更好的理解 MVC。

MVC 三个对象

MVC 是一种设计模式。
1. M 是 数据层 Model,是程序需要操作的数据或者信息。

const M = {
data: {},
create() {},
delete() {},
update(data) {},
};

所有与数据有关的东西都整合到M里面。
2. V 是 视图层 View,是提供给用户的操作界面,是程序的外壳。

const V = {
el: null,
html: `<div class="html"></div>`,
render() {}
};

所有与视图相关的东西都放到 V 里面。
3. C是 控制层 Controller,它负责根据用户从"视图层"输入的指令,选取"数据层"中的数据,然后对其进行相应的操作,产生最终结果。

const C = {
init() {},
events: {
"click #add1": "add",
"click #minus1": "minus",
"click #mul2": "mul",
"click #divide2": "div"
},
add() {},
minus() {},
mul() {},
div() {}
}

所有业务逻辑都放到 C 里面。

这就是 MVC 三个对象的简单的一些说明,有些时候其实并不一定能确切地把一个东西具体分到哪个层里。每个人对 MVC 的理解不一样,所以代码整合的也会不同。

EventBus 有哪些 API,是做什么用的

说到 MVC,就不得不提到 EventBus。EventBus 是一种事件发布订阅模式,它能够很好地将事件的发起和事件的处理分隔开来。有几个常用的 API:
1. 绑定事件
eventBus.on(eventName, function[, obj]);
2. 触发事件
eventBus.trigger(eventName[, sender][, data]);
3. 解绑事件
eventBus.off(eventName[, function]);

表驱动编程

所谓表驱动,简单讲是指用查表的方法获取值。在数值不多的时候我们可以用逻辑语句( if/else 或 case )的方法来获取值,但随着数值的增多逻辑语句就会越来越长,此时表驱动法的优势就显现出来了。
我们上面 MVC 代码中的 C 就用了这个方法。

events: {
"click #add1": "add",
"click #minus1": "minus",
"click #mul2": "mul",
"click #divide2": "div"
}

如果这里使用 if/else 或 case 就显得特别的繁琐,但是如果使用表驱动,就非常的清晰明了。

模块化

上面所说的都是模块化编程的一些方式。模块化编程使得我们的代码结构更加清晰,也比较容易增加新功能,删减不需要的功能。使得我们的代码维护起来更加简单,不容易出错成片。希望自己能往这个方向努力,毕竟现在脑子一团浆糊,没有办法很好地掌握这个技能。

{{topic.upvote_count || 0}}

最近学习了 MVC,不得不说,学得感觉脑袋嗡嗡的,一团浆糊。为了能够比较好的理解,还是决定整理一下关于 MVC 的知识,让自己可以更好的理解 MVC。

MVC 三个对象

MVC 是一种设计模式。
1. M 是 数据层 Model,是程序需要操作的数据或者信息。

const M = {
data: {},
create() {},
delete() {},
update(data) {},
};

所有与数据有关的东西都整合到M里面。
2. V 是 视图层 View,是提供给用户的操作界面,是程序的外壳。

const V = {
el: null,
html: `<div class="html"></div>`,
render() {}
};

所有与视图相关的东西都放到 V 里面。
3. C是 控制层 Controller,它负责根据用户从"视图层"输入的指令,选取"数据层"中的数据,然后对其进行相应的操作,产生最终结果。

const C = {
init() {},
events: {
"click #add1": "add",
"click #minus1": "minus",
"click #mul2": "mul",
"click #divide2": "div"
},
add() {},
minus() {},
mul() {},
div() {}
}

所有业务逻辑都放到 C 里面。

这就是 MVC 三个对象的简单的一些说明,有些时候其实并不一定能确切地把一个东西具体分到哪个层里。每个人对 MVC 的理解不一样,所以代码整合的也会不同。

EventBus 有哪些 API,是做什么用的

说到 MVC,就不得不提到 EventBus。EventBus 是一种事件发布订阅模式,它能够很好地将事件的发起和事件的处理分隔开来。有几个常用的 API:
1. 绑定事件
eventBus.on(eventName, function[, obj]);
2. 触发事件
eventBus.trigger(eventName[, sender][, data]);
3. 解绑事件
eventBus.off(eventName[, function]);

表驱动编程

所谓表驱动,简单讲是指用查表的方法获取值。在数值不多的时候我们可以用逻辑语句( if/else 或 case )的方法来获取值,但随着数值的增多逻辑语句就会越来越长,此时表驱动法的优势就显现出来了。
我们上面 MVC 代码中的 C 就用了这个方法。

events: {
"click #add1": "add",
"click #minus1": "minus",
"click #mul2": "mul",
"click #divide2": "div"
}

如果这里使用 if/else 或 case 就显得特别的繁琐,但是如果使用表驱动,就非常的清晰明了。

模块化

上面所说的都是模块化编程的一些方式。模块化编程使得我们的代码结构更加清晰,也比较容易增加新功能,删减不需要的功能。使得我们的代码维护起来更加简单,不容易出错成片。希望自己能往这个方向努力,毕竟现在脑子一团浆糊,没有办法很好地掌握这个技能。

43
回复 编辑