MVC的三个对象
MVC是一种架构模式，它包含3个对象，分别是M,V,C，如下：
-
M-Model（数据模型）： 负责操作所有数据 -
V-View（视图）： 负责所以的IU界面 -
C-Controller（控制器）： 负责其他
M-Model
- 获取数据，对数据进行增删改查,用于后期操作数据。
const m = {
data: {
n: parseInt(localStorage.getItem("n")),
}, // 数据是什么
create() {}, //增
delete() {}, //删
update(data) {
Object.assign(m.data, data);
eventBus.trigger("m:updated");
localStorage.setItem("n", m.data.n);
}, //改
get() {}, //查
};
V-View
- 视图主要是渲染到页面上
const v = {
el: null, // 接受一个容器
html: `
<div>
<div class="output">
<span id="number">{{n}}</span>
</div>
<div class="actions">
<button id="add1">+1</button>
<button id="minus1">-1</button>
<button id="mul2">*2</button>
<button id="divide2">÷2</button>
</div>
</div>
`,
init(container) {
v.el = $(container);
}, //初始化
render(n) {
if (v.el.children.length !== 0) v.el.empty();
$(v.html.replace("{{n}}", n)).appendTo(v.el);
}, //渲染
通过if else判断容器的后代是否存在进行增删，最后渲染到页面
};
C-Controller
- 控制器里面主要放些事件的操作，负责处理 View 的事件,并更新Model,也负责监听 Model 的变化,并更新 View , Controller 控制其他所有流程
const c = {
//初始化
init(container) {
v.init(container);
v.render(m.data.n); //第一次渲染页面
c.autoBindEvents(); //自动绑定事件
eventBus.on("m:updated", () => {
console.log("here");
v.render(m.data.n);
}); //监听数据变化，重新渲染到页面
},
events: { //事件
"click #add1": "add",
"click #minus1": "minus",
"click #mul2": "mul",
"click #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]];
const spaceIndex = key.indexOf(" ");
const part1 = key.slice(0, spaceIndex);
const part2 = key.slice(spaceIndex + 1);
v.el.on(part1, part2, value);
}
},
};
EventBus
- EventBus主要用于对象间通信，EventBus是事件总线的意思，它是Google Guava库的一个工具，基于观察者模式可以做到进程内的代码解耦作用。
优势
-
简化了组件间的通讯。
-
分离了事件的发送者和接受者。
-
在Activity、Fragment和线程中表现良好。
-
避免了复杂的和易错的依赖关系和生命周期问题。
-
使得代码更简洁,性能更好。
-
更快,更小（约50k的jar包）。
EventBus 有哪些API？
-
on: 监听事件
-
trigger： 触发事件
-
off：取消事件
代码示例
import $ from 'jquery'
class EventBus {
constructor() {
this._eventBus = $(window)
}
on(eventName, fn) {
return this._eventBus.on(eventName, fn)
}
trigger(eventName, data) {
return this._eventBus.trigger(eventName, data)
}
off(eventName, fn) {
return this._eventBus.off(eventName, fn)
}
}
export default EventBus
表驱动编程
表驱动方法是一种编程模式，使你可以在表中（哈希表）查找信息，而不必用逻辑语句（if 或 case）来把他们找出来的方法。事实上，任何信息都可以通过表来挑选。在简单的情况下，逻辑语句往往更简单而且更直接。但随着逻辑链的复杂，表就变得越来越富于吸引力了。
- 表驱动编程的意义在于逻辑与数据的分离。（ 类似于事件委托 ）
const c = {......
events: {
"click #add1": "add",
"click #minus1": "minus",
"click #mul2": "mul",
"click #divide2": "div",
}, //页面上excel表格
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]];
const spaceIndex = key.indexOf(" ");
const part1 = key.slice(0, spaceIndex);
const part2 = key.slice(spaceIndex + 1);
v.el.on(part1, part2, value);
}
},
};
我是如何理解模块化？
- 模块化就是根据不同节点、结构分成不同模块，每个模块可以重复使用，且发现有错误时便于修改，降低了代码耦合度，减少重复代码，使得项目结构更加清晰，便于使用。
