Wie kann sichergestellt werden, dass das Ereignis nur einmal hinzugefügt wird?

Question

Ich möchte überprüfen, ob jedes Mal, wenn sich die URL geändert hat, ich ein Ereignis auslösen würde. Da gibt es keine pushstate Ereignis folge ich diesem Rat How to get notified about changes of the history via history.pushState?

(function(history) { 
    var pushState = history.pushState; 
    history.pushState = function(state) { 
    if (typeof history.onpushstate == "function") { 
     history.onpushstate({ 
     state: state 
     }); 
    } 
    return pushState.apply(history, arguments); 
    } 

    function e(event) { 
    console.log("location: " + document.location + ", state: " + JSON.stringify(event.state)); 
    } 
    window.addEventListener('popstate', e); 
    history.onpushstate = e; 
})(window.history) 

jedoch meine lib erlaubt mutliple Instanzen. Wenn ich meine Bibliothek mehrere Male initialisiere, würde ich Nachrichten erhalten, je nachdem wie oft die Bibliothek initialisiert wurde. Ist es trotzdem möglich, dass ich sicherstellen kann, dass nur ein Ereignis angehängt ist, obwohl ich dieses Snippet mehrmals ausgeführt habe?

Answer 1

Eine Möglichkeit, dies zu erreichen, könnte die Verwendung eines zwischengeschalteten Objekts sein. Auf diese Weise können Sie das Ereignis in der Instanz steuern, die Sie entfernen möchten, und es kann problemlos für andere ähnliche Anwendungsfälle erweitert werden. Ich habe eine öffentliche isBound-Boolesche Instanz einer Instanz hinzugefügt, in der Sie überprüfen möchten, ob das Ereignis abonniert wurde.

(function(history) { 
    var pushState = history.pushState; 

    function e(event) { 
    console.log("location: " + document.location + ", state: " + JSON.stringify(event.state)); 
    } 

    function proxyPopstateEvent (evt) { 
    history.pushState = function(state) { 
     if (typeof history.onpushstate == "function") { 
     history.onpushstate({ 
      state: state 
     }); 
     } 
     return pushState.apply(history, arguments); 
    } 

    var proxy = function (e) { 
     this.event = e; 
     this.isBound = false; 

     this.bindPopstateEvent = function() { 
     window.addEventListener('popstate', this.event); 
     history.onpushstate = this.event; 
     this.isBound = true; 
     } 

     this.removePopstateEvent = function() { 
     window.removeEventListener('popstate', this.event); 
     history.onpushstate = {}; 
     } 
    }; 
    window.popstateEventProxy = new proxy(evt); 
    window.popstateEventProxy.bindPopstateEvent(); 
    } 

    if (!window.popstateEventProxy) { 
    proxyPopstateEvent(e); 
    } 
})(window.history)