<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 观察者模式 就是解决了 回调地狱 和 异步（还没讲）
// 这里解决的是 回调地狱（多层嵌套回调）
class Observer{
constructor () {
this.obj = {}
}
// 订阅者 就是往里面添加债主
addEvent (eventName,fn) {
if (typeof this.obj[eventName] === "undefined") {
// 你是债主类型 然而我的债主太多了 我就创建一个债主群
this.obj[eventName] = [];
}
// 一开始就没有有债主群 if就创建了一个债主群 然后把你放里面 fn 就是我欠的钱 记录上
// 一开始我就有债主群 那我直接把你放里面 fn 就是我欠的钱 记录上
this.obj[eventName].push(fn);
}
// 发布者 通知债主们
trigger(eventName){
if (typeof this.obj[eventName] !== "undefined") {
this.obj[eventName].forEach(item => {
item()
});
} else {
throw Error ('没有债主')
}
}
}
// 欠钱本人
let zhangsan = new Observer();
// 添加债主 和欠款
zhangsan.addEvent('zhaizhu1',function(){
console.log("王二欠一百");
zhangsan.trigger('zhaizhu2'); // 还完王二还李三
})
zhangsan.addEvent('zhaizhu2',function(){
console.log("李三欠二百");
zhangsan.trigger('zhaizhu3')// 还完李三还赵四
})
zhangsan.addEvent('zhaizhu3',function(){
console.log("赵四欠三百");
zhangsan.trigger('zhaizhu4')// 还完赵四还八路
})
zhangsan.addEvent('zhaizhu4',function(){
console.log("八路欠四百");
})
// 两秒后 我有钱了 该还钱了
setTimeout(function() {
zhangsan.trigger('zhaizhu1')
},2000)
</script>
</body>
</html>
1143
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
