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開発

ss3の勾配の使い方

jQuery、Angular、nodeにおけるPromiseの詳細な説明

以上がJavaScriptイベント管理の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。