揭示JavaScript客户端消息框架设计：中介者与观察者对比

145 浏览量更新于2024-09-01 收藏 135KB PDF 举报

本文深入探讨了JavaScript中客户端消息框架设计的原理，特别关注了中介者模式与观察者模式的区别。首先，作者指出“发布者/订阅者”(pub/sub)术语虽然常见，但在抽象概念层面可能不直观。观察者模式的核心是对象记录观察者并管理其回调函数，如在DOM操作中，通过addEventListener方法，元素监听特定事件。这一模式要求对象维护状态并处理可能的参数传递。观察者模式的特点包括： 1. 直接访问被观察对象，以便执行回调。 2. 对象内部保存观察者列表。 3. 参数传递的灵活性，可能有0到多个参数。相比之下，中介者模式则引入了一个“第三方”，作为观察者与被观察对象之间的桥梁。中介者通常提供API如“发布”、“订阅”和“取消订阅”，用于管理通信逻辑。在服务器端，中介者可能被设计得更具体到某个领域，但通用的中介者角色也可视作信息经纪人。中介者模式强调解耦和封装通信方式，允许对象间的松散耦合。通过对比，本文旨在帮助开发者理解这两种模式在JavaScript客户端应用中的实际应用，以及何时选择使用哪种模式来设计高效的消息传递框架。同时，文章提醒读者注意模式的具体实现细节和潜在扩展性，以确保代码的可维护性和灵活性。

详解详解JavaScript中的客户端消息框架设计原理中的客户端消息框架设计原理

哇——是个危险的题目，对吗？我们对于什么是本质的理解当然会随着我们对要解决问题的理解而变化。因此我不会说谎

——一年前我所理解的本质很不幸并不完整，因为我确信我将要写的已经快伴随我有6个月之久。所以，这篇文章是我在发现

JavaScript中成功的运用客户端消息模式的一些关键要点时的一个掠影。

1.) 理解中介者与观察者的区别理解中介者与观察者的区别

大多数人在描述任何事件/消息机制的时候喜欢套用“发布者/订阅者”(pub/sub)——但我认为这个术语不能很好的与抽象建立联

系。当然，从根本上说，一些东西订阅了另一些东西发布的事件。但是发布者与订阅者在何等层次上封装在一起有可能使一个

好的模式变得暗淡无光。那么，区别在什么地方呢？

观察者观察者

观察者模式包括了被一个或多个观察者所观察的某个对象。典型的，该对象记录下所有观察者的痕迹，通常是用一个list来存

储观察者注册的回调方法，这些是观察者为了接收通知而订阅的。注意: (哦，双关语，我有多爱他们啊)（译者注：Observe

观察、注意）

var observer = {

listen : function() {

console.log("Yay for more cliché examples...");

}

};

var elem = document.getElementById("cliche");

elem.addEventListener("click", observer.listen);

一些需要注意的事情是:

我们必须获得对此对象的直接引用

此对象必须保持一些内部的状态，保存观察者的回调痕迹

有时侦听者不会利用由此对象返回的任何参数，理论上来说，有可能有 0-n*个参数 (更多是取决于以后会变得多有趣)

* n事实上不是无限的，但为了讨论的目的，它指我们永远也达不到的极限

中介者中介者

中介者模式在一个对象与一个观察者之间引入了一个“第三方”——有效的将二者解耦而且将他们之间如何通信封装起来。一个

中介者的API可能像“发布”、“订阅”、“取消订阅”一样简单，或者某个领域范围内的实现可能被提供用来隐藏这些方法于某些更

有意义的语义之中。大多数我用过的服务器端的实现更倾向于领域范围而不是更简单，但是并没有对一个通用的中介者有任何

规则限制！并不罕见，有种想法认为一个通用的中介者是一种信息经纪人。无论何种情形，结果都一样——特定对象与观察者

之间不再互相直接知晓：

// It's fun to be naive!

var mediator = {

_subs: {},

// a real subscribe would at least check to make sure the

// same callback instance wasn't registered 2x.

// Sheesh, where did they find this guy?!

subscribe: function(topic, callback) {

this._subs[topic] = this._subs[topic] || [];

this._subs[topic].push(callback);

// lolwut? No ability to pass function context? :-)

publish : function(topic, data) {

var subs = this._subs[topic] || [];

subs.forEach(function(cb) {

cb(data);

});

}

var FatherTime = function(med) { this.mediator = med; };

FatherTime.prototype.wakeyWakey = function() {

this.mediator.publish("alarm.clock", {

time: "06:00 AM",

canSnooze: "heck-no-get-up-lazy-bum"

});

}

var Developer = function(mediator) {

this.mediator = mediator;

this.mediator.subscribe("alarm.clock", this.pleaseGodNo);

};

Developer.prototype.pleaseGodNo = function(data) {

下载后可阅读完整内容，剩余4页未读，立即下载

weixin_38748769

粉丝: 10
资源: 925

揭示JavaScript客户端消息框架设计：中介者与观察者对比

javascript常见的7个框架

DWZ富客户端框架

揭示JavaScript客户端消息框架设计的奥秘：中介者与观察者模式详解

详解JavaScript实现设计模式中的适配器模式的方法

DWZ富客户端框架使用详解

ExtJS框架详解：打造富客户端应用的布局设计

DWZ富客户端框架详解与实战应用

EXTJS框架详解：打造富客户端应用

DWR中文教程：JavaScript框架详解

DWZ富客户端框架API详解与组件介绍

最新资源