浅析MVC

155 阅读1分钟

M---Model 封装数据操作

将对用户数据的增、删、改、查操作封装到一起

const userModel = {
    create(){},
    delete(){},
    update(){},
    get(){} 
}

与数据有关的操作都放在M上

View - 视图渲染

与视图相关的操作,页面模板的生成

const view ={
    el:null,
    html`
    <div> hello world </div>
`,
    init(container){},
    render(){}
}

Controller - 控制器主要是打杂的

页面中其他不好界定的操作放在C中.

const controller = {
    init(container){
        v.init(container)
        v.render(m.data.n)
        c.autoBindEvents()
        eventBus.on('m:updated',()=>{
        })
    },
    events:{
        click add: 'add'
    }

}
  1. 将 content 塞到页面里

  2. 浏览器事件监听 - 用户点击视图后去更新数据(如 user)

  3. 数据事件监听 - user 数据更新后去更新视图

eventBus

eventBus主要用于对象间的通信,m和v之间互相不知道对方的细节。但是可以通过监听进行实时调用。提供了on、off、trigger等api。其中on用于事件的监听、trigger用于事件的触发

表驱动编程

表驱动是指利用哈希表,将重要的、重复的信息放在表中。这样编写代码时会减少重复。利用效率高。

模块化编程

一个页面会有非常多个功能,对于这些功能我们在做的时候如果放在一个文件中后面维护确实很费劲。模块化就相当于在盖房子中现成的墙、屋顶、瓷砖。我们在搭建项目时这些功能都是相互独立的。只需要把这些功能有顺序的拼接就能快读搭起一个项目。非常提高工作效率