浅析MVC

作者: Yandhi233 | 来源:发表于2021-11-24 23:14 被阅读0次

什么是MVC

MVC是一种架构设计模式,把软件系统分为三个基本的部分:模型(Model)、视图(View)、和控制器(Controller)。
使用 MVC 的目的是将M和V的实现代码分离,从而使同一个程序可以使用不同的表现形式。 比如一批统计数据你可以分别用柱状图、饼图来表示。 C 存在的目的则是确保 M和 V 的同步,一旦 M 改变,V 应该同步更新。 MVC 是一个设计模式,它强制性的使应用程序的输入、处理和输出分开。

Model(数据模型)

Model 数据管理,包括数据逻辑、数据请求、数据储存等功能。
前端 Model 主要负责 AJAX 请求或者 LocalStrage 的储存。

const model ={
        //定义数据
        data: null,
        //初始化
        init(){}
        //各种方法
        fetch(){}
        save(){}
        update(){}
        deltet(){}
}

View(视图)

View 负责用户界面,前端 View 主要负责 HTML 渲染.

const view = {
init(){}
    template:`<div>HI</div>`
}  

Controller(控制器)

Controller 负责处理 View 的事件,并更新Model,也负责监听 Model 的变化,并更新 View , Controller 控制其他所有流程

const controller = {
    view: null,
    model: null,
    init(view, model){
        this.view = view
        this.model = model
        this.bindEvents()
    }
    render(){
        this.view.querySelector('name').innerText = this.model.data.name
    },
    bindEvents(){}
}

EventBus 的作用

MVC 三层是紧密联系在一起,但又互相独立,每一层内部的变化不影响其他层。当层与层之间需要通信时,这时就需要用到 EventBus . 使用 EventBus 可以满足最小知识原则,model和view互相不知道对方的细节,但是却可用调用对方的功能。 EventBus 主要用于组件之间的监听与通信。

EventBus 的常用 API:

  • on(监听事件)
  • trigger(emit)(触发事件)
  • off(取消监听)方法。
// on(监听事件)
const eventBus = $(window)
evnetBus.on("监听事件",() => {})

// trigger(自动触发事件)
const eventBus = $(window)
eventBus.trigger("事件")

// off(取消监听)
const eventBus = $(window)
eventBus.off("监听事件")

表驱动编程

在MVC优化代码过程中,我们提取出了一个“哈希表”(events);我们只留下了需要的、不能再简略的东西:doSomething。

const controller = {
    init() {
        ...
        //我们将之称为自动绑定事件
        controller.autoBindEvents()
    },
    //事件
    events: {
        'click #a1': 'method_1',
        'click #a1': 'method_1',
        ...
        'click #a1': 'method_n'
    },
    autoBindEvents() {
        //实现过程,比如遍历
        for (let key in controller.events)
        //比如将包含'事件 选择器'的字符串分为几个部分,放到不同的变量中
    },
    method_1() {
        doSomething_a1
    },
    method_2() {
        doSomething_a2
    },
    ...
    method_n() {
        doSomething_an
    }
}

何为模块化

将一个复杂的程序依据一定的规则(规范)封装成几个块(文件)并进行组合。模 块的内部数据的实现是私有的,只是向外部暴露一些接口(方法)与外部其他模块通 信。这就是模块化。 好处:

  • 降低代码耦合度

  • 减少重复代码

  • 提高代码重用性

  • 在项目结构上更加清晰,便于维护。

    在一个完整的页面应用中,不同的节点功能,不同的结构可以规划为多个模块,每个模块的实现的方式以及用到的技术大不相同,使用模块化编程可以减小各个模块之间的影响和联系,可以更方便的优化代码和重构代码,提高我们代码的重用性,便于后期维护;
    简单来说,模块化就是把相对独立的代码从一大段代码里抽取成一个个小模块,每个模块之间相对独立,实现相应的功能,更加简洁美观,也方便维护。

相关文章

  • MVC 浅析

    MVC 一、MVC的概念 MVC是Model-VIew-Controller,就是模型-视图-控制器,这些都是什么...

  • Mvc浅析

    定义 Modle是数据模型,用于操作数据,一般结构如下: View是视图,负责所有的UI页面,一般结构如下; Co...

  • 浅析 MVC

    MVC是什么 MVC——用于解决页面代码过于重复的一个的设计模式(优化页面代码结构)。首先:MVC没有严格的定义。...

  • 浅析 MVC

    一、什么是MVC? M是modal(数据模型)的简称,它是用于操作所有数据 V是view(视图)的简称,它是用于负...

  • 浅析 MVC

    一、MVC是什么? MVC是一种设计模式(那设计模式又是什么呢?简单粗暴的说好用的东西就是设计模式),MVC能够使...

  • 浅析 MVC

    1MVC 三个对象分别做什么,给出伪代码示例 M-Model (数据模型),负责操作所有数据. V-View (视...

  • 浅析MVC

    一、MVC是什么? M 就是 model, 即数据模型,负责数据相关的任务,包括对数据的增删改查 V 就是view...

  • 浅析MVC

    M V C分别是什么 M:即model,数据层面,该模块封装数据以及对数据的处理方法 V:即view,视图层面,该...

  • 浅析 MVC

    一、 MVC 设计模式 1. 设计模式 设计模式,是通用代码(组织方式)的一种统称 2. MVC 是什么 MVC ...

  • 浅析MVC

    MVC没有严格的定义,M - Model(数据模型,负责封装数据以及数据的处理方法) V - View(视图,负责...

网友评论

      本文标题:浅析MVC

      本文链接:https://www.haomeiwen.com/subject/dnvotrtx.html