自定义事件(观察者模式)

发布于 2024-10-08 01:43:32 字数 484 浏览 7 评论 0原文

我找不到如何实现这个(我为自由式记录道歉):

//assign the event handler for the object "myObj"     
myObj.onMyEvent = //do something

//if something happened somewhere, then run the event
MyEvent.fire();

这个想法是我们调用(生成)一些自定义事件(MyEvent)。我们有一个对象“myObj”,它能够识别“MyEvent”的发生并以某种方式(以他自己的方式)对其做出响应。 此外,我们还有其他对象(不同类型),它们(以自己的方式)对“MyEvent”做出反应。

我知道有“观察者模式”,但我找不到具体的实现。

你能告诉我在哪里可以读到它吗? 或者说本质上一般是不可能的? 或者它的做法完全不同?

更新 1:请不要使用 JS 库(jQuery、Prototype、YUI,...)

I can not find how to implement this (I apologize for the freestyle record):

//assign the event handler for the object "myObj"     
myObj.onMyEvent = //do something

//if something happened somewhere, then run the event
MyEvent.fire();

The idea is that we call (generate) some custom event (MyEvent). We have an object "myObj" that is able to recognize the occurrence of the "MyEvent" and somehow (in his own way) to respond to it.
In addition, we have other objects (diffrent sorts), that (in their own way) react to "MyEvent".

I know that there are "observer pattern" but I can not find a specific implementation.

Can you please tell where to read about it?
Or in nature is generally not possible?
Or it is done quite differently?

Update 1: no JS libs, please (jQuery, Prototype, YUI, ...)

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

寂寞笑我太脆弱 2024-10-15 01:43:32

请不要使用 JS 库(jQuery、Prototype、YUI...)

我会认真地重新考虑这个要求。所有这些库都多次解决了这个或类似的问题。

但如果您想从头开始,请执行以下操作:

window.customEvents = {
    handlers : {
        foo:[],
        bar:[],
        baz:[]
    },

    registerEventHandler:function(event, object, handler){
       if(typeof(customEvents.handlers[event])=="undefined")
           customEvents.handlers[event]=[]; 
       customEvents.handlers[event].push([object, handler]);
    },

    fireEvent:function(eventName, data){
        if(customEvents.handlers[event]){
            for(var i = 0; i < customEvents.handlers[event].length; i++){
                var handlerPair = customEvents.handlers[event][i];
                handlerPair[1](handlerPair[0], data);
            }
        }
    },

}

用法:

// register event handler
customEvents.registerEventHandler(eventName, targetObject, handlerFunction)

// fire event
customEvents.fireEvent(eventName, data)

// handlerFunction will be passed two parameters: targetObject and event data

no JS libs, please (jQuery, Prototype, YUI, ...)

I would seriously re-think this requirement. All of these libraries have solved this or similar problems many times.

But if you want to start from scratch, do something like this:

window.customEvents = {
    handlers : {
        foo:[],
        bar:[],
        baz:[]
    },

    registerEventHandler:function(event, object, handler){
       if(typeof(customEvents.handlers[event])=="undefined")
           customEvents.handlers[event]=[]; 
       customEvents.handlers[event].push([object, handler]);
    },

    fireEvent:function(eventName, data){
        if(customEvents.handlers[event]){
            for(var i = 0; i < customEvents.handlers[event].length; i++){
                var handlerPair = customEvents.handlers[event][i];
                handlerPair[1](handlerPair[0], data);
            }
        }
    },

}

Usage:

// register event handler
customEvents.registerEventHandler(eventName, targetObject, handlerFunction)

// fire event
customEvents.fireEvent(eventName, data)

// handlerFunction will be passed two parameters: targetObject and event data
花开雨落又逢春i 2024-10-15 01:43:32

我的解决方案:

var customEvents = {
            _handlers : {},

            subscribe: function(event, handler){
               if(typeof(this._handlers[event])=="undefined")
                   this._handlers[event]=[]; 
               this._handlers[event].push(handler);
            },

            fire:function(event, data){
                if(this._handlers[event]){
                    for(var i = 0; i < this._handlers[event].length; i++){
                        this._handlers[event][i](data);
                    }
                }
            }
    };


var myObj1 = new function(){
        this.handler = function(data){
            console.log(data+'1');
        };
        customEvents.subscribe("greatEvent", this.handler);
    };  



var myObj2 = new function(){
        this.handler = function(data){
            console.log(data+'2');
        };
        customEvents.subscribe("greatEvent", this.handler);
    };  


//if something happened somewhere, then run the event
customEvents.fire("greatEvent", 'ta-da');

My solution:

var customEvents = {
            _handlers : {},

            subscribe: function(event, handler){
               if(typeof(this._handlers[event])=="undefined")
                   this._handlers[event]=[]; 
               this._handlers[event].push(handler);
            },

            fire:function(event, data){
                if(this._handlers[event]){
                    for(var i = 0; i < this._handlers[event].length; i++){
                        this._handlers[event][i](data);
                    }
                }
            }
    };


var myObj1 = new function(){
        this.handler = function(data){
            console.log(data+'1');
        };
        customEvents.subscribe("greatEvent", this.handler);
    };  



var myObj2 = new function(){
        this.handler = function(data){
            console.log(data+'2');
        };
        customEvents.subscribe("greatEvent", this.handler);
    };  


//if something happened somewhere, then run the event
customEvents.fire("greatEvent", 'ta-da');
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文