前端MVC

Author Avatar
Nico Zhang 2月 07, 2018
  • 在其它设备中阅读本文章

概念

MVC是一种设计模式,它将应用划分为3个部分:数据(model)、展现层(view)和用户交互(controller)。换句话说,一个事件的发生是这样的过程:
  1. 用户和应用产生交互。
  2. 控制器的事件处理器被触发。
  3. 控制器从模型中请求数据,并将其交给视图。
  4. 视图将数据呈现给用户。

enter description here

MVC的属性和方法

M:模型层,主要包括数据模型的创建、添加、修改、删除、查询等操作逻辑;

C:控制器层,主要包括两个方面:

  • 注册事件并操作DOM,获取用户的输入和操作参数,将参数传递给模型层处理;
  • . 根据模型层返回的参数进行DOM操作,控制视图来呈现不同的状态用以与用户交互;

V:视图层,主要包括HTML标签、CSS,提供给控制器操作的对象;

代码实现

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(){}
}