JavaScript中的MVC
MVC模式(Model–view–controller)是一种设计模式(或者软件架构),把系统分为三个基本部分:模型(Model)、视图(View)和控制器(Controller)。
1.Model 数据管理,主要负责和服务器进行交互。将请求到的数据传给Controller。
2.View 负责用户界面,HTML 渲染。
3.Controller 负责监听并处理View 的事件,更新和调用 Model;也负责监听 Model的变化(Model从服务器获得数据),并更新 View。Controller 控制其他所有流程。
画图来理解:
Model 和服务器交互,Model 将得到的数据交给 Controller,Controller 把数据填入 View,并监听 View
用户操作 View,如点击按钮,Controller 就会接受到点击事件,Controller 这时会去调用 Model,Model 会与服务器交互,得到数据后返回给 Controller,Controller 得到数据就去更新 View
MVC模式的优点
就我的理解来说,MVC模式有这些好处:
1.低耦合性。每层各司其职,比如只需要改变视图层而不需要重新编译模型和控制器代码,改代 码不用在各个部分改,只需要改变某部分的代码。
2.方便维护和修改。视图层、数据层和业务逻辑层分开,结构清晰好理解。
3.大大提高代码的可重用性。比如用不同的视图层访问模型的数据,只要在控制器层对数据格式做处理,而不需要修改模型层的代码。
重要属性和方法
举例说明 MVC 三个对象分别有哪些重要属性和方法:
var model = {
data: null,
init(){}
fetch(){}
save(){}
update(){}
delete(){}
}
view = {
init() {}
template: '<h1>hi</h1'>
}
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(){}
}