什么是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
}
}
何为模块化
将一个复杂的程序依据一定的规则(规范)封装成几个块(文件)并进行组合。模 块的内部数据的实现是私有的,只是向外部暴露一些接口(方法)与外部其他模块通 信。这就是模块化。 好处:
-
降低代码耦合度
-
减少重复代码
-
提高代码重用性
-
在项目结构上更加清晰,便于维护。
在一个完整的页面应用中,不同的节点功能,不同的结构可以规划为多个模块,每个模块的实现的方式以及用到的技术大不相同,使用模块化编程可以减小各个模块之间的影响和联系,可以更方便的优化代码和重构代码,提高我们代码的重用性,便于后期维护;
简单来说,模块化就是把相对独立的代码从一大段代码里抽取成一个个小模块,每个模块之间相对独立,实现相应的功能,更加简洁美观,也方便维护。
网友评论