Heim > Web-Frontend > js-Tutorial > Hauptteil

JavaScript-Ereignisverwaltung

php中世界最好的语言
Freigeben: 2018-03-16 14:25:06
Original
1406 Leute haben es durchsucht

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();
 };
Nach dem Login kopieren

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();
            };
}
Nach dem Login kopieren

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);
                        }
                    }
                }
            };
Nach dem Login kopieren

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);
            };
Nach dem Login kopieren

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');
            };
Nach dem Login kopieren

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);
            }
       });
Nach dem Login kopieren

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();
Nach dem Login kopieren

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();
Nach dem Login kopieren

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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage