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(); };
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(); }; }
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
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); } } } };
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); };
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'); };
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); } });
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();
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();
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!
Recommended reading:
Asp.Net MVC development for WeChat scan code payment
How to use the gradient of ss3
Detailed explanation of Promise in jQuery, Angular and node
The above is the detailed content of JavaScript event management. For more information, please follow other related articles on the PHP Chinese website!