發佈訂閱
- 訂閱-發佈模式定義了對象之間的一種一對多的依賴關係，當一個對象的狀態發生改變時，所有依賴它的對象都可以得到通知。
- 發佈訂閱是一種編程思想；
- 先進行訂閱，訂閱時把事件存儲到一個事件池中，然後到了條件成立時，遍歷事件池中的方法，把訂閱的方法都執行；
- 觀察者模式 自定義事件模式；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="box"></div>
<script>
// 發佈訂閱是一種編程思想；
// 先進行訂閱，訂閱時把事件存儲到一個事件池中，然後到了條件成立時，遍歷事件池中的方法，把訂閱的方法都執行；
// 觀察者模式 自定義事件模式；
//box.addEventListener("click",fn,false)
//box.removeEventListener("click",fn,false)
//box.onclick = fn;
//box.onclick = null
// setTimeout(function(){},1000)
//
let box = document.getElementById("box");
// 訂閱
function on(curEle,type,fn){
if(!curEle[type]){// 第一次進來，給其一個默認值是[];也只有第一次執行時，會執行；
// 給元素新增一個鍵值對；屬性名是type的值；屬性值[];
curEle[type]=[];
}
let arr = curEle[type];// 事件池；放在了元素的一個屬性上；
// find : 找true；如果找到滿足條件，會立即停止循環
// 爲了防止重複添加fn;所以先判斷；如果不存在，加進去；
let isHas = arr.find(function(item){return item===fn});
if(!isHas){// 如果找不到，返回undefined；說明不存在這個fn，需要將fn放入事件池中
arr.push(fn);
}
}
// 發佈
function emit(curEle,type){
let arr = curEle[type];// 獲取到事件池中的方法
for(let i=0;i<arr.length;i++){// 循環事件池，讓其中的方法循環執行；
// 檢測是函數，才繼續執行；
if(typeof arr[i] ==="funcion"){
arr[i]();
}
}
}
// 取消訂閱
function off(curEle,type,fn){
let arr = curEle[type];
// 通過filter，過濾出去fn;
for (let i=0;i<arr.length;i++){
if(fn===arr[i]){
// arr.splice(i,1);
// i--;
arr[i]=null;// 不會產生數組的塌陷；
}
}
// curEle[type]=arr.filter(function(item){
// return item!==fn;
// })
}
// $on $emit
on(box,"boiling",fn1);
on(box,"boiling",fn2);
on(box,"boiling",fn3);
off(box,"boiling",fn2);
// box :{boiling:[fn1,fn2],working:[fn3]}
function fn1(){
console.log("泡麪")
}
function fn2(){
console.log("泡咖啡")
}
function fn3(){
console.log("泡腳");
}
setTimeout(()=>{
emit(box,"boiling")
},3000)
</script>
</body>
</html>