1.MVC是什么？
MVC(Model View Controller)是一种架构设计模式
-
M ：
model，即数据层（数据模型），负责操作所有的数据。 -
V ：
view，即视图层，负责所有UI界面，是提供给用户的操作界面，是程序的外壳。 -
C ：
Controller,即控制层，负责根据用户从“视图层”输入指令，选取“数据层中的数据”，对其进行相应的操作(绑定事件等），产生最终结果。
这三层是紧密联系在一起的，但又是互相独立的，每一层内部的变化不影响其他层。每一层都对外提供接口（Interface），供上面一层调用。这样一来，软件就可以实现模块化，修改外观或者变更数据都不用修改其他层，大大方便了维护和升级。
Model 数据层
- 数据管理，主要负责和服务器进行交互，将请求到的数据传给Controller。
const m = {
data: {},
create() {增 },
delete() { 删},
update() {改},
get() {查}
}
View 视图层
- 负责用户界面，HTML 渲染
const v = {
el: null,
// 初始化html
html: `代码`
,
init(container) {
v.el = $(container)
},
render(n) { }
}
Controller 控制层
- 负责监听并处理View 的事件,更新和调用 Model,也负责监听 Model数据的变化并更新到View视图
const c={
init(container){}
events:{事件}
add(){执行}
minus(){执行}
update(){执行}
get(){执行}
autoBindEvents(){逻辑}
}
2.EventBus
EventBus是什么
前面提到MVC三层是紧密联系在一起的，但又是互相独立的，每一层内部的变化不影响其他层。当层与层之间需要通信时，这时就需要用到EventBus。EventBus主要用于组件之间的监听与通信。
EventBus 常用API
-
EventBus.on（）监听事件 -
EventBus.trigger（）触发事件 -
EventBus.off（）取消监听事件
EventBus的作用：作用是用于模块间的通讯
实例代码：
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
3.表驱动编程
概念：
- 表驱动法是一种编程模式(scheme)，从表里面查找信息而不使用逻辑语句(if或case)
用途：对于简单的逻辑编程，且数量较少时，直接使用逻辑语句会更方便快捷，但当逻辑链数量庞大且经常需要维护时，表驱动编程会更加高效。
代码案例：
//未简化代码
add.addEventListener("click", () => {
const num1 = parseInt($("#num1").val())
const num2 = parseInt($("#num2").val())
const result = num1 + num2;
$("#result").text(result);
})
minus.addEventListener("click", () => {
const num1 = parseInt($("#num1").val())
const num2 = parseInt($("#num2").val())
const result = num1 - num2;
$("#result").text(result);
})
//表驱动代码
const c = {
events: {
'click #add1': 'add',
'click #minus1': 'minus',
'click #mul2': 'mul',
'click #divide2': 'divide'
},
add() {
m.update({n: m.data.n + 1})
},
minus() {
m.update({n: m.data.n - 1})
},
mul() {
m.update({n: m.data.n * 2})
},
divide() {
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)
}
}
}
模块化
在一个完整的页面应用中，不同的功能，不同的结构可以将其简化为多个不同模块，每个模块的实现的方式以及用
到的技术都可以不相同。
使用模块化编程可以减小各个模块之间的影响和联系，可以更方便的优化代码和重构代码，提高我们代码的复用率，
有利于后期维护。
