JavaScript体系结构-中介，何时使用它们

JavaScript architecture - mediators, when to use them?

本文关键字：何时使 体系结构 中介 JavaScript      更新时间：2023-09-26

这更像是一个关于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)));

显然，有了上面的代码，我可以使用相同的Namespace（根据页面/站点部分），并通过myNamespace.className.init()等调用它们。如果我愿意，我也可以组合这些，但为了可读性，我封装了类。

现在，我一直在读http://addyosmani.com/largescalejavascript/关于调解员的概念。我的第二个问题是我应该在什么时候（如果）使用这些？从className2显然我可以做：

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

那么，为什么它会订阅像mediator.subscribe("classNameInit")这样的className并在className中发布该事件呢？

我对有关代码结构的建议持高度开放态度，因为这是我在更改JavaScript编写方式时需要纠正的问题。

当你有多个部件将以无限的组合一起工作时，你会使用它，因为你不提前知道所有的组合，或者假设所有的组合更有效。

假设您正在构建一个社交媒体应用程序，并编写了一个类来封装用户列表。在一些屏幕上，点击列表中的用户会打开他们的个人资料，在另一个屏幕上，也许点击用户会搜索他们留下的每一条评论，而在第三个屏幕上会发生其他事情。

如果您使用mediator/pubsub而不是编写这个，那么您最终会在onclick事件中得到一堆If语句。。。

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')
}

Mediator是这个问题的解决方案，因为它不需要UserList了解它可能出现的每一种情况。相反，UserList中的上述代码可以简单地进行精炼，以便在用户点击时广播…

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

然后，你的每个其他屏幕或UI片段都可以简单地监听用户点击消息。。。

// 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() { }。

相关文章：