ホームページ > 記事 > ウェブフロントエンド > JavaScriptイベント管理
今回は、JavaScriptイベント管理について、JavaScriptイベント管理を使用する際の注意事項とは何ですか、以下は実践的なケースですので、見てみましょう。
JavaScript xxsdk を設計する際、呼び出し元がワークフローに参加できるようにすることを検討し、コールバック関数の使用を開始しました。次のように:
this.foo = function(args,callbackFn) { //do something //then if callbackFn is a function callbackFn(); };
または初期化中に設定を渡します。
function SDK(config) { var configs = { onInit: function() { }, onFoo: function () { }, // on.... }; //合并参数 configs = $.extend(configs, config); this.foo = function (args) { //do something configs.onFoo(); }; }
しかし、ここで問題が発生します。関数が増えると、最初のメソッドの後に 1 つ以上のコールバック関数が続く必要があり、ユーザーが呼び出したときにのみ機能するようになります。コールバックは実行され、ユーザーに公開されていないメソッドには使用されません。 2 番目の方法では、関数が増えるほど構成が長くなり、構築コードが見苦しくなります。一方、1 つのメソッドは 1 つのコールバックのみをトリガーします。最後に、次のメソッドを使用しました
最初にイベント マネージャーを定義するのが主なアイデアであり、各イベント タイプをコールバック リストに対応させ、同じイベントを複数回外部に関連付けることができます。関連付けをキャンセルすると、そのイベント タイプの関数リストからコールバック関数が削除されます。トリガーとは、リスト内のすべての関数を実行することです。もちろんパラメータも含まれます。
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); } } } };
次に、SDK で関連付けと削除のメソッドを公開します:
//给外部绑定事件 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'); };
そうすれば、ユーザーがそれを使用するのがより便利になります。
//绑定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); } });
最初にバインドし、削除してからバインドすることもできます。
var oninit = function() { console.log('init...'); }; sdk.on('init', oninit); sdk.on('init', function () { console.log('other init'); }); sdk.off('init', oninit); sdk.init();
すべてのコード:
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();
コードの表示
実行結果:
一部のメソッド、once()、removeListener()、removeAllListeners()などを拡張することもできます。
概要: イベント処理この方法はよりシンプルでスケーラブルです。 jquery のイベント メカニズムは、イベント リスニング関数を DOM 要素にバインドせず、データ キャッシュ モジュールに基づいて管理されます。ここでの参考として、同じイベント タイプのすべてのリスニング オブジェクト handleObj がリスニング オブジェクトの配列ハンドルを構成します。 dom 操作 が関与していないため、比較的簡単です。
この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。 推奨読書:WeChatスキャンコード決済のためのAsp.Net MVC開発
jQuery、Angular、nodeにおけるPromiseの詳細な説明
以上がJavaScriptイベント管理の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。