發佈訂閱模式-1
//jQuery callbacks原理
window.jQuery= {
callbacks(){
let callbacks = [];
function add(callback){
callbacks.push(callback)
}
function remove(callback){
callbacks = callbacks.filter(item=>item!==callback);
}
function fire(){
callbacks.forEach(item=>item())
}
return {
add,
remove,
fire
}
}
}
let a = jQuery.callbacks();
let a1 = ()=>{console.log('add a1')}
let a2 = ()=>{console.log('add a2')}
a.add(a1);
a.add(a2);
a.remove(a1);
a.fire();
發佈訂閱模式-2
class EventEmitter{
constructor(){
this._events = {}
}
on(type,listener){
let listeners = this._events[type];
if(listeners){
listeners.push(listener)
}else{
this._events[type] = [listener]
}
}
emit(type){
let listeners = this._events[type];
let args = Array.prototype.slice.call(arguments);
if(listeners){
listeners.forEach(item => item(...args));
}
}
}
let eve = new EventEmitter();
eve.on('click',function(name,age){
console.log('click',name,age)
})
eve.emit('click','test',9)
發佈訂閱-3
class Agent{
constructor(){
this._events = {};
}
subscribe(type,listener){
let listeners = this._events[type];
if(listeners){
listeners.push(listener);
}else{
this._events[type] = [listener]
}
}
publish(type){
let listeners = this._events[type];
let args = Array.prototype.slice.call(arguments,1);
if(listeners){
listeners.forEach(listener=>listener(...args));
}
}
}
class LandLord{
constructor(name){this.name = name;}
lend(agent,area,money){
agent.publish('house',area,money)
}
}
class Tenant{
constructor(name){this.name = name;}
rent(agent){
agent.subscribe('house',(area,money)=>{
console.log(`${this.name}看到中介的新房源了,${area}平方,房租${money}`)
})
}
}
let agent = new Agent();
let t1 = new Tenant('張三');
let t2 = new Tenant('李四');
t1.rent(agent);
t2.rent(agent);
let landLord = new LandLord();
landLord.lend(agent,60,4000)