发布订阅模式的例子

最新推荐文章于 2022-06-29 22:17:00 发布
最新推荐文章于 2022-06-29 22:17:00 发布
阅读量675 收藏
点赞数 1
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/gwdgwd123/article/details/82424416
本文介绍如何使用原生JavaScript的createEvent方法创建自定义事件，并通过initEvent方法进行初始化，包括设置事件类型、是否允许冒泡及取消默认行为等关键步骤。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

原生JS有一个createEvent方法, 跟createElement类似, 不过前者是用来创建自定义事件的. 如下:

// createEvent的参数最好是"event/HTMLEvents/UIEvents/MouseEvents"中的任意一个; 其他的会报错, 导致创建事件失败
var evt = document.createEvent("event");

/*initEvent(eventType, canBubble, cancelable): 初始化事件
 *
 *eventType: string, 事件类型, 如--"click", "clicktest"
 *canBubble: boolean, 是否允许事件冒泡?(默认值=true)
 *cancelable: boolean, 是否允许执行默认事件?(默认值=true)
 *
 */
 evt.initEvent("click", true, true); // 初始化完毕

 // 给实例化事件对象新增属性, 用以区分默认事件对象
 evt.nameOfInstance = "instanceName";
 evt.createTime = new Date();

 // 绑定事件
 window.addEventListener("click", function(e){
     console.log(e.nameOfInstance+"---"+e.createTime);
 });

 // dispatchEvent:派发事件(===事件执行阶段)
 window.dispatchEvent(evt); //如果不加, 自定义事件是不会生效的
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23

最终console面板显示的是: instanceName—Wed Jun 21 2017 16:47:23 GMT+0800 (中国标准时间). 
点击window后, 显示: undefined—undefined

after you
关注
js实现的订阅发布者模式简单示例
10-15
主要介绍了js实现的订阅发布者模式,结合完整示例形式分析了js订阅发布者模式相关实现与使用方法,需要的朋友可以参考下
发布-订阅者模式的一个小例子程序
11-16
通过分析和运行这个例子程序，我们可以更深入地理解发布-订阅者模式的工作原理，如何在C++中有效地实现和应用这个模式，以及它如何帮助我们构建可扩展、松耦合的系统。同时，这个模式也可以作为其他设计模式，如策略...
观察者模式（订阅发布模式）及实例Demo
py_tamir的博客
08-23 1571
1、观察者模式，又称订阅发布模式，其架构如下： 2、实例demo——订阅天气，发布天气 1>WeatherSubject  目标类 public class WeatherSubject {      private List<Observer> observers = new ArrayList<Observer>();  ...
发布、订阅模式
qq_43178432的博客
06-29 523
发布订阅模式
观察者模式（发布订阅模式）的简单实现，以及实际应用举例
weixin_34309435的博客
05-19 991
观察者模式实现 鉴于最近在归纳总结一些常用的设计模式，刚好最近小程序项目中跨组件的异步通信中仿造vue总线机制实现了一个用于订阅和发布消息的对象。所以将js中观察者模式实现总结如下。 简介 目的：实现发布订阅的功能，取消订阅功能的observer对象 是一种解决封装良好的组件之间异步通信的一种方式 典型应用是vue中的总线机制 主要包含的内容 发布函数，发布的时候可能会携带参数 订阅函数，收...
实现一个简单的发布订阅模式
weixin_44761091的博客
03-22 5059
文章目录一、发布订阅模式是什么？二、发布订阅模式的优缺点三、实现一个通用的发布订阅模式 一、发布订阅模式是什么？ 发布订阅模式是对象间的一种一对多的关系，由发布者、订阅者、消息管理器三部分组成，让多个观察者对象同时监听某一个主题对象，当一个对象发生改变时，所有依赖于它的对象都将得到通知。 不论是在程序世界里还是现实生活中，发布—订阅模式的应用都非常广泛。我们先看一下现实中的例子： 小明最近看上了一套房子，到了售楼处之后才被告知，该楼盘的房子早已售罄。好在售楼MM告诉小明，不久后还有一些尾盘推出。开发商正
js代码-实现发布/订阅模式
07-15
发布/订阅模式是一种设计模式，它允许对象之间进行解耦通信。在JavaScript中，我们可以轻松地实现这种模式，以便在不直接相互依赖的情况下传递消息。本文将深入探讨如何使用JavaScript来实现发布/订阅模式，以及它在...
JavaScript设计模式之观察者模式(发布订阅模式)原理与实现方法示例
10-18
观察者模式，也被称为发布订阅模式，是一种设计模式，它允许对象在状态改变时自动通知其他依赖于它的对象。在JavaScript中，这种模式通常通过事件处理来实现，它提供了松散耦合的方式，使得对象之间可以相互通信，而...
JavaScript设计模式之观察者模式与发布订阅模式详解
10-15
在JavaScript中，`addEventListener` 和 `removeEventListener` 是实现发布订阅模式的例子，它们允许元素监听和取消监听特定类型的事件。 在实际开发中，根据需求选择适合的设计模式，可以帮助我们构建更加模块化、...
浅谈发布订阅模式与观察者模式
10-17
发布订阅模式与观察者模式是软件开发中非常重要的两种设计模式，它们用于处理对象间依赖关系和消息传递。理解这两种模式，对于编写松耦合、可扩展的系统至关重要。 设计模式起源于建筑学，后来被引入到软件工程中。...
JS模式之简单的订阅者和发布者模式完整实例
10-24
主要介绍了JS模式之简单的订阅者和发布者模式,以一个完整实例形式详细分析了JS订阅者和发布者模式基本实现技巧,需要的朋友可以参考下
例说发布订阅模式
车联网开发的博客
09-23 172
1.发布 - 订阅 - 事件中心 class EventEmit { constructor() { // 事件中心 this.eventMap = {} } // 订阅事件 on(type, handler) { if (!(handler instanceof Function)) { // 传入的必须是一个函数 throw new Error('必须是一个函数')
js中发布订阅模式示例
zpcqdkf的博客
06-22 287
发布订阅模式 function Dep() { this.subs = [] } Dep.prototype.addsub = function (sub) { this.subs.push(sub) } Dep.prototype.notify = function () { this.subs.forEach(sub => sub.update()) } function Watcher(fn) { this.fn = fn } Watcher.prototype.updat
发布订阅模式
m0_63657524的博客
01-04 6355
JavaScript设计模式，发布订阅模式
发布订阅案例讲解
weixin_30337251的博客
09-06 285
//发布 订阅 [fn,fn]靠着订阅的数组函数作为桥梁，发布与订阅没有关系，订阅的时候不知道什么时候发布，发布的时候也不知道订阅的了多少函数，订阅的时候数组里放函数 //观察者者模式是基于发布订阅的模式 //发布的事件函数 function EventEmitter() { this._arr = [];//定义一个数组用来存储回调函数的 } //原型上定义发布函数将回...
RabbitMQ 发布订阅模式实例
qq_37876078的博客
06-21 573
订阅模式：一个生产者发送的消息会被多个消费者获取。
发布—订阅模式
TKOP_的博客
06-20 1885
为更好地理解 vue 的双向数据绑定原理，大致了解了一下发布订阅模式的实现。
订阅者发布者模式的简单实现
richest_qi的博客
05-04 335
以下是订阅者发布者模式的一个简单实现。 const PubSub = (function(){ const topics = {}; let id = 0; function subscribe(topic,fn){ topics[topic] = topics[topic] || []; if(typeof fn !==...
springboot的发布订阅模式的例子
05-31
在 Spring Boot 中，可以使用 Spring Framework 提供的事件机制实现发布订阅模式。下面是一个简单的例子： 首先，我们创建一个自定义事件 MyEvent： ``` public class MyEvent extends ApplicationEvent { private String message; public MyEvent(Object source, String message) { super(source); this.message = message; } public String getMessage() { return message; } } ``` 然后，我们创建一个事件发布者 MyPublisher，用来发布 MyEvent 事件： ``` @Component public class MyPublisher { @Autowired private ApplicationEventPublisher publisher; public void publishEvent(String message) { MyEvent event = new MyEvent(this, message); publisher.publishEvent(event); } } ``` 最后，我们创建一个事件订阅者 MySubscriber，用来订阅 MyEvent 事件： ``` @Component public class MySubscriber { @EventListener public void handleEvent(MyEvent event) { System.out.println("Received message: " + event.getMessage()); } } ``` 在上面的代码中，我们使用 @Autowired 注解注入了 ApplicationEventPublisher 对象，然后在 publishEvent() 方法中创建了 MyEvent 事件，并通过 publishEvent() 方法发布事件。在 MySubscriber 类中，我们使用 @EventListener 注解标注了 handleEvent() 方法，该方法会在 MyEvent 事件被发布时被调用。 现在，我们可以在任何地方注入 MyPublisher 对象，并调用 publishEvent() 方法发布 MyEvent 事件。例如，在一个 Controller 中： ``` @RestController public class MyController { @Autowired private MyPublisher publisher; @GetMapping("/publish") public String publishEvent() { publisher.publishEvent("Hello, world!"); return "Event published."; } } ``` 当我们访问 /publish 路径时，会调用 publishEvent() 方法发布一个 MyEvent 事件，并在 MySubscriber 类中的 handleEvent() 方法中输出 "Received message: Hello, world!"。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值