關于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自定義事件管理
路徑分享：http://m.kartarina.com/news23/322073.html

成都網站建設公司_創新互聯，為您提供微信小程序、面包屑導航、外貿建站、定制網站、App設計、定制開發

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯