设计模式学习之三 — 观察者模式

发表于 |

观察者模式介绍

又叫发布-订阅模式，是js事件模式中常见的一种，比如jquery的点击事件，在我们声明点击事件后，当我们用trigger方法去触发click事件时，事件会被响应，这就是一种监听者模式，

观察者模式应用场景

某一件事中，我们声明了一个事件A，然后想监听A方法的触发。

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
var event = {
	clientList: [],
	listen: function(key, fn){
		if( !this.clientList[key] ){
			this.clientList[key] = [];
		}
		this.clientList[key].push(fn);
	},
	trigger: function(){
		var key = Array.prototype.shift.call(arguments),
			fns = this.clientList[key];

		if(!fns || fns.length == 0){
			return false;
		}

		for(var i=0, fn; fn=fns[i++];){
			fn.apply(this, arguments);
		}
	}
};
var installEvent = function(obj){
	for(var i in event){
		obj[i] = event[i];
	}
}; 

var salesOffices = {};
installEvent(salesOffices);

salesOffices.listen('squareMeter88', function( price ){
	console.log('价格= ' + price);
});
salesOffices.listen("squareMeter110", function(price){
	console.log('价格= ' + price);
});

salesOffices.trigger('squareMeter88', 2000000);
salesOffices.trigger('squareMeter88', 3000000);

以上代码,把事件的列表放在clientList数组中，listen方法是通过键值对的方式，key为事件，value为事件需要调用的方法，把他们放进数组，trigger是通过遍历数组去找到监听的事件A，然后通过遍历其value去触发对应的方法.
clientList的结构如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
clientList:[
    {
        squareMeter88: [
            fn1,fn2,fn3，...
        ]
    }，
    {
        squareMeter100: [
            fn1,fn2,fn3，...
        ]
    }，
    {
        要监听的事件: [
            要触发的方法1,要触发的方法2,要触发的方法3，...
        ]
    }，
]

完