浅析MVC

Rinsann 2021年09月03日 368次浏览

浅析MVC

MVC 三个对象分别做什么

MVC包括三类对象,将它们分离出来以提高灵活性和复用性

  • 模型model用于封装与应用程序的业务逻辑相关的数据以及对数据的处理方法,会有一个或多个视图监听此模型。一旦模型的数据发生变化,模型将通知有关的视图。

    const m={
        data:{ }
    }
    
  • 视图view是它在屏幕上的表示,描绘的是model的当前状态。当模型的数据发生变化,视图相应地得到刷新自己的机会。

    const v={
        container: ;
        html:``;
    }
    
  • 控制器controller定义用户界面对用户输入的响应方式,起到不同层面间的组织作用,用于控制应用程序的流程,它处理用户的行为和数据model上的改变。

    const c={
        init:{}
        bindEvents:{};
    }
    

typicalMVC

实线:方法调用、虚线:事件通知

其中涉及两种设计模式:

  • view和model之间的观察者模式,view观察model,事先在此model上注册,以便view可以了解在数据model上发生的改变。
  • view和controller之间的策略模式

JAVASCRIPT中的MVC

javascriptMVC

在JAVASCRIPT中,view承接了部分controller的功能,负责用户输入,但是不必了解下一步做什么

EventBus 有哪些 API,是做什么用的

eventBus用来建立对象之间的联系,有三个API,on用来监听事件(可以是自定义事件),off用来取消事件,trigger用来触发事件。如何建立联系,在一个对象中通过eventBus.on监听某个事件, 在另一个对象中通过eventBus.trigger直接触发这个事件

const c = {
  say(){
    eventBus.on('my_event', fn)
  }
} 
const d = {
  ok(){
    eventBus.off('my_event', fn)
  }
}

表驱动编程是做什么的

表指的是哈希表
表驱动编程可以减少重复代码,只讲重要的信息放在表里,然后利用表来编程

  • json数据->html结构->css样式->js交互->页面通信
  • 可以把json数据当作参数,html模板当作参数,放入一个约定函数,来生成html结构。
  • 这样可以防御json数据结构的变化,或html结构变化。
  • 也就是说,函数就是映射。映射就是表,从而函数就是表。
  • 代码流程有顺序,分支,循环。
  • 其中分支和循环,存在映射。其中循环还存在自映射。
  • 既然有映射,那么它就是函数。分支,循环都是函数。
  • 怎么写出,可扩展,易维护的分支,循环语句呢?用表!
  • 我们崇尚代码生成代码,函数生成函数,这样就不容易写出出错的代码。于是,我们用函数生成表,用表生成函数。

我是如何理解模块化的

好的作家会把他的书分章节和段落;好的程序员会把他的代码分成模块。

就好像书籍的一章,模块仅仅是一坨代码而已。好的代码模块分割的内容一定是很合理的,便于你增加减少或者修改功能,同时又不会影响整个系统。

模块化可以使代码低耦合,功能模块直接不相互影响。我个人认为模块化主要有以下几点好处:

  1. 可维护性:根据定义,每个模块都是独立的。良好设计的模块会尽量与外部的代码撇清关系,以便于独立对其进行改进和维护。维护一个独立的模块比起一团凌乱的代码来说要轻松很多。
  2. 命名空间:在 JavaScript 中,最高级别的函数外定义的变量都是全局变量(这意味着所有人都可以访问到它们)。也正因如此,当一些无关的代码碰巧使用到同名变量的时候,我们就会遇到“命名空间污染”的问题。这样的问题在我们开发过程中是要极力避免的。后面的内容里我也会举一些具体的例子来说明这一点。
  3. 可复用性:现实来讲,在日常工作中我们经常会复制自己之前写过的代码到新项目中。
  4. 复制粘贴虽然很快很方便,但难道我们找不到更好的办法了么?要是……有一个可以重复利用的模块岂不妙哉?