Question

我正在尝试在ExtJs / Javascript中构建一个应用程序，并注意到事件是保持组件彼此独立的好方法。但是，引发和捕获事件的方式使得它们对调用者和接收者更具体。

有没有更好的方法来做到这一点。我打算编写一个中心EventBus类，任何组件都可以使用它来引发一个事件，另一个可以注册来监听它。

是否有任何库可用于实现此类目的。我看到backbone.js不确定它正在做我正在寻找的事情。

Answer 1

如果您已经有一个使用Mediator或publisher/subscriber模型进行事件委派的框架（无论是否被称为{{1>}，编写observer都很简单{1}}或events或他们将系统称为actions或其他任何内容。

您只需将emitter设为唯一Mediator / emitter / etc，然后将您的模块/ classes / services / etc访问publisher。

Mediator

如果您愿意，您甚至可以在课程中做一些事情，包装您的调解员，这样您就可以为您的“课程”/模块提供公共方法，这看起来像他们自己的事件，但将是将数据传递给调解员：

var myEvents = Mediator(),

Module1 = (function (events) {
    var private_data = {},
        private_method = function () {},
        public_interface = { init : init };

    function init () { // setup procedures
        events.listen("widget/process/request", function (data) {
            var result = doStuff(data);
            events.fire("widget/process/result", result);
        });
    }
}(myEvents)),

Module2 = (function (events) {
    var private_data = {},
        public_interface = { init : init };

    function init (data) { // setup procedures
        events.fire("widget/process/request", data);
        events.listen("widget/process/result", private_method);
    }

    return public_interface;
}(myEvents));


Module1.init();
Module2.init(data);

您的模块现在都可以访问一个中介或者您选择的多个中介......您可以为每个小部件提供自己的中介，其各个组件可以共享......加上每个小部件访问系统范围的中介，因此当组件无法访问AJAX或DOM等全局服务时，组件本身就可以。

通过在组件中提供一个接口，您可以使用公共包装调用整齐地编程（在主进程中以更经典的方式编程，而不是以lambda / callback-heavy JS方式编写），所以现在：

var myClass = function () {
    var mediator = null,
        public_interface = {
        fire : function (evt, data) { if (!mediator) { return; } mediator.fire(evt, data); },
        listen : function (evt, handler) { if (!mediator) { return; } mediator.listen(evt, handler); },
        setMediator : function (newMediator) { mediator = newMediator; }
    }
};

var mediator = Mediator(),
    obj1 = myClass(),
    obj2 = myClass();

obj1.setMediator(mediator);
obj2.setMediator(mediator);

obj1.listen("event1", obj1.doStuff.bind(obj1));
obj2.fire("event1", obj2.data);

或者类似的东西可能在您的项目中看起来 - var imageLoader = ImageLoader(); imageLoader.setMediator(mediator); img = imageLoader.load("myimg037"); imageLoader.fire("imageloader/imageloaded/myimg037", img);对任何其他模块一无所知，但是当您调用其imageLoader方法时，任何模块共享同一个介体，并监听该事件将会收到通知。

Answer 2

通过ozef Sakalos（又名Saki）查看MsgBus插件。

http://examples.extjs.eu/?ex=msgbus

它为ExtJS组件之间的消息传递提供了一个发布/订阅模型。

Answer 3

此功能已通过extjs4.x中的控制器实现。控制器是监听事件并对其采取行动的中心位置。此外，每个组件都有fireEvent方法来触发可以在控制器中再次监听的自定义事件。有关详细信息，请参阅文档：

http://docs.sencha.com/ext-js/4-1/#!/guide/application_architecture

和

http://docs.sencha.com/ext-js/4-1/#!/api/Ext.app.Controller

处理ExtJS / Javascript事件的更好方法

3 个答案: