javascript - जावास्क्रिप्ट कस्टम घटना श्रोता




event-listener (5)

कस्टम घटनाओं को लागू करना मुश्किल नहीं है। आप इसे कई तरीकों से कार्यान्वित कर सकते हैं। हाल ही में मैं इसे इस तरह कर रहा हूँ:

/***************************************************************
*
*   Observable
*
***************************************************************/
var Observable;
(Observable = function() {
}).prototype = {
    listen: function(type, method, scope, context) {
        var listeners, handlers;
        if (!(listeners = this.listeners)) {
            listeners = this.listeners = {};
        }
        if (!(handlers = listeners[type])){
            handlers = listeners[type] = [];
        }
        scope = (scope ? scope : window);
        handlers.push({
            method: method,
            scope: scope,
            context: (context ? context : scope)
        });
    },
    fireEvent: function(type, data, context) {
        var listeners, handlers, i, n, handler, scope;
        if (!(listeners = this.listeners)) {
            return;
        }
        if (!(handlers = listeners[type])){
            return;
        }
        for (i = 0, n = handlers.length; i < n; i++){
            handler = handlers[i];
            if (typeof(context)!=="undefined" && context !== handler.context) continue;
            if (handler.method.call(
                handler.scope, this, type, data
            )===false) {
                return false;
            }
        }
        return true;
    }
};

पर्यवेक्षक वस्तु का पुन: उपयोग किया जा सकता है और उस कन्स्ट्रक्टर के प्रोटोटाइप के साथ पर्यवेक्षण के प्रोटोटाइप को मिश्रित करके किसी भी कन्स्ट्रक्टर द्वारा इसे लागू किया जा सकता है।

सुनने शुरू करने के लिए, आपको स्वयं को देखने योग्य ऑब्जेक्ट में पंजीकृत करना होगा, जैसे:

var obs = new Observable();
obs.listen("myEvent", function(observable, eventType, data){
    //handle myEvent
});

या यदि आपका श्रोता एक वस्तु का एक तरीका है, तो ऐसा है:

obs.listen("myEvent", listener.handler, listener);

जहां श्रोता एक वस्तु का एक उदाहरण है, जो विधि "हैंडलर" लागू करता है।

ऑब्जेर्जेबल ऑब्जेक्ट अब अपने फायरवेन्ट विधि को कॉल कर सकता है जब भी ऐसा होता है कि वह अपने श्रोताओं से संवाद करना चाहता है:

this.fireEvent("myEvent", data);

जहां डेटा कुछ डेटा है जो श्रोताओं को दिलचस्प लगता है। जो भी आप वहां डालते हैं वह आपके ऊपर है - आपको पता है कि आपकी कस्टम घटना क्या है।

फायरवेन्ट विधि बस उन सभी श्रोताओं के माध्यम से जाती है जो "myEvent" के लिए पंजीकृत थे, और पंजीकृत फ़ंक्शन को कॉल करते हैं। यदि फ़ंक्शन झूठा लौटाता है, तो इसका अर्थ यह है कि ईवेंट रद्द कर दिया गया है, और अवलोकन योग्य अन्य श्रोताओं को नहीं बुलाएगा। नतीजतन, संपूर्ण फायरएवेंट विधि भी फासल लौटाएगी, इसलिए अवलोकन योग्य जानता है कि जो भी कार्यवाही उसके श्रोताओं को सूचित कर रहा था उसे अब वापस ले जाना चाहिए।

शायद यह समाधान सभी के अनुरूप नहीं है, लेकिन मुझे कोड के अपेक्षाकृत सरल टुकड़े से बहुत फायदा हुआ है।

मैं सोच रहा था कि अगर कोई मुझे समझने में मदद कर सकता है कि अलग-अलग कस्टम इवेंट श्रोताओं को कैसे बनाया जाए।

मेरे पास एक घटना का एक विशिष्ट मामला नहीं है लेकिन मैं सामान्य रूप से सीखना चाहता हूं कि यह कैसे किया जाता है, इसलिए मैं इसे लागू कर सकता हूं जहां इसकी आवश्यकता है।

जो मैं करना चाहता था, बस कुछ लोगों को जानना आवश्यक हो सकता है, था:

var position = 0;

for(var i = 0; i < 10; i++)
{
    position++;
    if((position + 1) % 4 == 0)
    {
        // do some functions
    }
}

var evt = document.createEvent("Event");
evt.initEvent("myEvent",true,true);

// custom param
evt.foo = "bar";

//register
document.addEventListener("myEvent",myEventHandler,false);

//invoke
document.dispatchEvent(evt);

श्रोताओं और प्रकाशकों को इंगित करने, इसे और अधिक स्थानीय रूप से करने का तरीका यहां दिया गया है: http://www.kaizou.org/2010/03/generating-custom-javascript-events/


यहां एक बहुत ही सरल (टाइपस्क्रिप्ट / बेबेलिश) कार्यान्वयन है:

const simpleEvent = <T extends Function>(context = null) => {
    let cbs: T[] = [];
    return {
        addListener: (cb: T) => { cbs.push(cb); },
        removeListener: (cb: T) => { let i = cbs.indexOf(cb); cbs.splice(i, Math.max(i, 0)); },
        trigger: (<T> (((...args) => cbs.forEach(cb => cb.apply(context, args))) as any))
    };
};

आप इसे इस तरह इस्तेमाल करते हैं:

let onMyEvent = simpleEvent();
let listener = (test) => { console.log("triggered", test); };
onMyEvent.addListener(listener);
onMyEvent.trigger("hello");
onMyEvent.removeListener(listener);

या इस तरह के वर्गों में

class Example {
    public onMyEvent = simpleEvent(this);
}

यदि आप सादा जावास्क्रिप्ट चाहते हैं तो आप टाइपस्क्रिप्ट प्लेग्राउंड का उपयोग कर इसे पारदर्शी कर सकते हैं।


यहां से:

https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Creating_and_triggering_events

// create the event
var evt = document.createEvent('Event');
// define that the event name is `build`
evt.initEvent('build', true, true);

// elem is any element
elem.dispatchEvent(evt);


// later on.. binding to that event
// we'll bind to the document for the event delegation style. 
document.addEventListener('build', function(e){
   // e.target matches the elem from above
}, false);

AngularJS

ठीक है अगर आप कोणीय का उपयोग कर रहे हैं तो आप भी ऐसा कर सकते हैं

var newObject = angular.copy(oldObject);




javascript event-listener