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

    四、模块化的理解

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

  • 相关阅读:
    latex
    slab着色,可以减少cache conflict miss概率么?
    内存管理 初始化(八) 至kswapd_init
    内存管理 初始化(七)kmem_cache_init_late 初始化slab分配器(下)
    vmwareubuntu18.04网络配置
    高德地图的一些使用心得
    mongodb聚合管道用法
    python学习链接
    python开发者常犯的10个错误(转)
    vim配置python开发环境(转)
  • 原文地址:https://www.cnblogs.com/silent-cat/p/14198824.html
Copyright © 2011-2022 走看看