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

当你有多个部分可以无限制地组合使用时,你可以使用它,在这种情况下你不提前知道所有组合,或者假设所有组合都更有效.

假设您正在构建一个社交媒体应用程序,并且您编写了一个类来封装用户列表.在某些屏幕上,单击列表中的用户会打开他们的个人资料,在另一个屏幕上可能会点击用户搜索他们留下的每个评论,而在第三个屏幕上则会发生其他情况.

如果你不使用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() { }.