zoukankan      html  css  js  c++  java
  • 了解MVC

    一、MVC

    MVC是一种设计模式,M指Model(模型),V指View(视图)、C指Controller(控制器)

    Model:数据层,封装数据以及对数据的处理方法
    const M = {
          data:{},//数据
          create(){},//增
          delete(){},//删
          update(){},//改
          get(){}//查
    }
    View:表现层,当模型的数据发生变化,视图也会对应刷新
    const V = {
          el:要刷新的元素,
          html:`页面内容`,
          init(){
                V.el:需要刷新的元素
          },
          render(){}//刷新页面
    }
    Controller:控制层,对Model里的数据加工,处理用户的行为和数据的改变并传到View
    const C = {
          init(){
                V.init()//初始化View
                V.render()//第一次渲染页面
                C.autoBindEvents()//自动绑定事件
                eventBus.on('M:update',()=>{V.render()})//当eventBus触发'M:update'时刷新视图
          },
          events:{},//以哈希表的方式存储
          method(){},//处理用户的行为
          autoBindEvents(){}//自动绑定事件
    }
    

    二、eventBus的常用api

    on()
    trigger()
    off()
    eventBus 监听 M:updated,当 M:updated 触发时,执行一些内容
    eventBus.on('M:updated',()=>{
    v.render(M.data.n)
    })

    三、表驱动编程

    消除代码中频繁的if else和switch case

    C = {
         events:{
             'click #add1':'add',
             'click #minus1':'minus',
             'click #mul2':'mul',
             'click #divide2':'div'
         },
         autoBindEvents(){
             for(let key in C.events){
                 const value = C[C.events[key]]
                 const spaceIndex = key.indexOf(' ')
                 const part1 = key.slice(0, spaceIndex)
                 const part2 = key.slice(spaceIndex + 1)
                 v.el.on(part1,part2,value)
             }
         }
     }
    

    四、模块化的理解

    按照某种规范,拆分成一块一块的,提供一种万金油的写法。使得项目结构更加合理清晰,提高代码的复用性,降低耦合度,便于后期维护。

  • 相关阅读:
    IntelliJ IDEA设置JVM运行参数
    IntelliJ IDEA 乱码解决方案 (项目代码、控制台等)
    188.索引与视图
    187.数据库操作
    186.元素
    185.流程设计
    184.数据操纵语言DML
    改变linux shell前景色和背景色
    Centos文本方式安装情况下lvm分区的创建
    深入理解计算机系统第二版习题解答CSAPP 2.20
  • 原文地址:https://www.cnblogs.com/silent-cat/p/14198824.html
Copyright © 2011-2022 走看看