この記事は 約 0分49秒 で読めます。
javascriptでカスタムイベントを登録、イベント発火時に事前に登録した処理を実行する仕組みです。
私はこうしてますが、みなさんはどうされてますか?
★単体
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
(function($) { var _events = {}; function dispatchEvent(eventName, args){ var callbacks = _events[eventName]; for (var i = 0, l = callbacks.length; i < l; i++){ callbacks[i].apply(null, args); } } function addCustomListener(eventName, callback){ var events = _events, callbacks = events[eventName] = events[eventName] || []; callbacks.push(callback); } })(jQuery); |
★使用例
1 2 3 4 5 6 7 8 9 10 11 12 |
(function($) { addCustomListener('LOAD_SUCCESS', test); //あるタイミングでイベント完了を発行すると、この時に処理が実行される。 dispatchEvent('LOAD_SUCCESS', [{'abc':'def'}]); function test(obj){ alert(obj['abc']); //引数も受け取れちゃう! } })(jQuery); |
クラス風に使う場合は以下のようにしています。
★クラス風味(正確には拡張というの?理解不足…)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
//Testクラス (function(window, doc){ //コンストラクタ var Test = function (options){ var that = this, i; that._events = {}; that.options = { *** : null, }; for(i in options) that.options[i] = options[i]; }; //プロトタイプ Test.prototype = { //プライベート _dispatchEvent: function(eventName, args){ var that = this; var callbacks = that._events[eventName]; for(var i = 0, l = callbacks.length; i < l; i++){ callbacks[i].apply(null, args); } }, _init: function(){ //どこかの何かの処理 //イベント発火 that._dispatchEvent('LAYOUT_SUCCESS', [{'abc':'def'}]); }, //パブリック setOptionValue : function (options){ var that = this; for(i in options) that.options[i] = options[i]; }, addCustomListener : function(eventName, callback){ var that = this; var events = that._events, callbacks = events[eventName] = events[eventName] || []; callbacks.push(callback); } }; if (typeof exports !== 'undefined') exports.Test = Test; else window.Test = Test; })(this, document); |
★使用例
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
(function($){ //インスタンス化(でいいの?) var T = new Test({ *** : *** //渡したい値など }); T.addCustomListener('LAYOUT_SUCCESS', alertTest); function alertTest(obj){ alert(obj['abc']); //引数も受け取れちゃう! } })(jQuery); |
カスタムイベントのdipatchはできた時は思わずニヤッとしちゃいましたね。いい思い出です。
ちなみにjsファイルを分ける場合もひとつにめとめる場合も、先にTestクラスを定義する必要があります。(そうしないと未定義エラー出ます)