观察者模式:观察者模式（Observer mode）指的是函数自动观察数据对象，一旦对象有变化，函数就会自动执行。而js中最常见的观察者模式就是事件触发机制。
ES5/ES6实现观察者模式(自定义事件) - 简书
先搭架子
- 要有一个对象，存储着它自己的触发函数。而且这个对象的触发函数可能有很多种，比如一个onclick可能触发多个事件，那么handler的属性应该是一个数组，每个数组的值都是一个函数。
handler={
type1:[func1,func2...],
type2:[func3,func4...],
...
}
- 现在这个对象的主体部分已经思考好了，现在就是要它‘动起来’，给它添加各种动作。
一个事件可能有哪些动作呢？
- add：添加事件某种类型的函数，
- remove: 移除某种类型的函数，
- fire：触发某种类型的函数,
- once:触发某种类型的函数，然后移除掉这个函数
- 现在，自定义事件的架子已经搭建好了
eventOb={
//函数储存
handler:{
type1:[func1,func2...],
type2:[func2,func4...],
...
},
//主要事件
add:function(){},
remove:function(){},
fire:function(){},
once:function(){},
}
add
添加一个事件监听，首先传入参数应该是 事件类型type，和触发函数 func，传入的时候检测有没有这个函数，有了就不重复添加。
add:function (type,func) {
//检测type是否存在
if(eventOb.handleFunc[type]){
//检测事件是否存在，不存在则添加
if(eventOb.handleFunc[type].indexOf(func)===-1){
eventOb.handleFunc[type].push(func);
}
}
else{
eventOb.handleFunc[type]=[func];
}
},
remove
remove有一个潜在的需求，就是如果你的事件不存在，它应该会报错。而这里不会报错，index在func不存在的时候是-1；这时候要报错。
remove:function (type,func) {
try{
let target = eventOb.handleFunc[type];
let index = target.indexOf(func);
if(index===-1) throw error;
target.splice(index,1);
}catch (e){
console.error('别老想搞什么飞机，删除我有的东西！');
}
},
fire
触发一个点击事件肯定是要触发它全部的函数，这里也是一样，所以只需要传入type，然后事件可能不存在，像上面一样处理。
fire:function (type,func) {
try{
let target = eventOb.handleFunc[type];
let count = target.length;
for (var i = 0; i < count; i++) {
//加()使立即执行
target[i]();
}
}
catch (e){
console.error('别老想搞什么飞机，触发我有的东西！');
}
},
once
fire，然后remove？
但会有问题，我只想触发并且删除某个事件怎么办，fire一下就全触发了呀。
所以fire的问题就显现出来了。我们还是要给它一个func，但是可选。
fire:function (type,func) {
try{
let target = eventOb.handleFunc[type];
if(arguments.length===1) {
//不传func则全部触发
let count = target.length;
for (var i = 0; i < count; i++) {
target[i]();
}
}else{
//传func则触发func
let index=target.indexOf(func);
if(index===-1)throw error;
func();
}
//need some code
}catch (e){
console.error('别老想搞什么飞机，触发我有的东西！');
//need some code
}
},
完整代码
class eventObs {
constructor(){
this.handleFunc={}
}
add(type,func){
if(this.handleFunc[type]){
if(this.handleFunc[type].indexOf(func)===-1){
this.handleFunc[type].push(func);
}
}else{
this.handleFunc[type]=[func];
}
};
fire(type,func){
try{
if(arguments.length===1) {
let target = this.handleFunc[type];
let count = target.length;
for (var i = 0; i < count; i++) {
target[i]();
}
}else{
let target = this.handleFunc[type];
let index=target.indexOf(func);
if(index===-1)throw error;
func();
}
return true;
}catch (e){
console.error('别老想搞什么飞机，触发我有的东西！');
return false;
}
};
remove(type,func){
try{
let target = this.handleFunc[type];
let index=target.indexOf(func);
if(index===-1)throw error;
target.splice(index,1);
}catch (e){
console.error('别老想搞什么飞机，删除我有的东西！');
}
};
once(type,func) {
this.fire(type, func)
? this.remove(type, func)
: null;
}
}
使用ES6的Reflect来实现一个观察者模式
[!NOTE]
函数(观察者)自动观察数据对象（观察的目标），一旦对象发生变化，函数就会自动执行
// 观察者设计模式
const queuedObservers = new Set();
const observe = fn => queuedObservers.add(fn);
const observable = obj => new Proxy(obj, {set});
function set(target, key, value, receiver) {
const result = Reflect.set(target, key, value, receiver);
queuedObservers.forEach(observer => observer());
return result;
}
// test
const person = observable({
name: '张三',
age: 20
});
function print() {
console.log(`${person.name}, ${person.age}`)
}
observe(print);
person.name = '李四';
// 输出
// 李四, 20
