JavaScript-Ereignisverwaltung

Dieses Mal bringe ich Ihnen JavaScript Event-Management, Was sind die Vorsichtsmaßnahmen für die Verwendung von JavaScript Event-Management? Das Folgende ist ein praktischer Fall, nehmen wir an gemeinsam einen Blick werfen. Schauen Sie mal rein.

Beim Entwerfen des JavaScript xxsdk haben wir darüber nachgedacht, Anrufern die Teilnahme am Workflow zu ermöglichen, und haben begonnen, die Rückruffunktion zu verwenden. Wie folgt:

this.foo = function(args,callbackFn) {      //do something
        //then  if callbackFn is a function       callbackFn();
 };

oder übergeben Sie die Konfiguration während der Initialisierung.

 function SDK(config) {            var configs = {
                onInit: function() {
                },
                onFoo: function () {
                },                // on....            };            //合并参数
            configs = $.extend(configs, config);            this.foo = function (args) {                //do something                configs.onFoo();
            };
}

Aber hier kommt das Problem, die erste Methode wird sehr ärgerlich. Den Parametern jeder Methode müssen eine oder mehrere Rückruffunktionen folgen Der Rückruf wird nur ausgeführt, wenn der Benutzer ihn aufruft, und er wird nicht für Methoden verwendet, die dem Benutzer nicht zugänglich sind. Zweitens: Je mehr Funktionen vorhanden sind, desto länger wird die Konfiguration und der Konstruktionscode sieht hässlich aus. Andererseits löst eine Methode nur einen Rückruf aus. Abschließend wurde die folgende Methode verwendet:

Ereignisverwaltung

Definieren Sie zunächst einen Ereignismanager. Die Hauptidee besteht darin, dass jeder Ereignistyp einer Rückrufliste entspricht, sodass dasselbe Ereignis zugeordnet werden kann mit mehreren externen Ereignissen. Durch das Aufheben einer Zuordnung wird eine Rückruffunktion aus der Funktionsliste dieses Ereignistyps entfernt. Beim Auslösen werden alle Funktionen in der Liste ausgeführt. Natürlich sind auch Parameter enthalten.

 var eventManger = {                
                handlers: {},                //类型,绑定事件 
                addHandler:function(type,handler) {                    if (typeof this.handlers[type] == "undefined") {                        this.handlers[type] = [];//每个事件都可以绑定多次                    }                    this.handlers[type].push(handler);
                },
                removeHandler:function(type, handler) {                    var events = this.handlers[type];                    for (var i = 0, len = events.length; i < len; i++) {                        if (events[i] == handler) {
                            events.splice(i, 1);                            break;
                        }
                    }
                },
                trigger: function (type) {                    if (this.handlers[type] instanceof Array) {                        var handlers = this.handlers[type];                        var args = Array.prototype.slice.call(arguments, 1);                        for (var i = 0, len = handlers.length; i < len; i++) {                            handlers[i].apply(null, args);
                        }
                    }
                }
            };

Veröffentlichen Sie dann die Zuordnungs- und Entfernungsmethoden im SDK:

 //给外部绑定事件
            this.on = function(type, event) {
                eventManger.addHandler(type,event);
            };            //移除事件
            this.off = function(type, event) {
                eventManger.removeHandler(type, event);
            };

Lösen Sie jeweils Ereignisse während des Ausführungsprozesses aus:

           this.init = function() {                //do init
                eventManger.trigger('init');
            };            this.start = function() {                //do start
                eventManger.trigger('start');
            };            this.connect = function() {
                eventManger.trigger('connect');
            };            this.messages = function() {                var msgs = [];
                msgs.push("你好吗");
                msgs.push("我很好");                eventManger.trigger('messages',msgs);
            };            this.disconnect = function() {
                eventManger.trigger('disconnect');
            };

Dieser Benutzer ist es bequemer bei der Verwendung.

//绑定connect
 sdk.on('connect', function () {
            console.log('connect');
        });//绑定messages
        sdk.on('messages', function (data) {            if (!data) return;            if (data instanceof Array) {                for (var i = 0; i < data.length; i++) {
                    console.log(data[i]);
                }
            } else {
                console.log(data);
            }
       });

Sie können es auch zuerst binden, entfernen und dann binden.

var oninit = function() {
            console.log('init...');
        };
 sdk.on('init', oninit);
 sdk.on('init', function () {
            console.log('other init');
        });
 sdk.off('init', oninit);
        sdk.init();

Alle Codes:

    function SDK() {            var eventManger = {                
                handlers: {},                //类型,绑定事件 
                addHandler:function(type,handler) {                    if (typeof this.handlers[type] == "undefined") {                        this.handlers[type] = [];//每个事件都可以绑定多次                    }                    this.handlers[type].push(handler);
                },
                removeHandler:function(type, handler) {                    var events = this.handlers[type];                    for (var i = 0, len = events.length; i < len; i++) {                        if (events[i] == handler) {
                            events.splice(i, 1);                            break;
                        }
                    }
                },
                trigger: function (type) {                    if (this.handlers[type] instanceof Array) {                        var handlers = this.handlers[type];                        var args = Array.prototype.slice.call(arguments, 1);                        for (var i = 0, len = handlers.length; i < len; i++) {
                            handlers[i].apply(null, args);
                        }
                    }
                }
            };            //给外部绑定事件
            this.on = function(type, event) {
                eventManger.addHandler(type,event);
            };            //移除事件
            this.off = function(type, event) {
                eventManger.removeHandler(type, event);
            };            this.init = function() {                //do init
                eventManger.trigger('init');
            };            this.start = function() {                //do start
                eventManger.trigger('start');
            };            this.connect = function() {
                eventManger.trigger('connect');
            };            this.messages = function() {                var msgs = [];
                msgs.push("你好吗");
                msgs.push("我很好");
                eventManger.trigger('messages',msgs);
            };            this.disconnect = function() {
                eventManger.trigger('disconnect');
            };            this.autoRun = function() {                this.init();                this.start();                this.connect();                this.messages();                this.disconnect();
            };
            
        }        var sdk = new SDK();        var oninit = function() {
            console.log('init...');
        };
        sdk.on('init', oninit);
        sdk.on('start', function () {
            console.log('start');
        });
        sdk.on('connect', function () {
            console.log('connect');
        });
        sdk.on('messages', function (data) {            if (!data) return;            
            if (data instanceof Array) {                for (var i = 0; i < data.length; i++) {
                    console.log(data[i]);
                }
            } else {
                console.log(data);
            }
        });
        sdk.on('disconnect', function () {
            console.log('disconnect');
        });
        sdk.autoRun();
        sdk.on('init', function () {
            console.log('other init');
        });
        sdk.off('init', oninit);
        sdk.init();

Code anzeigen

Ausführungsergebnisse:

Kann auch sein erweitert Einige Methoden Once(), RemoveListener(), removeAllListeners() usw.

Zusammenfassung: Die Ereignisverarbeitungsmethode ist prägnanter und skalierbarer. Der Ereignismechanismus von jquery bindet Ereignisüberwachungsfunktionen nicht an DOM-Elemente, sondern wird basierend auf dem Daten-Cache-Modul verwaltet. Als Referenz hier: Alle Listening--Objekte handleObj desselben Ereignistyps bilden die Listening-Objekt-Array-Handles. Da keine Dom-Operation erforderlich ist, ist es relativ einfach.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Asp.Net MVC-Entwicklung für WeChat-Scancode-Zahlung

So verwenden Sie den Gradienten von ss3

Detaillierte Erklärung von Promise in jQuery, Angular und Node

Das obige ist der detaillierte Inhalt vonJavaScript-Ereignisverwaltung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!