2011-08-04 27 views
6

我正在为我的工作创建一种基于调解器的库。我们创建了大量应用程序,因此我希望能够根据每个应用程序轻松进行修改。我也希望它很容易创建“小部件”(缺少更好的术语),并且易于删除它们而不用担心会破坏任何内容。我们制作的这些应用程序中的许多应用程序都可以由外部开发人员进行扩展。JavaScript调解器模式问题

这就是我遇到中介模式的原因。我写了一些作品是这样的:

//Extend 
Core.extend('widget',function(params){ 
    alert(params.message); 
}); 

//Load it 
Core.load('widget',{message:'Hello World'}); 

//Remove it 
Core.remove('widget'); 

我有寿3个问题:

  1. 如何/你应该在这个模式用JavaScript处理DOM操作?我不希望开发人员在其小部件外部搞乱DOM。

  2. 您应该如何处理AJAX请求?你应该做什么?你应该在库中提供一个AJAX/JSONP调用(本例中为Core)。

  3. 我最大的问题是,你怎么实际上与其他小部件交互?我不想紧张的情侣(显然),但我不明白你如何与另一个部件进行交互。例如,假设您有一个文本框并在提交时将其发送给数据库。另一个窗口小部件如何称为“时间轴”窗口小部件,现在提交它,然后用文本框小部件中的文本更新时间轴?

=== UPDATE ===

我结束了写这个:

http://oscargodson.github.com/Core.js/

+0

这是一个很大的问题。你看过YUI小部件是如何实现的吗? –

+0

你最大的问题就是我也想知道的。 – hamahama

+0

@Whyzee退房http://oscargodson.github.com/Core.js/ –

回答

3

窗口小部件与部件交互:我刚刚完成建设这个前几天。我审视了你实施它的方式,这里有一些额外的想法给你。

您创建的推送系统与jQuery的DOM事件系统非常相似,可以发送和接收任意事件。我一直在使用这个系统做一些开发去耦的小部件,但是我发现它非常需要,因为最终“推”(事件,发射,任何)都脱离了上下文 - 就像听众不知道这是否是这样甚至在他们询问事件之前都在他们想要的范围内。

例如,如果网页上的每个UI元素都是您系统中的小部件,在一页上很容易就会有30+。如果每个人推送一个“加载”的消息,其他29个必须接收它。此外,正如您所提到的,第三方开发人员将为此系统开发。然后,他们将负担放在他们身上,过滤出他们不想收到的信息。

我在我最新的widget-communication系统中采用的方法就是我称之为“pubstring”/“substring”方法(并且公平地说,我确信有人在我之前提出了这个想法,有一些很酷的冠冕堂皇的名字)。基本上,无论何时一个小部件“推”,该推送都会变成一个字符串,其中包含:领域(上下文),小部件的类型,小部件的特定ID(无论它可能是什么)以及特定的消息。

举例来说,一个ID为45的小工具在领域“自定义”中键入“tweet-list”,并将消息“加载”。酒吧字符串然后将呈现为:custom.tweet-list.45.loaded

当订阅被放置时,它们通过散列表输入,它可以选择性地包含4个属性的值(除了realm/type/id/msg之外,您可以轻松添加更多值)。然后听会是这样:

listen({ realm: 'custom', type: 'whatever' }, f); // (where 'f' is a function)

您框架的监听部分可以把这一哈希表为“子”,这将是一个正则表达式表达过滤器,它代表:

custom\.whatever\.[^\.]+\.[^\.]+

该正则表达式被存储为正则表达式编译到一些隐藏数组...

__subscriptions.push(new RegExp(subString));

然后每当有东西被推动(即。发布)框架基本上遍历__subscriptions数组,引发每个存储的子字符串(正则表达式)的.test,并在匹配时执行该子字符串的回调。

使用这个系统无限过滤听众可以应用和听众知道他们正在接受因为只有他们感兴趣的语境通知

例子:

// Listen for all messages by widget ID #99 
listen({ id: 99 } ,f); 

// Listen for all messages by widgets in realm clientB 
listen({ realm: 'clientB' }, f); 

// Listen for the data-received push of widgets whose type is tweet-list 
listen({ type: 'tweet-list', message: 'data-received' }, f); 

因为正则表达式是真的只是一个串联,正则表达式也可以包含在过滤器中。

// Listen for any data- message 
listen({ message: 'data-[^\.]+' }, f); 

该系统的优点是,你仍然可以保持当前的界面,“保持简单的事情”,只是测试一个字符串或argument[0]哈希表。换句话说..

// This 
listen('loaded', f); 

// Could be equivalent to this on the backend: 
listen({ message: 'loaded' }, f); 

我知道这很长,但希望它给你一些想法。

+0

**谢谢你的回应**我刚刚正在读杰克劳森的[Mediator.js](http://thejacklawson.com/2011/06/mediators-for-modularized-asynchronous-programming-in-javascript /),你可以查看[github上的300行js文件](https://github.com/ajacksified/Mediator.js/blob /master/mediator.js)。你介意给我你的想法吗?我试图计划一个更好的方式来处理4个不同的泡沫,在这个泡沫下可以点击8-10个不同的事件,这似乎(对我来说)超过了一个简单的'事件代表'方法。我希望你能在链接上发表你的看法。 – Ricalsin