6

这更像是一个关于我的 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()etc 调用它们。如果我愿意，我也可以将它们组合起来，但我封装了类以提高可读性。

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

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

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

我非常愿意接受有关我的代码结构的建议，因为这是我在改变编写 JavaScript 的方式时需要做的事情。

4

1 回答 1

8

当您有多个部分可以以无限组合一起工作时，您将使用它，您不提前知道所有组合，或者假设所有组合更有效。

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

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

于 2012-03-01T14:47:41.607 回答