關(guān)于javascript自定義事件管理

2024-03-27    分類: 網(wǎng)站建設(shè)

在模塊化的應(yīng)用程序開發(fā)中,大多數(shù)情況一個模塊使用一個回調(diào)函數(shù)就夠了,如果遇到需要多回調(diào)函數(shù)的情況,如一個使用了插件機(jī)制的web相冊系統(tǒng)。

A是核心模塊,負(fù)責(zé)本地緩存與遠(yuǎn)程數(shù)據(jù)加載、分頁、切換照片、歷史記錄管理等操作,插件B、C、D、…數(shù)目與結(jié)構(gòu)并不確定,此時如何在A執(zhí)行插件的回調(diào)函數(shù)呢?我們可以自定義事件的方式來綁定并執(zhí)行多個回調(diào)函數(shù),類似addEventListener (DOM)、attachEvent (IE)方式,在A執(zhí)行關(guān)鍵操作的時候總是觸發(fā)一個固定名稱自定義事件,而外部插件任意可以向其綁定回調(diào)函數(shù),實(shí)現(xiàn)代碼:

/** * 回調(diào)函數(shù)機(jī)制 * 支持多個回調(diào)函數(shù)綁定 * @author?? ??? ?tangbin * @see?? ??? ??? ?http://www.planeart.cn/?p=1182 * @namespace */ var callback = (function () { var that = this, cache = {}, fName = '${callback}', fVal = 1;

/** * @scope callback */ return { /** * 綁定回調(diào)函數(shù) * @example var loadEndFn = function (photoId, photoIndex) { * ?? ?// [code..] * }; * callback.bind('getData', loadEndFn); * @param?? ?{String}?? ?名稱 * @param?? ?{Function}?? ?要綁定的回調(diào)函數(shù) */ bind: function (name, callback) { !cache[name] && (cache[name] = {}); !callback[fName] && (callback[fName] = fVal ++); cache[name][callback[fName]] = callback; },

/** * 移除回調(diào)函數(shù) * @example var loadEndFn = function (photoId, photoIndex) { * ?? ?// [code..] * }; * callback.unbind('getData', loadEndFn); * @param?? ?{String}?? ?名稱 * @param?? ?{Function}?? ?要卸載的回調(diào)函數(shù) */ unbind: function(name, callback) { callback === undefined ? delete cache[name] : callback[fName] && (delete cache[name][callback[fName]]); },

/** * 觸發(fā)回調(diào)函數(shù) * @example var photoId = 34356, photoIndex = 0; * callback.trigger('getData', [photoId, photoIndex]); * @param?? ?{String}?? ?名稱 * @param?? ?{Array}?? ??? ?(可選)傳遞給事件處理函數(shù)的附加參數(shù) */ trigger: function (name, data) { var i, ret, callbacks = cache[name]; if (callbacks) for (i in callbacks) ret = callbacks[i].apply(that, data); return ret; }

};

})();

當(dāng)然,也可以猥瑣的為“on”類型的事件提供多回調(diào)函數(shù)綁定(有些javascript框架的事件機(jī)制就基于此來解決跨瀏覽器兼容)。

本文來自成都品牌網(wǎng)站建設(shè)網(wǎng)站設(shè)計(jì)公司-創(chuàng)新互聯(lián)

名稱欄目:關(guān)于javascript自定義事件管理
路徑分享:http://muchs.cn/news23/322073.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供微信小程序面包屑導(dǎo)航、外貿(mào)建站、定制網(wǎng)站App設(shè)計(jì)、定制開發(fā)

廣告

聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)

微信小程序開發(fā)