觀察者模式
觀察者模式是一種對(duì)象行為模式,它定義對(duì)象間的一種一對(duì)多的依賴關(guān)系,當(dāng)被觀察者狀態(tài)發(fā)生改變時(shí)，所有的觀察者都得到通知并自動(dòng)更新.
-
圖例
image.png 代碼實(shí)現(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)用場(chǎ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)點(diǎn) | 缺點(diǎn) |
|---|---|
| 觀察者模式解除了主題和具體觀察者的耦合,讓耦合的雙方都依賴于抽象,而不依賴于具體. | 1毅往、如果一個(gè)被觀察者對(duì)象有很多的直接和間接的觀察者的話牵咙，將所有的觀察者都通知到會(huì)花費(fèi)很多時(shí)間。 2攀唯、如果在觀察者和觀察目標(biāo)之間有循環(huán)依賴的話洁桌，觀察目標(biāo)會(huì)觸發(fā)它們之間進(jìn)行循環(huán)調(diào)用，可能導(dǎo)致系統(tǒng)崩潰侯嘀。 3另凌、觀察者模式?jīng)]有相應(yīng)的機(jī)制讓觀察者知道所觀察的目標(biāo)對(duì)象是怎么發(fā)生變化的，而僅僅只是知道觀察目標(biāo)發(fā)生了變化戒幔。 |
