JavaScript架構 - 介體，何時使用它們？

Question

這更多的是關於我的JavaScript代碼結構的一般問題，如果我正朝着結構良好的代碼走向正確的方向。

當前的代碼我有：

(function (myNamespace, $, undefined) { 
    myNamespace.className = { 
     init:function { } // do stuff 
    } 
} (window.myNamespace= window.myNamespace|| {}, jQuery))); 

(function (myNamespace, $, undefined) { 
     myNamespace.className2 = { 
      init:function { } // do stuff 
     } 
} (window.myNamespace= window.myNamespace|| {}, jQuery))); 

顯然與上面的代碼，我可以使用相同的命名空間（每頁/現場部分），並通過myNamespace.className.init()叫他們等等。我還可以結合這些如果我想，但我封裝類的可讀性。

現在，我一直在閱讀關於介體的概念http://addyosmani.com/largescalejavascript/。我的第二個問題是什麼時候（以及如果）我應該使用這些？從className2很明顯，我可以這樣做：

myNamespace.className2 = { 
       init:function { myNamespace.className.init() } // do stuff 
      } 

那麼，爲什麼這個曾經訂閱的className像mediator.subscribe("classNameInit")和發佈的className的活動？

我非常樂於接受有關我的代碼結構的建議，因爲這是我需要正確的操作，同時改變了我編寫JavaScript的方式。

Answer 1

如果您有多個部分可以無限組合使用，而您不知道所有組合的時間或者假設所有組合的效率更高，您都可以使用它。

假設您正在構建社交媒體應用程序，並且您編寫了一個類來封裝用戶列表。在某些屏幕上，單擊列表中的用戶可以打開他們的個人資料，在另一個屏幕上點擊用戶搜索他們留下的每一個評論，然後在第三個屏幕上發生其他事情。

如果你寫這個使用不調停/發佈訂閱，你最終得到的是一堆的if語句在onclick事件......

UserList.prototype.onUserClick = function(user) { 
    // Check if we're supposed to open a popup 
    if (this.mode === 'profile') 

    // Check for something else 
    else if (this.mode === 'something else') 

    // Check for another case 
    else if (this.mode === 'foo') 
} 

調解是一個解決方案這個問題，因爲它不要求在UserList擁有的每一個情況，可能在最終的知識，而是在UserList的上面的代碼可以簡單地精被點擊用戶時播出......

UserList.prototype.onUserClick = function(user) { 
    this.publish('user-click', user); 
} 

然後你的每一個其他屏幕或用戶界面件可以簡單地監聽用戶點擊消息...

// On pages where there needs to be a popup profile 
Mediator.onMessage('user-click', function(data) { 
    showProfilePopup(data); 
}); 

// Or perhaps on a search page 
SearchBox.onMessage('user-click', function(data) { 
    this.searchByUser(data); 
}); 

此外，在調解開始照耀是因爲這些其他的UI組件，比如SearchBox是特別是當UserList大火用戶不感興趣點擊，他們只有當用戶點擊發布時才感興趣，其他頁面上的UI控件也可以觸發用戶點擊，並且這些片段可以對其作出反應。

在旁註中，className = { }未創建類。你可能想要的是className = function() { }。