JavaScript問題中的中介模式

Question

我正在為我的工作創建一種基於調解器的庫。 我們創建了大量應用程序，因此我想要一些可以在每個應用程序的基礎上輕松獲取和修改的內容。 我也希望它很容易創建“小部件”（缺少一個更好的術語）並且易於刪除它們而不用擔心破壞任何東西。 我們制作的許多這些應用程序也可以由外部開發人員為應用程序制作應用程序或小部件進行擴展。

這就是我遇到調解員模式的方式。 我寫了一些像這樣的東西：

//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/

Answer 1

與小部件交互的小部件：我剛剛在幾天前完成了這個。 我仔細研究了你實現它的方式，這里有一些額外的想法。

您構建的推送系統與jQuery的DOM事件系統非常相似，可以發送和接收任意事件。 我一直在使用該系統開發去耦合小部件然而我發現它非常缺乏因為最終“推”（事件，發出，等等）都是脫離上下文的 - 因為在聽眾中不知道是否這樣在他們詢問事件之前，甚至在他們想要的范圍內。

例如，考慮網頁上的每個UI元素是否是系統中的小部件。 一頁上很容易就會有30多個。 如果每個人都要推送“已加載”的消息，則其他29人必須接收它。 此外，正如您所提到的，第三方開發人員將為此系統進行開發。 然后它將負擔放在它們上以過濾掉他們不想接收的消息。

我在最新的小部件通信系統中采用的方法就是我稱之為“pubstring”/“substring”的方法（公平地說，我確信其他人在我面前提出這個想法並且有一些很酷的聲音它的名字）。 基本上，每當窗口小部件“推送”時，該推送就會變成一個字符串，其中包含：領域（上下文），窗口小部件的類型，窗口小部件的特定ID，以及特定的消息。

例如，比如一個ID為45的小部件，鍵入“tweet-list”，在領域“custom”中推送消息“loaded”。 然后pub字符串將呈現為： custom.tweet-list.45.loaded 。

訂閱時，它們通過哈希表輸入，哈希表可以選擇包含4個屬性的值（除了我擁有的領域/類型/ 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);

因為正則表達式實際上只是一個連接，所以regex也可以包含在過濾器中。

// 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);

我知道這很長，但希望它能給你一些想法。