设计模式之观察者模式

观察者模式

观察者模式(Observer)完美的将观察者和被观察的对象分离开。举个例子,用户界面可以作为一个观察者,业务数据是被观察者,用户界面观察业务数据的变化,发现数据变化后,就显示在界面上。面向对象设计的一个原则是:系统中的每个类将重点放在某一个功能上,而不是其他方面。一个对象只做一件事情,并且将他做好。观察者模式在模块之间划定了清晰的界限,提高了应用程序的可维护性和重用性。
观察者设计模式定义了对象间的一种一对多的依赖关系,以便一个对象的状态发生变化时,所有依赖于它的对象都得到通知并自动刷新。

模式作用:

  1. 支持简单的广播通信,自动通知所有已经订阅过的对象
  2. 页面载入后目标对象很容易与观察者存在一种动态关联,增加了灵活性
  3. 目标对象与观察者之间的抽象耦合关系能够单独扩展以及重用

注意事项:

  1. 监听要在触发之前

例子:

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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>观察者模式</title>
<script src="http://cdn.bootcss.com/jquery/3.0.0-alpha1/jquery.min.js"></script>
</head>
<body>
<script>
~(function(){
var o=$({});
$.jianting=function(){
o.on.apply(o,arguments)
}
$.fabu=function(){
o.trigger.apply(o,arguments)
}
$.qingchu=function(){
o.off.apply(o,arguments)
}
})()
$.jianting('myEvent',function(e,a,b,c){
alert(a+"||"+b+'||'+c);
})
setTimeout(function(){
$.fabu('myEvent',[1,2,3])
},1000)
</script>
</body>
</html>