201603102057_《Javascript之观察者模式(模块间通讯)》

<!-- Html代码-->
<button type="button" id="count"> 点我</button>
<div id="show"></div>
/***********************
*    Javascript代码    *
***********************/

window.onload = function(){

//将"发布者"与"订阅者"联系起来的"中介者"
var Event = (function() {

var clientList = [],
listen,
trigger,
remove;

listen = function(key, fn) {
if (!clientList[key]) {
clientList[key] = [];
}
clientList[key].push(fn);
};

trigger = function() {
var key = Array.prototype.shift.call(arguments),
fns = clientList[key];
if (!fns || fns.length === 0) {

return falsse;
}

for (var i = 0, fn; fn = fns[i++];) {
fn.apply(this, arguments);
}
};

remove = function(key, fn) {
var fns = clientList[key];
if (!fns) {
return false;
}

if (!fn) {

fns && (fns.length = 0);

}else{

for (var l = fns.length - 1; l >= 0; l--) {
var _fn = fns[l];

if (_fn === fn) {
fns.splice(l, 1);
}
}
}
};

return {
listen: listen,
trigger: trigger,
remove: remove
}

})();


var MOUDLE_A = (function(){
var count = 0;
var oBtn = document.getElementById('count');
oBtn.onclick = function(){
Event.trigger('add',count++);
};
})();

var MOUDLE_B = (function(){
var oDiv = document.getElementById('show');
Event.listen('add', function(count){
oDiv.innerHTML = count;
});
})();

};
原文地址:https://www.cnblogs.com/beesky520/p/5263458.html