事件驱动架构的 jQuery 插件?

2024-03-12

是否有事件驱动架构 jQuery 插件?

第 1 步:订阅

alt text
The subscribers subscribe to the event handler in the middle, and pass in a callback method, as well as the name of the event they are listening for...

即两个绿色订阅者将监听 p0 事件。蓝色订阅者将监听 p1 事件。


步骤 2:p0 事件由另一个组件向事件处理程序触发

  1. p0 事件被触发到事件处理程序
  2. 事件处理程序通知其事件订阅者,调用他们订阅时指定的回调方法第一步:订阅。

请注意,蓝色订阅者不会收到通知,因为它没有侦听 p0 事件。


步骤 3:p1 事件被触发到事件处理程序的一个组件

p1 事件由另一个组件触发

与之前一样,只是现在蓝色订阅者通过其回调接收事件,而其他两个绿色订阅者没有接收该事件。

图片由 leeand00 提供,在 Flickr 上 http://www.flickr.com/photos/leeand00/4667387678/

我似乎找不到,但我猜测他们只是在 Javascript/jquery 中将其称为其他名称

这个模式还有名字吗?因为它不仅仅是一个基本的发布者/订阅者,所以我认为它必须被称为其他名称。


您可能不需要插件来执行此操作。首先,DOM 本身完全是事件驱动的。您可以使用事件委托来侦听根节点上的所有事件(jQuery live 使用的技术)。要处理可能与 DOM 无关的自定义事件,您可以使用普通的旧 JavaScript 对象来完成这项工作。我写了一个博客文章 http://vombat.tumblr.com/post/425704473/eventbus-with-mootools关于仅用一行代码在 MooTools 中创建中央事件调度程序。

var EventBus = new Class({Implements: Events});

在 jQuery 中也同样容易做到。使用常规 JavaScript 对象作为所有事件的中央代理。任何客户端对象都可以发布和订阅该对象上的事件。看这个相关question https://stackoverflow.com/questions/2625122/using-class-object-mootools-style-events-in-jquery.

var EventManager = {
    subscribe: function(event, fn) {
        $(this).bind(event, fn);
    },
    unsubscribe: function(event, fn) {
        $(this).unbind(event, fn);
    },
    publish: function(event) {
        $(this).trigger(event);
    }
};

// Your code can publish and subscribe to events as:
EventManager.subscribe("tabClicked", function() {
    // do something
});

EventManager.publish("tabClicked");

EventManager.unsubscribe("tabClicked");

或者,如果您不关心公开 jQuery,那么只需使用一个空对象并调用bind and trigger直接在 jQuery 包装的对象上。

var EventManager = {};

$(EventManager).bind("tabClicked", function() {
    // do something
});

$(EventManager).trigger("tabClicked");

$(EventManager).unbind("tabClicked");

包装器只是为了隐藏底层 jQuery 库,以便您可以在以后根据需要替换实现。

这基本上是发布/订阅 http://en.wikipedia.org/wiki/Publish/subscribe or the 观察者模式 http://en.wikipedia.org/wiki/Observer_pattern,一些很好的例子是 Cocoa 的NS通知中心 http://developer.apple.com/mac/library/documentation/Cocoa/Reference/Foundation/Classes/NSNotificationCenter_Class/Reference/Reference.html class, EventBus http://www.dossier-andreas.net/software_architecture/eventbus.html由 Ray Ryan 在 GWT 社区和其他几个社区中推广的模式。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

事件驱动架构的 jQuery 插件? 的相关文章

  • 如何防止用户控件表单在 C# 中处理键盘输入(箭头键)

    我的用户控件包含其他可以选择的控件 我想实现使用箭头键导航子控件的方法 问题是家长控制拦截箭头键并使用它来滚动其视图什么是我想避免的事情 我想自己解决控制内容的导航问题 我如何控制由箭头键引起的标准行为 提前致谢 MTH 这通常是通过重写
  • 如何在发布期间复制未版本化的测试资源:执行?

    我的问题与 Maven 在发布时不会复制未跟踪的资源 https stackoverflow com questions 10378708 maven doesnt copy untracked resources while releas
  • TIFF 元数据的最大大小是多少?

    TIFF 文件元数据的单个字段中可以合并的元数据数量是否有最大限制 我想在 ImageDescription 字段中存储大文本 最多几 MB 没有具体的最大限制ImageDescription但是 整个 TIFF 文件存在最大文件大小 该最
  • 使用.NET技术录制屏幕视频[关闭]

    Closed 这个问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 help closed questions 目前不接受答案 有没有一种方法可以使用 NET 技术来录制屏幕 无论是桌面还是窗口 我的目标是免费的 我喜欢小型 低
  • 如何从日期中查找该月的最后一天?

    如何在 PHP 中获取该月的最后一天 Given a date 2009 11 23 我要2009 11 30 并给出 a date 2009 12 23 我要2009年12月31日 t返回给定日期所在月份的天数 请参阅的文档date ht
  • Redis如何存储关联数组?设置、散列还是列表?

    我对 Redis 的所有可用存储选项有点困惑 我想做一些简单的事情 并且不想过度设计它 我正在与phpredis and Redis v2 8 6 我有一个需要存储的简单关联数组 我还需要能够通过其键检索项目并循环遍历所有项目 a arra
  • PHPUnit 和 Zend Framework assertRedirectTo() 问题

    我在创建的测试中遇到了 assertRedirectTo 问题 下面是我使用的代码 public function testLoggedInIndexAction this gt dispatch this gt assertControl
  • 如何使用asm.js进行测试和开发?

    最近我读到asm js规范 看起来很酷 但是是否有任何环境 工具来开发和测试这个工具 这还只是处于规范阶段吗 您可以尝试使用 emscripten 和 ASM JS 1 并从侧分支在 firefox 构建中运行它 有关 asm js 的链接
  • 从超立方体图像中获取文本的确切位置

    使用 tesseract 中的 GetHOCRText 0 方法 我能够检索 html 中的文本 并在 webview 中呈现 html 时 我能够获取文本 但图像中文本的位置与输出不同 任何想法都非常有帮助 tesseract gt Se
  • 节拍匹配算法

    我最近开始尝试创建一个移动应用程序 iOS Android 它将自动击败比赛 http en wikipedia org wiki Beatmatching http en wikipedia org wiki Beatmatching 两
  • Spring Boot @ConfigurationProperties 不从环境中检索属性

    我正在使用 Spring Boot 1 2 1 并尝试创建一个 ConfigurationProperties带有验证的bean 如下所示 package com sampleapp import java net URL import j
  • 对来自流读取器的过滤数据执行小计

    编辑问题未得到解答 我有一个基于 1 个标准的过滤输出 前 3 个数字是 110 210 或 310 给出 3 个不同的组 从流阅读器控制台 问题已编辑 因为第一个答案是我给出的具体示例的字面解决方案 我使用的实际字符串长度为 450 个
  • 循环内的异步性

    我正在使用 jQuery getJSON 用于从一组实用程序的给定 URL 检索数据的 API 我真的很想找到一种为每个实用程序重用代码 完全相同 的方法 由于循环的执行与 ajax 调用无关 因此我无法找到保留循环值的方法 我知道这个描述
  • 用于验证目的的动态查找方法

    我正在使用 Ruby on Rails 3 0 7 我想在运行时查找一些记录以进行验证 但为该查找方法传递 设置一个值 也就是说 在我的班级中 我有以下内容 class Group lt lt ActiveRecord Base valid
  • neo4j - python 驱动程序,服务不可用

    我对 neo4j 非常陌生 我正在尝试建立从 python3 6 到 neo4j 的连接 我已经安装了驱动程序 并且刚刚开始执行第一步 导入请求 导入操作系统 导入时间 导入urllib 从 neo4j v1 导入 GraphDatabas
  • 如何使用 Pycharm 安装 tkinter? [复制]

    这个问题在这里已经有答案了 I used sudo apt get install python3 6 tk而且效果很好 如果我在终端中打开 python Tkinter 就可以工作 但我无法将其安装在我的 Pycharm 项目上 pip
  • NotImplementedError:无法将符号张量 (lstm_2/strided_slice:0) 转换为 numpy 数组。时间

    张量流版本 2 3 1 numpy 版本 1 20 在代码下面 define model model Sequential model add LSTM 50 activation relu input shape n steps n fe
  • 升级到 Rails 6 时是否有一种编程方法可以检测 Zeitwerk::NameError?

    我目前正在将旧的 Rails 应用程序迁移到 Rails 6 好像项目中有些文件和里面定义的类不一致 运行应用程序测试时我没有看到此错误 但部署后我收到如下错误 Zeitwerk NameError expected file app my
  • 在 Nexus 7 2013 上更改方向时 CSS 媒体查询不起作用

    我目前正在我的笔记本电脑 台式电脑和 Nexus 7 2013 上测试 CSS 媒体查询 除了 Nexus 7 之外 它们在台式机和笔记本电脑上都运行良好 当我更改方向时 除非刷新页面 否则样式不会应用 例如 以纵向模式握住设备时 页面正常
  • 强制 Listview 不重复使用视图(复选框)

    我做了一个定制Listview 没有覆盖getView 方法 Listview 中的每个项目都具有以下布局 联系布局 xml

随机推荐