# JS观察者模式
观察者模式:观察者模式(Observer mode)指的是函数自动观察数据对象,一旦对象有变化,函数就会自动执行。而js中最常见的观察者模式就是事件触发机制。
# 先来个完整的
class EventEmiter {
constructor () {
this.eventPool = {
// 'eventName': []
}
}
listen(eventName, callback) {
if(this.eventPool[eventName]) {
if(this.eventPool[eventName].indexOf(callback) === -1) {
this.eventPool[eventName].push(callback)
}
} else {
this.eventPool[eventName] = [callback]
}
}
// trigger是有参数的
trigger(eventName, ...args) {
if(this.eventPool[eventName]) {
this.eventPool[eventName].forEach(cb => cb(...args))
}
}
remove(eventName, callback) {
if(this.eventPool[eventName]) {
let cbIndex = this.eventPool[eventName].indexOf(callback)
this.eventPool[eventName].splice(cbIndex, 1)
}
}
once(eventName, callback) {
this.listen(eventName, function _cb(...args) {
callback(...args);
this.remove(eventName, _cb)
})
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
# 先搭架子
- 要有一个对象,存储着它自己的触发函数。而且这个对象的触发函数可能有很多种,比如一个onclick可能触发多个事件,那么handler的属性应该是一个数组,每个数组的值都是一个函数。
handler={
type1:[func1,func2...],
type2:[func3,func4...],
...
}
1
2
3
4
5
2
3
4
5
现在这个对象的主体部分已经思考好了,现在就是要它‘动起来’,给它添加各种动作。 一个事件可能有哪些动作呢?
- add:添加事件某种类型的函数,
- remove: 移除某种类型的函数,
- fire:触发某种类型的函数,
- once:触发某种类型的函数,然后移除掉这个函数
现在,自定义事件的架子已经搭建好了
eventOb={
//函数储存
handler:{
type1:[func1,func2...],
type2:[func2,func4...],
...
},
//主要事件
add:function(){},
remove:function(){},
fire:function(){},
once:function(){},
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
# 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];
}
},
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
# 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('别老想搞什么飞机,删除我有的东西!');
}
},
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
# 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('别老想搞什么飞机,触发我有的东西!');
}
},
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
但会有问题,我只想触发并且删除某个事件怎么办,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
}
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
# once
fire,然后remove
once (event, callback) {
this.fire(event, (...args) => {
callback(...args);
this.remove(event)
})
}
1
2
3
4
5
6
7
2
3
4
5
6
7
# 完整代码
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;
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55