浅析MVC
什么是MVC
MVC是一种架构设计模式，把软件系统分为三个基本的部分：模型（Model）、视图（View）、和控制器（Controller）。
使用 MVC 的目的是将M和V的实现代码分离，从而使同一个程序可以使用不同的表现形式。 比如一批统计数据你可以分别用柱状图、饼图来表示。 C 存在的目的则是确保 M和 V 的同步，一旦 M 改变，V 应该同步更新。 MVC 是一个设计模式，它强制性的使应用程序的输入、处理和输出分开。
Model(数据模型)
Model 数据管理，包括数据逻辑、数据请求、数据储存等功能。
前端 Model 主要负责 AJAX 请求或者 LocalStrage 的储存。
const model ={
//定义数据
data: null,
//初始化
init(){}
//各种方法
fetch(){}
save(){}
update(){}
deltet(){}
}
View(视图)
View 负责用户界面,前端 View 主要负责 HTML 渲染.
const view = {
init(){}
template:`<div>HI</div>`
}
Controller(控制器)
Controller 负责处理 View 的事件,并更新Model,也负责监听 Model 的变化,并更新 View , Controller 控制其他所有流程
const controller = {
view: null,
model: null,
init(view, model){
this.view = view
this.model = model
this.bindEvents()
}
render(){
this.view.querySelector('name').innerText = this.model.data.name
},
bindEvents(){}
}
EventBus 的作用
MVC 三层是紧密联系在一起，但又互相独立，每一层内部的变化不影响其他层。当层与层之间需要通信时，这时就需要用到 EventBus . 使用 EventBus 可以满足最小知识原则，model和view互相不知道对方的细节，但是却可用调用对方的功能。 EventBus 主要用于组件之间的监听与通信。
EventBus 的常用 API:
-
on（监听事件） -
trigger(emit)（触发事件） -
off（取消监听）方法。
// on(监听事件)
const eventBus = $(window)
evnetBus.on("监听事件",() => {})
// trigger(自动触发事件）
const eventBus = $(window)
eventBus.trigger("事件")
// off（取消监听）
const eventBus = $(window)
eventBus.off("监听事件")
表驱动编程
在MVC优化代码过程中，我们提取出了一个“哈希表”(events)；我们只留下了需要的、不能再简略的东西：doSomething。
const controller = {
init() {
...
//我们将之称为自动绑定事件
controller.autoBindEvents()
},
//事件
events: {
'click #a1': 'method_1',
'click #a1': 'method_1',
...
'click #a1': 'method_n'
},
autoBindEvents() {
//实现过程，比如遍历
for (let key in controller.events)
//比如将包含'事件 选择器'的字符串分为几个部分，放到不同的变量中
},
method_1() {
doSomething_a1
},
method_2() {
doSomething_a2
},
...
method_n() {
doSomething_an
}
}
何为模块化
将一个复杂的程序依据一定的规则（规范）封装成几个块（文件）并进行组合。模 块的内部数据的实现是私有的，只是向外部暴露一些接口（方法）与外部其他模块通 信。这就是模块化。 好处：
-
降低代码耦合度
-
减少重复代码
-
提高代码重用性
-
在项目结构上更加清晰，便于维护。
在一个完整的页面应用中，不同的节点功能，不同的结构可以规划为多个模块，每个模块的实现的方式以及用到的技术大不相同，使用模块化编程可以减小各个模块之间的影响和联系，可以更方便的优化代码和重构代码，提高我们代码的重用性，便于后期维护；
简单来说，模块化就是把相对独立的代码从一大段代码里抽取成一个个小模块，每个模块之间相对独立，实现相应的功能，更加简洁美观，也方便维护。
