- 如何简单理解MVC?
MVC是一种编程概念,标准讲法是一种架构设计模式。它来源于后端,即前端借鉴后端的概念去组织或者设计前端的代码,导入模块化编程思想。
MVC拆解如下:- Model(数据模型) - 管理程序的数据
- View(视图) - 模型的直观表示
- Controller(控制器) - 链接用户和系统
// M 处理数据,并在数据更新触发"m:updated"
const m = {
data: {
n: parseInt(localStorage.getItem("n"))
},
update(data) {
Object.assign(m.data, data);
eventBus.trigger("m:updated");
localStorage.setItem("n", m.data.n);
};
// v 渲染HTML
const v = {
el: null,
html: `<div >
<div class="output">
<span id="number">{{n}}</span>
</div>
</div>`,
render(n) {
if (v.el.children.length !== 0) {
v.el.empty();
}
$(v.html.replace("{{n}}", n)).appendTo(v.el);
}
};
// c 连接M和V,接收到M的触发定"m:updated"后绑定触发事件,调用V中的render对HTML渲染。
const c = {
init() {
eventBus.on("m:updated", () => {
v.render(m.data.n);
});
}
};
学习MVC,就是要用这种概念去将JS中的代码归类放入不同的模块里面。这样理解别人的代码,或者修改自己的代码都比较直观,就像图书馆的书一样分门别类,才不至于摸不着头脑。
- 了解MVC,还要掌握到哪些新知识?
首先,把MVC设计为三个独立对象,怎么串联呢,故引入EventBus来进行两个组件间的通信。 使用方法和例举相关API如下:
const eventBus = $(window);
eventBus.on //绑定事件
eventBus.trigger //触发事件
eventBus.off //解除绑定事件
其次,学习MVC,还要改变单纯的if...else思想,利用对象和属性优化代码,在代码重复率高的多项选择可以采用表驱动编程。凡是能通过逻辑语句来选择的事物,都可以通过查表来选择。这是一个新的概念,直接举例说明:
const c ={
//建立表单
events: {
"#add1": "add",
"#minus1": "minus",
"#mul2": "mul",
"#divide2": "div"
},
// 四个待调用函数
add() {
m.update({ n: m.data.n + 1 });
},
minus() {
m.update({ n: m.data.n - 1 });
},
mul() {
m.update({ n: m.data.n * 2 });
},
div() {
m.update({ n: m.data.n / 2 });
},
//表单驱动调用函数,依据不同的触发进行函数调用
autoBindEvents() {
for (let key in c.events) {
const value = c[c.events[key]];
v.el.on("click", key, value);
}
}
};
最后,要学习一劳永逸的编程思想,即代码设计成模块化,代码重构,方便理解,使代码具有良好的可移植性。简单来说就是对一个功能实现后,可以给类似的地方直接用,而不需要去修改代码内部。即使后续优化,模块化的代码也更容易增删改查。