浅析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. 复制粘贴虽然很快很方便，但难道我们找不到更好的办法了么？要是……有一个可以重复利用的模块岂不妙哉？
上一篇： 前端学习总结篇（一）