フロントエンドカスタムイベントのプログラミングベース

一.概要
フロントエンド開発の際、モジュールとモジュール間の通信が発生した場合、この2つのモジュールをAとBと略称し、AとBの通信の条件は、AがまずBに通信すると言って、それからAがいくつかのデータをBに伝え、フロントエンドBでAにデータのフィードバックを受け取る必要がないことを想定します.ここでは、Aモジュールにおいて1つのイベントがトリガーされ、Bモジュールにおいて同じイベントが登録され、Bに登録されたイベントがトリガーされると、Bはそのイベントを感知し、関連するデータを受信するように設計することができる.もちろん、1つのイベントは複数回の登録をトリガーすることができ、1回のトリガーで、複数回の登録が応答します.実はここのイベントはフロントエンドのいくつかの標準的なイベントの概念と同じで、例えばフロントエンドでボタンのクリックイベントに応答するには、clickイベントを登録しながら、自分のイベント処理関数を書くことができます.複数のclickイベントが登録されている場合、ボタンをクリックすると、複数のclickイベントがトリガーされます.すなわち、いわゆるイベントバブル思想です.
二.単純コードテスト
event-center.js

/**
 * author:yangbolin
 * desc:    
 * date:2013-02-18
 */
var YBL = new Object();
(function($, app){
	YBL.EVENT = {
		host:$('<div/>'),		//      jQuery  ，                  
		pub:function(eType, data) {
			//         
			this.host.trigger(eType, data);
		}
	}
})(jQuery);

reg-trigger.js

/**
 * author:yangbolin
 * date: 2013-02-28 
 * desc:     
 */
jQuery(function($){
	var E = YBL.EVENT,
		host = E.host;
		
	var mod = {
		init:function() {
			this.computeScore();
			this.computeLevel();
			this.start();
		},
		start:function() {
			var data = {
				score:1,
				level:2
			}
			E.pub("RUN", data);// RUN     
		},
		/** RUN            **/
		computeScore:function(){
			host.on("RUN", function(e, data){ //  RUN  
				console.log("compute score " + data.score);
			});
		},
		/** RUN            **/
		computeLevel:function() {
			host.on("RUN", function(e, data){
				console.log("compute level " + data.level);
			});
		},
	}
	mod.init();
});

test.html

<script src=".../jquery/jquery.js"></script>
<script src="event-center.js"></script>
<script src="reg-trigger.js"></script>

実行結果は次のとおりです:compute score 1 compute level 2
三.まとめ
イベントを用いた通信は確かにモジュールとモジュールの結合度を低下させることができ,特に1つのモジュールが複数のモジュールと通信する場合,このようなイベントの設計理念が重要になる.同时に私达は设计のモードを学んだことがあって、観察者の设计のモードはみんながすべてよく知らないことを信じて、ここの事件のメカニズムは実はいわゆる観察者の设计のモードで、事件の登录は観察者の登录のようで、事件の触発は観察者のnotifyのようです.