首先我们来解释一下这个模型的工作流程

1. 初始化 Controller 对象，它初始化 View 和 Model 对象，并且绑定事件和回调函数。

2. 在 onLoad 函数中，View 渲染 Model 中的数据。

3. 当用户点击 View 对象时，Controller 对象将调用 setModelData 函数，该函数将从用户输入的值中更新 Model 中的数据。

4. 最后，Controller 对象将调用 View 的 render 函数，将更新后的数据呈现在页面上。

MVC 的示例

Model：

const Model = {
  data: {
    name: '',
    age: ''
  },
  setName(name) {
    this.data.name = name
  },
  setAge(age) {
    this.data.age = age
  },
  getName() {
    return this.data.name
  },
  getAge() {
    return this.data.age
  }
}

View：

const View = {
  el: document.querySelector('#app'),
  template: `
    
      
Name: {{name}}
      
Age: {{age}}
    
  `,
  render(data) {
    let html = this.template.replace('{{name}}', data.name).replace('{{age}}', data.age)
    this.el.innerHTML = html
  }
}

Controller：

const Controller = {
  init() {
    this.view = View
    this.model = Model
    this.bindEvents()
    this.onLoad()
  },
  bindEvents() {
    this.view.el.addEventListener('click', () => {
      this.setModelData()
    })
  },
  onLoad() {
    this.view.render(this.model.data)
  },
  setModelData() {
    const name = prompt('请输入姓名')
    const age = prompt('请输入年龄')
    this.model.setName(name)
    this.model.setAge(age)
    this.view.render(this.model.data)
  }
}

Controller.init()

这个简单的 MVC 模型中，Model 负责存储数据和数据的读写，View 负责渲染页面，Controller 负责协调 Model 和 View，以及绑定事件和回调函数。

这种模型的优点是可以方便地修改和扩展功能，同时也能够提高代码的可维护性和可读性。