觀察者模式
觀察者模式是一種對象行為模式,它定義對象間的一種一對多的依賴關(guān)系,當(dāng)被觀察者狀態(tài)發(fā)生改變時，所有的觀察者都得到通知并自動更新.
-
圖例
image.png 代碼實現(xiàn)
class Baby{
constructor(){
this.observes=[];
this.status='';
}
attach(...watcher){
this.observes.push(...watcher)
}
chageStatus(){
this.status='寶寶哭啦'
if(this.observes.length){
this.observes.forEach(fn=>{fn.update(this.status)})
}
}
}
class Father{
update(status){
return console.log(`爸爸知道${status}`)
}
}
class Mather{
update(status){
return console.log(`媽媽知道${status}`)
}
}
let baby=new Baby();
baby.attach(new Father,new Mather);
baby.chageStatus() //爸爸知道寶寶哭啦 媽媽知道寶寶哭啦
- 應(yīng)用場景
1.普通事件綁定
<button id="btn">按鈕</button>
let btn=document.querySelector("#btn");
btn.addEventListener('click',function(event){
console.log(event)
})
- promise
let promise=new Promise((resolve,reject)=>{
setTimeout(()=>{
resolve(11111)
},1000)
})
promise.then(res=>{
console.log(res)
}).catch(err=>{
console.log(err)
})
3.jquery Callbacks
let $={
Callbacks(){
let callbacks=[]
function add(fn){
callbacks.push(fn)
}
function remove(fn){
callbacks=callbacks.filter(item=>item!=fn)
}
function fire(){
callbacks.forEach(item=>item())
}
return{
add,
remove,
fire
}
}
}
let callbacks=$.Callbacks();
function a1(){
console.log('a1')
}
function a2(){
console.log('a2')
}
function a3(){
console.log('a3')
}
callbacks.add(a1)
callbacks.add(a2)
callbacks.add(a3)
callbacks.remove(a2)
callbacks.fire() //a1 a3
- node events
let EvenetEmitter=require('events');
let eve=new EvenetEmitter();
eve.on('click',function(name){
console.log(name) //zdb
})
eve.emit('click','zdb')
- fs createReadStrema
let fs=require('fs');
let path=require('path');
let rs=fs.createReadStream(path.join(__dirname,'1.txt'))
rs.on('data',function(data){
console.log(data)
})
rs.on('end',function(){
console.log('end')
})
6.vue watch
watch: {
$route(to, from) {
console.log(to,from)
}
}
7.vuex 官網(wǎng)示例
| 優(yōu)點 | 缺點 |
|---|---|
| 觀察者模式解除了主題和具體觀察者的耦合,讓耦合的雙方都依賴于抽象,而不依賴于具體. | 1、如果一個被觀察者對象有很多的直接和間接的觀察者的話，將所有的觀察者都通知到會花費很多時間。 2、如果在觀察者和觀察目標(biāo)之間有循環(huán)依賴的話，觀察目標(biāo)會觸發(fā)它們之間進行循環(huán)調(diào)用，可能導(dǎo)致系統(tǒng)崩潰。 3、觀察者模式?jīng)]有相應(yīng)的機制讓觀察者知道所觀察的目標(biāo)對象是怎么發(fā)生變化的，而僅僅只是知道觀察目標(biāo)發(fā)生了變化。 |
