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
            }

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

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

Answer 1

如果您有多个部分可以在无限组合中一起使用，而您不提前知道所有组合，或者假设所有组合更有效，那么您可以使用它。

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

如果您使用mediator / pubsub编写此 not ，那么您最终会遇到的是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);
});

此外，介体开始闪耀的原因是，当SearchBox触发用户单击时，这些其他UI组件（如UserList）对此不感兴趣，他们只对用户单击感兴趣发布后，页面上的其他 UI控件也可以触发用户点击，这些部分可以对其做出反应。

另一方面，className = { }并未创建课程。你可能想要的是className = function() { }。

JavaScript架构 - 调解员，何时使用它们？

1 个答案: