Vue 2当中使用了哪些设计模式（二）

六边形666
237 阅读3分钟

上文介绍了Vue 2中使用的观察者模式以及单例模式，本文介绍Vue 2中使用的发布-订阅模式、工厂模式、策略模式以及装饰者模式

1. 发布-订阅模式

发布-订阅模式是观察者模式的一种变种，它通过一个中介者对象（即发布者或消息总线）来解耦事件的发布者和订阅者。Vue 的事件总线机制就是采用了发布-订阅模式。

原理解析：

在 Vue 中，组件之间的事件传递可以通过 Vue 实例作为一个事件总线（event bus）来实现，允许组件间的通信而不直接依赖父子关系。Vue 2.x 没有内建的事件总线，但通过 Vue 实例的 $on、$emit 和 $off 方法，可以实现这种模式。

// 发布者
this.$emit('eventName', data);

// 订阅者
this.$on('eventName', (data) => {
  console.log(data);
});

应用示例：

// EventBus.js
import Vue from 'vue';
export const EventBus = new Vue();

// 在一个组件中发布事件
EventBus.$emit('updateMessage', 'New Message');

// 在另一个组件中订阅事件
EventBus.$on('updateMessage', (msg) => {
  console.log(msg);
});

通过这种方式，组件之间可以独立地进行事件交互，而不需要建立紧密的耦合关系。

2. 工厂模式

工厂模式是一种创建对象的设计模式，它定义了一个用于创建对象的接口，但由子类决定实例化哪一个类。在 Vue 中，工厂模式的应用体现在组件的创建和实例化上。

工厂模式的核心思想是：通过创建一个工厂函数来生成不同类型的对象，而不需要在客户端暴露具体的类或构造函数。Vue 2 中的工厂模式通常表现在组件的创建和实例化过程中。Vue 使用工厂方法来创建组件实例，并通过构造函数和模板生成最终的 DOM 树。

原理解析：

Vue 提供了 Vue.component 和 Vue.extend 方法来创建组件。Vue.extend 是一个工厂函数，用于创建一个组件构造器，然后通过该构造器来实例化组件。

const MyComponent = Vue.extend({
  template: '<div>Hello, World!</div>'
});

const componentInstance = new MyComponent();
componentInstance.$mount('#app');

在上面的代码中，Vue.extend 创建了一个组件工厂 MyComponent，然后通过 new MyComponent() 实例化了一个组件

动态组件

Vue 还允许动态创建和切换组件，这也是通过工厂模式来实现的。例如，使用 component 动态渲染不同的组件：

<component :is="currentComponent"></component>

currentComponent 可以动态指向不同的组件构造函数，实现组件的动态加载。

3. 策略模式

策略模式是一种行为型设计模式，它定义了一系列的算法，并将每个算法封装起来，使它们可以互相替换。

策略模式通常包含以下几个部分：

  1. Context（上下文） ：持有一个策略对象，并通过该对象执行相关的策略行为。
  2. Strategy（策略接口） ：定义一个统一的接口，所有的具体策略类都应该实现这个接口。
  3. ConcreteStrategy（具体策略） ：实现具体的策略类，提供不同的算法或行为。

原理解析：

策略模式的核心思想是根据不同的上下文或条件，选择不同的行为或策略。在 Vue 中，指令就是不同的行为策略。

  • Vue 的指令系统允许你根据需要选择不同的指令来实现不同的 DOM 操作，比如 v-if、v-show、v-for。
  • 每个指令都是一种特定的“策略”，负责处理某一类特定的逻辑（如条件渲染、循环渲染等）。
  • Vue 会根据不同的条件自动选择合适的指令来执行，且每个指令有不同的生命周期钩子（如 bind、inserted、update）来执行相关的操作。
<!-- 使用 v-bind 指令绑定属性 -->
<div v-bind:class="classObject"></div>

v-bind 和 v-if 等指令根据不同的条件动态改变 DOM 的表现，它们可以看作是使用了策略模式来根据不同的需求执行不同的 DOM 操作。

<div v-if="show">Hello World</div>

在这个例子中，v-if 就根据 show 值的不同应用不同的 DOM 操作。如果 show 为 true，则渲染 div，如果为 false，则不渲染。

不同的绑定操作可以根据不同的需求选择不同的策略，这也是策略模式的一种体现。

4. 装饰者模式

装饰者模式的核心思想是通过动态地为对象添加功能来扩展对象的行为，而不改变对象本身。在 Vue 中，过滤器就是一种“装饰器”，它通过对数据进行格式化或转换，来改变数据的展示方式。

  • Vue 的过滤器允许我们对数据进行格式化或转换，增强了数据的表现力，但不改变数据本身。
  • 过滤器的作用通常是处理显示数据，例如格式化日期、数字货币、文本转换等。

示例：

htmlCopy Code
<!-- 注册一个过滤器 -->
Vue.filter('currency', function (value) {
  return '$' + value.toFixed(2);
});

<!-- 在模板中使用过滤器 -->
<p>{{ 1234.56 | currency }}</p>  <!-- 输出: $1234.56 -->

在这个例子中，currency 过滤器就是对数据的一种“装饰”，它将原始数字 1234.56 转换成带有货币符号的格式。

avatar
文章
阅读
粉丝