JavaScript niestandardowy odbiornik zdarzeń

Question

Zastanawiam się, czy ktoś może mi pomóc zrozumieć, jak dokładnie tworzyć różne niestandardowe detektory zdarzeń.

Nie mam konkretnego przypadku zdarzenia, ale chcę się uczyć w zasadzie jak to zrobić, więc mogę zastosować go tam, gdzie jest to potrzebne.

czego szukałem do zrobienia, nie rozczarować niektórzy ludzie mogą wiedzieć, było:

var position = 0; 

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

Answer 1

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); 

Oto sposób to zrobić bardziej lokalnie, identyfikowanie słuchaczy i wydawców: http://www.kaizou.org/2010/03/generating-custom-javascript-events/

Answer 2

Wdrażanie niestandardowych zdarzeń nie jest trudne. Możesz go wdrożyć na wiele sposobów. Ostatnio robię to tak:

/*************************************************************** 
* 
* 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; 
    } 
}; 

obserwowalnym obiekt może być ponownie wykorzystane i stosowane przez co konstruktor musi go po prostu przez mixng prototyp Obserwowalne z protoype tego konstruktora.

aby rozpocząć odtwarzanie, trzeba zarejestrować się do zaobserwowania przedmiotu, tak jak poniżej:

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

Albo jeśli słuchacz jest metodą obiektu, tak jak poniżej:

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

Gdzie detektor jest instancją obiektu, który implementuje metodę "handler".

obserwowalnym obiekt może teraz wywołać jego metodę fireEvent gdy coś się dzieje, że chce przekazać swoich słuchaczy:

this.fireEvent("myEvent", data); 

gdzie dane są niektóre dane, które słuchacze moich znaleźć interesujące. Wszystko, co włożysz, zależy od Ciebie - wiesz najlepiej, z czego składa się twoje niestandardowe wydarzenie.

Metoda fireEvent po prostu przechodzi przez wszystkie detektory zarejestrowane dla "myEvent" i wywołuje zarejestrowaną funkcję. Jeśli funkcja zwróci wartość false, oznacza to, że zdarzenie zostało anulowane, a obserwowalne nie wywoła innych detektorów. W rezultacie cała metoda fireEvent również powróci, więc obserwujący wie, że jakiekolwiek działanie powiadamiające jej słuchaczy powinno zostać wycofane.

Być może to rozwiązanie nie pasuje do wszystkich, ale ja, ve, mieliśmy wiele korzyści z tego stosunkowo prostego kawałka kodu.

Answer 3

stąd:

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); 

Answer 4

Tutaj jest naprawdę proste (maszynopis/Babelish) implementacja:

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)) 
    }; 
}; 

go używać tak:

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

Albo w klasach jak to

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

Jeśli chcesz zwykły JavaScript można transpile go za pomocą TypeScript playground.