JavaScript event management-JS Tutorial-php.cn

This time I will bring you JavaScript event management, What are the precautions for using JavaScript event management, the following is a practical case, let’s take a look take a look.

When designing JavaScript xxsdk, we considered allowing callers to participate in the workflow, and started using callback functions. As follows:

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

Copy after login

Or pass in config during initialization.

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

Copy after login

But here comes the problem. As there are more functions, the first method becomes very annoying. The parameters of each method must be followed by one or more callback functions. The code seems unclean, and only the user The callback will only be executed when it is called, and it will not be used for methods that are not exposed to the user. In the second way, the more functions there are, the longer the config will be and the construction code will look ugly. On the other hand, one method will only trigger one callback. Finally, the following method was used

Event Management

First define an event manager. The main idea is to have each event type correspond to a callback list, so that the external world can associate multiple events with the same event. Second-rate. Canceling an association is to remove a callback function from the function list of that event type. Triggering is to execute all the functions in the list. Of course, parameters are also included.

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

Copy after login

Then publish the association and removal methods in the sdk:

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

Copy after login

Trigger events respectively during the execution process:

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

Copy after login

Then the user will compare when using it convenient.

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

Copy after login

You can also bind it first, remove it and then bind it.

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

Copy after login

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

Copy after login

View Code

Execution results:

You can also extend some methods once( ), removeListener(), removeAllListeners(), etc.

Summary: The event processing method is more concise and more scalable. The event mechanism of jquery does not bind event listening functions to DOM elements, but is managed based on the data cache module. For reference here, all listening objects handleObj of the same event type type form the listening object array handles. Because there is no dom operation involved, it is relatively simple.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!