javascript - 如何在 Javascript 单页应用程序中处理多个活动？

Question

例如，我可能有一个菜单屏幕、一个选项屏幕、一个编辑器屏幕等。以前，我已将它们中的每一个包装到一个类中，并为每个类提供并激活和停用函数。激活函数将显示相关的 dom 元素并开始接受输入。deactivate 函数将隐藏相关的 dom 元素并停止接受输入。因此，如果用户在菜单屏幕中，并单击“设置选项”按钮，我会执行以下操作：

this.deactivate() // We're currently in the menu, so the menu object is "this"
options.activate()

有处理这种情况的标准方法吗？

Answer 1

有许多框架实现了 JavaScript 中的“发布/订阅”模式。Backbone.Events 是我经常使用的一种。这是实现它的一种非常简单的方法。这假设您在项目中同时包含了主干.js和下划线.js。

var Foo = {},
    Bar = {};

_.extend(Foo, Backbone.Events);
_.extend(Bar, Backbone.Events);

Foo.prototype.deactivate = function() {
    // Do stuff 
    this.trigger("Foo_Deactivated");
};

Bar.prototype.activate = function() {
    // Do stuff 
    this.trigger("Bar_Activated");
};

myFoo = new Foo();
myBar = new Bar();

myBar.on("Foo_Deactivate", function() { 
    this.activate(); 
    this.trigger("Bar_Activated"); 
}, this);

希望这能回答你的问题！