Gestion des événements JavaScript

Cette fois je vais vous présenter la gestion d'événements JavaScript, quelles sont les précautions d'utilisation de JavaScript la gestion d'événements, ce qui suit est un cas pratique, prenons un regard ensemble Jetez un oeil.

Lors de la conception du JavaScript xxsdk, nous avons envisagé de permettre aux appelants de participer au flux de travail et avons commencé à utiliser la fonction de rappel. Comme suit :

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

ou passer en config lors de l'initialisation.

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

Mais voici le problème. Comme il y a plus de fonctions, la première méthode devient très ennuyeuse. Les paramètres de chaque méthode doivent être suivis d'une ou plusieurs fonctions de rappel. Le code semble impur, et The. le rappel ne sera exécuté que lorsque l'utilisateur l'appellera et il ne sera pas utilisé pour les méthodes qui ne sont pas exposées à l'utilisateur. De la deuxième manière, plus il y a de fonctions, plus la configuration sera longue et le code de construction aura l'air moche. Par contre, une méthode ne déclenchera qu'un seul rappel. Finalement, la méthode suivante a été utilisée

Gestion des événements

Définissez d'abord un gestionnaire d'événements. L'idée principale est de faire correspondre chaque type d'événement à une liste de rappel, afin qu'un même événement puisse être associé. avec de multiples événements extérieurs. Annuler une association consiste à supprimer une fonction de rappel de la liste des fonctions de ce type d'événement. Le déclenchement consiste à exécuter toutes les fonctions de la liste. Bien entendu, des paramètres sont également inclus.

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

Publiez ensuite les méthodes d'association et de suppression dans le SDK :

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

Déclenchez des événements respectivement pendant le processus d'exécution :

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

Cet utilisateur est plus pratique lors de son utilisation.

//绑定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);
            }
       });

Vous pouvez également le lier d'abord, le retirer puis le lier.

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

Tous les 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();

Voir le code

Résultats de l'exécution :

Peut également être expand Certaines méthodes once(), removeListener(), removeAllListeners(), etc.

Résumé : La méthode de traitement des événements est plus concise et plus évolutive. Le mécanisme d'événements de jquery ne lie pas les fonctions d'écoute d'événements aux éléments DOM, mais est géré en fonction du module de cache de données. Pour référence ici, tous les objets d'écoute handleObj du même type d'événement forment les handles du tableau d'objets d'écoute. Parce qu'il n'y a pas d'opération dom impliquée, c'est relativement simple.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Développement Asp.Net MVC pour le paiement par scan code WeChat

Comment utiliser le dégradé de ss3

Explication détaillée de Promise dans jQuery, Angular et node

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!