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

    四、模块化的理解

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

  • 相关阅读:
    第四周编程总结
    第三周作业编程总结
    第二周基础作业
    【C++学习教程03】面向对象编程的基本知识&内联函数
    【C++学习教程02】运算符
    【C++学习教程01】C++命名空间重名&函数原型&字符类型&数据类型
    为什么匿名内部类只能访问其所在方法中的final变量
    android通过socket上传文件
    android socket编程
    test markdown-here chrome 插件
  • 原文地址:https://www.cnblogs.com/silent-cat/p/14198824.html
Copyright © 2011-2022 走看看