关于javascript自定义事件管理

在模块化的应用程序开发中，大多数情况一个模块使用一个回调函数就够了，如果遇到需要多回调函数的情况，如一个使用了插件机制的web相册系统。

A是核心模块，负责本地缓存与远程数据加载、分页、切换照片、历史记录管理等操作，插件B、C、D、…数目与结构并不确定，此时如何在A执行插件的回调函数呢？我们可以自定义事件的方式来绑定并执行多个回调函数，类似addEventListener （DOM）、attachEvent （IE）方式，在A执行关键操作的时候总是触发一个固定名称自定义事件，而外部插件任意可以向其绑定回调函数，实现代码：

/** * 回调函数机制 * 支持多个回调函数绑定 * @author        tangbin * @see            http://www.planeart.cn/?p=1182 * @namespace */ var callback = (function () { var that = this, cache = {}, fName = '${callback}', fVal = 1;

/** * @scope callback */ return { /** * 绑定回调函数 * @example var loadEndFn = function (photoId, photoIndex) { *     // [code..] * }; * callback.bind('getData', loadEndFn); * @param    {String}    名称 * @param    {Function}    要绑定的回调函数 */ bind: function (name, callback) { !cache[name] && (cache[name] = {}); !callback[fName] && (callback[fName] = fVal ++); cache[name][callback[fName]] = callback; },

/** * 移除回调函数 * @example var loadEndFn = function (photoId, photoIndex) { *     // [code..] * }; * callback.unbind('getData', loadEndFn); * @param    {String}    名称 * @param    {Function}    要卸载的回调函数 */ unbind: function(name, callback) { callback === undefined ? delete cache[name] : callback[fName] && (delete cache[name][callback[fName]]); },

/** * 触发回调函数 * @example var photoId = 34356, photoIndex = 0; * callback.trigger('getData', [photoId, photoIndex]); * @param    {String}    名称 * @param    {Array}        (可选)传递给事件处理函数的附加参数 */ trigger: function (name, data) { var i, ret, callbacks = cache[name]; if (callbacks) for (i in callbacks) ret = callbacks[i].apply(that, data); return ret; }

};

})();

当然，也可以猥琐的为“on”类型的事件提供多回调函数绑定（有些javascript框架的事件机制就基于此来解决跨浏览器兼容）。

本文来自成都品牌网站建设网站设计公司-创新互联

名称栏目：关于javascript自定义事件管理
路径分享：https://www.cdcxhl.com/news23/322073.html

成都网站建设公司_创新互联，为您提供微信小程序、面包屑导航、外贸建站、定制网站、App设计、定制开发

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联