一篇文章搞懂Javascript发布订阅模式

已于 2024-08-15 22:36:23 修改
阅读量642 收藏 12
点赞数 30
分类专栏： 前端 设计模式 文章标签： javascript 开发语言 ecmascript
于 2024-08-15 22:33:35 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_52624209/article/details/141231838
版权

在这里插入图片描述

文章目录

1. 什么是发布订阅模式

发布订阅模式是一种消息范式，涉及消息的发送者（称为发布者）和接收者（称为订阅者）。在这种模式中，发布者和订阅者不直接相互了解，而是通过一个称为"事件通道"或"消息代理"的中间人来管理消息的分发。

这种模式提供了更好的程序解耦，增强了程序的可扩展性和可维护性。它是一种对象间一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都将得到通知。

现实生活中的例子

  • 报纸订阅：读者（订阅者）订阅报纸，出版社（发布者）通过邮局（事件通道）发送报纸。
  • 电子邮件列表：用户订阅感兴趣的主题，当有新内容时，系统自动发送邮件给所有订阅者。
  • 社交媒体：用户关注某个主题或人物，平台在有更新时推送通知。
  • 股票市场：投资者订阅特定股票的价格变动，当价格变化时，系统通知所有订阅该股票的投资者。

在JavaScript中，发布订阅模式常用于处理异步操作和事件驱动编程，特别是在前端开发中。它是实现松耦合、可扩展系统的重要工具。

2. 发布订阅模式的核心概念

发布订阅模式主要包含三个核心角色：

  1. 发布者（Publisher）：负责创建消息，但不直接发送给订阅者。
  2. 订阅者（Subscriber）：对特定消息感兴趣的对象，只接收感兴趣的消息。
  3. 事件通道（Event Channel）：连接发布者和订阅者的中介，管理订阅关系并分发消息。

除了这三个核心角色，还有一些重要的概念：

  • 主题（Topic）：消息的分类或频道，订阅者可以订阅特定的主题。
  • 消息（Message）：从发布者传递到订阅者的信息载体。
  • 回调函数（Callback）：订阅者提供的函数，在接收到消息时被调用。

发布订阅模式的工作流程

  1. 订阅者通过事件通道订阅特定类型的消息。
  2. 发布者创建消息并发送到事件通道。
  3. 事件通道将消息分发给所有相关的订阅者。
  4. 订阅者接收并处理消息。

这个过程可以用以下序列图表示：

┌─────────┐    ┌───────────────┐    ┌───────────┐
│Publisher│    │ Event Channel │    │Subscriber│
└────┬────┘    └───────┬───────┘    └─────┬─────┘
     │                 │                  │
     │    publish      │                  │
     │─────────────────>                  │
     │                 │    notify        │
     │                 │─────────────────>│
     │                 │                  │
     │    publish      │                  │
     │─────────────────>                  │
     │                 │    notify        │
     │                 │─────────────────>│

3. 实现发布订阅模式

让我们用JavaScript实现一个简单但功能完整的发布订阅系统：

class EventEmitter {
  constructor() {
    this.events = {};
  }

  // 订阅事件
  subscribe(eventName, callback) {
    if (!this.events[eventName]) {
      this.events[eventName] = [];
    }
    this.events[eventName].push(callback);
    return () => this.unsubscribe(eventName, callback);
  }

  // 发布事件
  publish(eventName, data) {
    const eventCallbacks = this.events[eventName];
    if (eventCallbacks) {
      eventCallbacks.forEach(callback => callback(data));
    }
  }

  // 取消订阅
  unsubscribe(eventName, callback) {
    if (this.events[eventName]) {
      this.events[eventName] = this.events[eventName].filter(cb => cb !== callback);
    }
  }

  // 只订阅一次
  once(eventName, callback) {
    const onceWrapper = (...args) => {
      callback(...args);
      this.unsubscribe(eventName, onceWrapper);
    };
    return this.subscribe(eventName, onceWrapper);
  }
}

// 使用示例
const eventEmitter = new EventEmitter();

// 订阅事件
const unsubscribe = eventEmitter.subscribe('userLoggedIn', data => {
  console.log('User logged in:', data);
});

// 发布事件
eventEmitter.publish('userLoggedIn', { id: 1, name: 'John Doe' });

// 取消订阅
unsubscribe();

// 只订阅一次
eventEmitter.once('oneTimeEvent', data => {
  console.log('This will only be called once:', data);
});

eventEmitter.publish('oneTimeEvent', { message: 'Hello' });
eventEmitter.publish('oneTimeEvent', { message: 'This won't be logged' });

这个实现包含了发布订阅模式的核心功能：订阅、发布、取消订阅，以及只订阅一次的功能。它使用了ES6的类语法，使代码更加清晰和易于理解。

4. 发布订阅模式的应用场景

发布订阅模式在前端开发中有广泛的应用，例如：

  1. 用户界面更新：
    当数据模型发生变化时，自动更新相关的UI组件。

    // 数据模型
const dataModel = {
  data: [],
  eventEmitter: new EventEmitter(),
  updateData(newData) {
    this.data = newData;
    this.eventEmitter.publish('dataUpdated', this.data);
  }
};

// UI组件
function UIComponent() {
  dataModel.eventEmitter.subscribe('dataUpdated', data => {
    // 更新UI
    console.log('Updating UI with:', data);
  });
}

  2. 跨组件通信：
    在这里插入图片描述

    在复杂的单页应用中，实现不同组件之间的解耦通信。

  3. 异步操作管理：
    处理AJAX请求的响应，或管理WebSocket的消息。

    const apiClient = {
  eventEmitter: new EventEmitter(),
  fetchData() {
    fetch('/api/data')
      .then(response => response.json())
      .then(data => {
        this.eventEmitter.publish('dataFetched', data);
      });
  }
};

apiClient.eventEmitter.subscribe('dataFetched', data => {
  console.log('Data received:', data);
});

apiClient.fetchData();

  4. 插件系统：
    允许第三方开发者通过订阅特定事件来扩展应用功能。

  5. 状态管理：
    在大型应用中管理和同步应用状态。

  6. 实时应用：
    在聊天应用或协作工具中，当接收到新消息时通知相关组件。

例如，在React应用中使用发布订阅模式：

import React, { useEffect, useState } from 'react';
import eventEmitter from './eventEmitter';

function UserStatus() {
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  useEffect(() => {
    const unsubscribe = eventEmitter.subscribe('userStatusChanged', status => {
      setIsLoggedIn(status.loggedIn);
    });

    return unsubscribe;
  }, []);

  return <div>{isLoggedIn ? 'User is logged in' : 'User is logged out'}</div>;
}

// 在其他组件或服务中
eventEmitter.publish('userStatusChanged', { loggedIn: true });

这个例子展示了如何在React组件中使用发布订阅模式来管理用户登录状态。它利用了React的useEffect钩子来处理订阅和取消订阅，确保在组件卸载时正确清理。

5. 发布订阅模式 vs 观察者模式

虽然发布订阅模式和观察者模式经常被混淆，但它们有几个关键区别：

  1. 耦合度：

    • 观察者模式：观察者和主题之间是松耦合的，但观察者需要知道主题的存在。
    • 发布订阅模式：发布者和订阅者完全解耦，通过事件通道通信，互不知道对方的存在。

  2. 通信方式：

    • 观察者模式：主题直接通知观察者。
    • 发布订阅模式：通过中间的事件通道进行通信。

  3. 灵活性：

    • 观察者模式：观察者需要知道主题的存在。
    • 发布订阅模式：发布者和订阅者可以完全不知道对方的存在，提供了更大的灵活性。

  4. 应用场景：

    • 观察者模式：适用于组件间有明确依赖关系的场景。
    • 发布订阅模式：适用于组件间完全解耦的场景，特别是在大型、复杂的系统中。

  5. 复杂性：

    • 观察者模式：相对简单，直接在主题上注册观察者。
    • 发布订阅模式：引入了一个额外的事件通道层，增加了一定的复杂性，但提供了更好的解耦。

  6. 性能：

    • 观察者模式：可能较快，因为是直接通信。
    • 发布订阅模式：由于引入了中间层，可能会有轻微的性能开销。

代码对比：

观察者模式：

class Subject {
  constructor() {
    this.observers = [];
  }

  addObserver(observer) {
    this.observers.push(observer);
  }

  removeObserver(observer) {
    const index = this.observers.indexOf(observer);
    if (index > -1) {
      this.observers.splice(index, 1);
    }
  }

  notify(data) {
    this.observers.forEach(observer => observer.update(data));
  }
}

class Observer {
  update(data) {
    console.log('Received update:', data);
  }
}

const subject = new Subject();
const observer = new Observer();
subject.addObserver(observer);
subject.notify('Hello World');

发布订阅模式（使用之前定义的EventEmitter类）：

const eventEmitter = new EventEmitter();

function subscriber(data) {
  console.log('Received data:', data);
}

eventEmitter.subscribe('dataUpdated', subscriber);
eventEmitter.publish('dataUpdated', 'Hello World');

这个对比清楚地展示了两种模式在实现和使用上的差异。

6. Event Bus/Event Emitter

Event Bus或Event Emitter是发布订阅模式的一种常见实现，特别是在前端开发中。它提供了一个集中的地方来管理应用程序中的事件。

在Vue中使用Event Bus

在这里插入图片描述

在Vue 2.x中，可以使用一个空的Vue实例作为中央事件总线：

// 创建事件总线
export const EventBus = new Vue();

// 在组件A中发布事件
EventBus.$emit('itemAdded', { name: 'New Item' });

// 在组件B中订阅事件
EventBus.$on('itemAdded', item => {
  console.log('New item added:', item);
});

// 组件销毁时取消订阅
beforeDestroy() {
  EventBus.$off('itemAdded');
}

注意：在Vue 3中，推荐使用provide/inject API或Vuex来替代全局Event Bus。Vue 3的组合式API提供了更好的方式来处理跨组件通信：

// 使用Vue 3的组合式API创建事件总线
import { ref, provide, inject } from 'vue'

const createEventBus = () => ({
  emit: (event, ...args) => {
    bus.value[event]?.forEach(handler => handler(...args))
  },
  on: (event, handler) => {
    if (!bus.value[event]) {
      bus.value[event] = []
    }
    bus.value[event].push(handler)
  },
  off: (event, handler) => {
    const index = bus.value[event]?.indexOf(handler) ?? -1
    if (index > -1) {
      bus.value[event].splice(index, 1)
    }
  }
})

const bus = ref({})
const eventBusKey = Symbol('eventBus')

export const provideEventBus = () => provide(eventBusKey, createEventBus())
export const useEventBus = () => inject(eventBusKey)

在React中使用Event Emitter

在这里插入图片描述

React没有内置的Event Bus，但我们可以使用自定义的EventEmitter类或第三方库：

import { EventEmitter } from './eventEmitter';
import React, { useEffect, useCallback } from 'react';

const eventBus = new EventEmitter();

function ComponentA() {
  const  handleClick = useCallback(() => {
    eventBus.publish('buttonClicked', 'Hello from ComponentA');
  }, []);

  return <button onClick={handleClick}>Click me</button>;
}

function ComponentB() {
  useEffect(() => {
    const handler = message => {
      console.log(message);
    };
    const unsubscribe = eventBus.subscribe('buttonClicked', handler);

    return unsubscribe; // 清理函数
  }, []);

  return <div>ComponentB</div>;
}

这个例子展示了如何在React组件中使用EventEmitter。它利用了React的useEffect和useCallback钩子来处理订阅和性能优化。

7.发布订阅模式的优点

优点

  1. 松耦合：发布者和订阅者之间没有直接依赖，提高了系统的调用程度。
  2. 可扩展性：可以轻松添加新的订阅者而不影响现有系统，符合开闭原则。
  3. 灵活性：订阅者可以动态地订阅或取消订阅，适应变化的需求。
  4. 异步通信：支持系统组件之间的异步通信，提高了系统的响应性。
  5. 一对多通信：一个发布者可以同时通知多个订阅者，方便实现广播功能。

缺点

  1. 维护复杂性：在大型系统中，可能难以跟踪和维护所有的订阅关系，增加了调试的难度。
  2. 性能上限：间隙地发布和订阅可能导致性能问题，特别是在高并发情况下。
  3. 补充：如果消息没有正确送达，可能导致系统状态不一致，需要额外的机制来确保消息的可靠发送。
  4. 调试困难：事件流程可能变得复杂，导致系统行为难以预测和调试。
  5. 存储头部：需要存储订阅者的回调函数，可能占用分区内存。

8.实际应用中的注意事项

  1. 内存管理：确保在组件个别时取消订阅，避免内存泄漏。
class Component {
  constructor(eventEmitter) {
    this.eventEmitter = eventEmitter;
    this.handleEvent = this.handleEvent.bind(this);
    this.eventEmitter.subscribe('someEvent', this.handleEvent);
  }

  handleEvent(data) {
    console.log('Event handled:', data);
  }

  destroy() {
    this.eventEmitter.unsubscribe('someEvent', this.handleEvent);
  }
}
  1. 错误处理：在事件处理器中加入适当的错误机制处理。
eventEmitter.subscribe('importantEvent', data => {
  try {
    // 处理事件
    processData(data);
  } catch (error) {
    console.error('Error handling event:', error);
    // 可能的错误恢复机制
    errorRecovery();
  }
});
  1. 命名约定：使用清晰一致的事件命名约定，避免命名冲突。
const EVENT_TYPES = {
  USER_LOGIN: 'user:login',
  USER_LOGOUT: 'user:logout',
  DATA_UPDATED: 'data:updated',
};

eventEmitter.subscribe(EVENT_TYPES.USER_LOGIN, handleUserLogin);
  1. 类型安全：在TypeScript项目中，可以利用类型系统来增强发布订阅模式的安全性。
type EventMap = {
  'userLoggedIn': { userId: string };
  'dataLoaded': { items: any[] };
};

class TypedEventEmitter {
  private events: { [K in keyof EventMap]?: ((data: EventMap[K]) => void)[] } = {};

  subscribe<K extends keyof EventMap>(event: K, callback: (data: EventMap[K]) => void) {
    if (!this.events[event]) {
      this.events[event] = [];
    }
    this.events[event]!.push(callback);
    return () => this.unsubscribe(event, callback);
  }

  publish<K extends keyof EventMap>(event: K, data: EventMap[K]) {
    if (this.events[event]) {
      this.events[event]!.forEach(callback => callback(data));
    }
  }

  private unsubscribe<K extends keyof EventMap>(event: K, callback: (data: EventMap[K]) => void) {
    this.events[event] = this.events[event]?.filter(cb => cb !== callback);
  }
}
  1. 避免过度使用：虽然发布订阅模式很强大，但过度使用可能导致代码难以理解和维护。在适当的场景下使用。
  2. 文档化：确保所有的事件及其用途都有良好的文档记录，这对于大型项目的维护至关重要。
/**
 1. @event userLoggedIn
 2. @type {Object}
 3. @property {string} userId - The ID of the logged-in user
 4. @property {string} username - The username of the logged-in user
 5. @description Fired when a user successfully logs in
 */
eventEmitter.publish('userLoggedIn', { userId: '123', username: 'john_doe' });
  1. 性能优化：对于高频事件，考虑使用节流（throttle）或防抖（debounce）技术。
import { debounce } from 'lodash';

const debouncedPublish = debounce((eventName, data) => {
  eventEmitter.publish(eventName, data);
}, 300);

// 使用防抖后的发布方法
debouncedPublish('frequentEvent', { someData: 'value' });
  1. 事件优先级：在复杂系统中，考虑实际事件优先级机制，确保重要事件得到及时处理。
class PriorityEventEmitter extends EventEmitter {
  publishWithPriority(eventName, data, priority = 0) {
    const callbacks = this.events[eventName];
    if (callbacks) {
      callbacks.sort((a, b) => b.priority - a.priority);
      callbacks.forEach(cb => cb.callback(data));
    }
  }

  subscribeWithPriority(eventName, callback, priority = 0) {
    if (!this.events[eventName]) {
      this.events[eventName] = [];
    }
    this.events[eventName].push({ callback, priority });
    return () => this.unsubscribe(eventName, callback);
  }
}

9. 总结

发布订阅模式是一种强大的设计模式，在JavaScript和前端开发中有广泛的应用。它允许我们创建松耦合的系统组件，提高代码的可维护性和可扩展性。通过论文，我们深入了解了发布订阅模式的核心概念、实现方式、应用场景，以及它与观察者模式的区别。
我们讨论了如何在实际项目中应用这种模式，包括在 Vue 和 React 前端现代框架中的使用方法。同时，我们也探讨了使用这种模式时需要注意的事项，如内存管理、错误处理等命名约定等，以及如何在TypeScript中使用类型系统来增强模式的安全性。
在实际应用中，发布订阅模式可以大大简化系统中的通信逻辑的复杂性。然而，它也带来了一些挑战，如增加了系统的复杂性和潜在的性能问题。因此，在使用这种模式时，需要权衡其利弊选择，并根据具体情况是否使用。
最后，理解并掌握发布订阅模式，对于提高代码质量和系统设计能力都有很大帮助。它不仅仅是一种编程技巧，更是一种解决问题的思维方式。在JavaScript的异步编程、事件驱动编程中中，发布订阅模式的思想线索在。掌握这种模式，将帮助你更好地设计和实现复杂的前端应用，创建更灵活、可维护的代码结构。
这篇文章现在比较全面地涵盖了JavaScript发布订阅模式的各个方面，包括更多的代码示例、实际应用场景、与其他模式的对比，以及在使用过程中的最佳实践和注意事项。文章的结构保持不变，但每个部分都得到了扩展和简化，为读者提供了更加丰富和实用的信息。

貂蝉的腿毛
关注
  • 30
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
发布-订阅模式
uperficialyu的博客
02-27 7283
发布-订阅模式 学习知识要善于思考，思考，再思考。 —— 爱因斯 在众多设计模式中，可能最常见、最有名的就是发布 - 订阅模式了，本篇我们一起来学习这个模式。 发布 - 订阅模式 （Publish-Subscribe Pattern, pub-sub）又叫观察者模式（Observer Pattern），它定义了一种一对多的关系，让多个订阅者对象同时监听某一个发布者，或者叫主题对象，这个主题对象的状态发生变化时就会通知所有订阅自己的订阅者对象，使得它们能够自动更新自己。 当然有人提出发布 - 订阅模式和观察
设计模式｜发布-订阅模式（Publish-Subscribe Pattern）
weixin_44435110的博客
03-26 5836
发布-订阅模式（Publish-Subscribe Pattern）是一种软件架构设计模式，属于行为型设计模式，用于解耦生产者（发布者）和消费者（订阅者）之间的关系。在这种模式中，发布者负责发布消息，而订阅者则可以选择订阅他们感兴趣的消息类型。当有新消息发布时，订阅者将收到通知并执行相应的操作。
简单实现发布订阅模式
最新发布
2201_75360684的博客
06-04 460
专业点讲，发布订阅就是一种消息范式，消息的发送者（称为发布者）不会将消息直接发送给特定的接收者（称为订阅者）。而是将发布的消息分为不同的类别，无需了解哪些订阅者（如果有的话）可能存在，而订阅者可以表达对一个或多个类别的兴趣，只接收感兴趣的消息，无需了解哪些发布者存在。浅显的来说，发布订阅有三个点：发布者（发送消息的人），消息储存点（存放消息的地方），订阅者（想要接收消息的人）。发布者只需要创建消息来发布，订阅者可以选择喜欢的消息来接收，也可以选择取消订阅消息。
小侃设计模式（十八）-发布订阅模式
qq_33479841的博客
12-16 1816
发布订阅模式又叫观察者模式（Observer Pattern），它是指对象之间一对多的依赖关系，每当那个特定对象改变状态时，所有依赖于它的对象都会得到通知并被自动更新，它是行为型模式的一种。观察者模式内部有一个“主题”对象和若干个“观察者”对象，“主题对象”和“观察者”对象是一对多的依赖关系，当“主题”的状态发生变化时，所有“观察者”都得到通知。本文将详述观察者模式的原理及使用方式。
js中的设计模式之发布订阅模式
前端三脚猫的博客
05-25 3620
发布订阅模式是什么 它其实是一种对象间一对多的依赖关系，当一个对象的状态发送改变时，所有依赖于它的对象都将得到状态改变的通知。（如微信公众号一样有无数个订阅者，有一个发布者，当发布者发布文章的时候，订阅者都可以收到发布的文章。） 平时使用 前端在之前使用jq的时候就有使用到发布订阅模式例如有trigger和on方法，现在vue中也经常使用到如：事件总线进行组件间的传值、子父组件间的传值、vue实现双向绑定等等。 手动实现 我们平时用的发布订阅模式需要有订阅on方法和发布emit方法，所以我们首先实现一个最简
发布订阅模式
m0_70858457的博客
03-08 431
发布订阅模式的实现原理
《前端异步编程系列之事件发布/订阅模式》附件：eventjs模块
08-12
本篇文章将深入探讨“事件发布/订阅模式”，并结合提供的`eventjs`模块进行详细讲解。 事件发布/订阅模式（也称为发布/订阅者模式或观察者模式）是一种设计模式，它允许对象之间的解耦。在这种模式中，我们有三个...
Catclicker-Premium:Udacity 的 JavaScript 设计模式课程练习
06-13
本篇文章将深度剖析Udacity的“JavaScript设计模式”课程中的一个实践项目——Catclicker-Premium，通过该项目，我们将探讨如何运用JavaScript设计模式来优化代码结构，提高可读性和可维护性。 Catclicker-Premium...
详解JavaScript中的客户端消息框架设计原理
12-09
所以，这篇文章是我在发现JavaScript中成功的运用客户端消息模式的一些关键要点时的一个掠影。 1.) 理解中介者与观察者的区别   大多数人在描述任何事件/消息机制的时候喜欢套用“发布者/订阅者”(pub/sub)——但...
基于ES6的轻量级以广播订阅模式封装的JSBridge
08-10
本篇文章将深入探讨一个基于ES6的轻量级JSBridge实现，该实现采用广播-订阅模式，确保了良好的兼容性，适用于iOS9及以上版本以及Android4.0及更高版本的系统。 首先，我们需要理解JSBridge的核心功能。JSBridge是让...
javascript实现观察者模式
07-28
这篇博客文章可能详细讲解了如何使用JavaScript来实现这一模式。 观察者模式的核心概念包括主题（Subject）和观察者（Observer）。主题是被观察的对象，它可以拥有多个观察者，并负责管理这些观察者的订阅和取消...
发布—订阅模式
TKOP_的博客
06-20 1481
为更好地理解 vue 的双向数据绑定原理，大致了解了一下发布订阅模式的实现。
什么是发布订阅模式？
金木编程
06-14 1247
在这种模式中，组件（发布者）将消息发送到一个中心（消息代理或主题），然后其他组件（订阅者）可以选择性地订阅这些消息，并在发布者发布消息时接收到相应的通知。当发布者发布新闻时，消息代理将根据订阅者的订阅情况将相应的新闻通知给订阅者。例如，体育新闻发布者发布了一条新的体育新闻，消息代理将该新闻发送给订阅了体育主题的用户A，同时忽略掉订阅了科技主题的用户B。在这个系统中，发布者将自己的新闻发布到主题或消息代理上，例如，体育新闻发布者将体育新闻发布到体育主题上，科技新闻发布者将科技新闻发布到科技主题上。
【RabbitMQ笔记04】消息队列RabbitMQ七种模式之发布订阅模式（Publish/Subscribe）
✅ Java 开发工程师，从事 Web 应用程序的研发，擅长 Spring、SpringBoot 等技术。 ✅ 热爱编程，业余时间学习新知识，通过 CSDN 记录学习心得和笔记内容。
02-25 2098
RabbitMQ中，发布订阅模式就是指定Exchange交换机的类型是【fanout】，然后RabbitMQ就会将消息分发到所有和这个Exchange交换机绑定的Queue消息队列里面，此时所有的消费者都可以接收到这一条消息。注意：对于发布订阅模式来说，消息的路由键RouteKey是没有作用的，可以不写。
前端中的订阅发布模式
m0_47553675的博客
04-25 1161
订阅发布模式
【DDD】学习笔记-发布者—订阅者模式
xqdd的专栏
02-22 1555
订阅者模式
设计模式之发布-订阅模式
zoey的专栏
04-02 758
定义对象间的一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖它的对象都将得到通知。
2024年Web前端最全vue3 eventBus订阅发布模式_vue3 发布订阅，培训web前端开发
2401_84413092的博客
05-04 739
解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**你知道 302 状态码是什么嘛？你平时浏览网页的过程中遇到过哪些 302 的场景？（jsx可以进行更多的js逻辑和操作）5）vue：组件之间的通信（props，callback，emit）TCP 协议怎么保证可靠的，UDP 为什么不可靠？HTTP 常用的请求方式，区别和用途？你对 TCP 滑动窗口有了解嘛？2）状态管理（react）3）对象属性（vue）
js设计模式五 - 发布—订阅模式
baidu_30907803的博客
06-03 417
发布订阅模式的优点： 1.广泛应用于**异步编程**中，这是一种替代传递回调函数的方案。在异步编程中使用发布订阅模式，我们就无需过多关注对象在异步运行期间的内部状态，而只需要订阅感兴趣的事件发生点。例如ZoomSdk的注册以及事件回调都是异步执行的，这时使用发布订阅模式就很好解决这个问题。 2.发布订阅模式可以取代对象之间硬编码的通知机制，一个对象不再显式地调用另一个对象的某个接口。发布订阅模式让两个对象松耦合地联系在一起，虽然不太清除批次的细节，但这不影响他们之间互相通讯。当有心得订阅者出现时，发布者的代
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

貂蝉的腿毛

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值