转自：http://www.phpobject.net/blog/read.php?132
使用JQUERY实现JAVASCRIPT的简单观察者模式，主要提供一种思想，实际中可以继续完善。
直接贴代码：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>无标题文档</title>
6 <script type="text/javascript" src="jquery.js"></script>
7 <script type="text/javascript">
8 var observers = [];
9 $(function(){
10 setTimeout(function(){
11 //调用观察者
12 //ob1.update();
13 //ob2.update();
14 var _num = observers.length;
15 for(var _i=0;_i<_num;_i++)
16 {
17 observers[_i].update()
18 }
19 },1000);
20 })
21 </script>
22 </head>
23
24 <body>
25 <div id="observer1">observer1</div>
26 <script type="text/javascript">
27 function observer1_obj()
28 {
29 this.update = function(){
30 $('#observer1').html('observer1 update')
31 }
32 }
33 observers[0] = new observer1_obj();
34 </script>
35 <div id="observer2">observer2</div>
36 <script type="text/javascript">
37 function observer2_obj()
38 {
39 this.update = function(){
40 $('#observer2').html('observer2 update')
41 }
42 }
43 observers[1] = new observer2_obj();
44 </script>
45 </body>
46 </html>
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>无标题文档</title>
6 <script type="text/javascript" src="jquery.js"></script>
7 <script type="text/javascript">
8 var observers = [];
9 $(function(){
10 setTimeout(function(){
11 //调用观察者
12 //ob1.update();
13 //ob2.update();
14 var _num = observers.length;
15 for(var _i=0;_i<_num;_i++)
16 {
17 observers[_i].update()
18 }
19 },1000);
20 })
21 </script>
22 </head>
23
24 <body>
25 <div id="observer1">observer1</div>
26 <script type="text/javascript">
27 function observer1_obj()
28 {
29 this.update = function(){
30 $('#observer1').html('observer1 update')
31 }
32 }
33 observers[0] = new observer1_obj();
34 </script>
35 <div id="observer2">observer2</div>
36 <script type="text/javascript">
37 function observer2_obj()
38 {
39 this.update = function(){
40 $('#observer2').html('observer2 update')
41 }
42 }
43 observers[1] = new observer2_obj();
44 </script>
45 </body>
46 </html>
稍微完善下：
1 <script type="text/javascript" src="jquery.js"></script>
2 <script type="text/javascript">
3 function Subject()
4 {
5 this.observers = [];
6 }
7 Subject.prototype.add = function(obj)
8 {
9 this.observers.push(obj);
10 }
11 Subject.prototype.notify = function()
12 {
13 var _num = this.observers.length;
14 if(_num>0)
15 {
16 for(var _i=0;_i<_num;_i++)
17 {
18 this.observers[_i].update()
19 }
20 }
21 }
22
23 function observer(functionV)
24 {
25 this.update = functionV;
26 }
27 var subject = new Subject();
28 $(function(){
29 setTimeout(function(){
30 //调用观察者
31 subject.notify();
32 },1000);
33 })
34 </script>
35 </head>
36
37 <body>
38 <div id="observer1">observer1</div>
39 <script type="text/javascript">
40 subject.add(new observer(function(){
41 $('#observer1').html('observer1 update')
42 }));
43 </script>
44 <div id="observer2">observer2</div>
45 <script type="text/javascript">
46 subject.add(new observer(function(){
47 $('#observer2').html('observer2 update')
48 }));
49 </script>
50
2 <script type="text/javascript">
3 function Subject()
4 {
5 this.observers = [];
6 }
7 Subject.prototype.add = function(obj)
8 {
9 this.observers.push(obj);
10 }
11 Subject.prototype.notify = function()
12 {
13 var _num = this.observers.length;
14 if(_num>0)
15 {
16 for(var _i=0;_i<_num;_i++)
17 {
18 this.observers[_i].update()
19 }
20 }
21 }
22
23 function observer(functionV)
24 {
25 this.update = functionV;
26 }
27 var subject = new Subject();
28 $(function(){
29 setTimeout(function(){
30 //调用观察者
31 subject.notify();
32 },1000);
33 })
34 </script>
35 </head>
36
37 <body>
38 <div id="observer1">observer1</div>
39 <script type="text/javascript">
40 subject.add(new observer(function(){
41 $('#observer1').html('observer1 update')
42 }));
43 </script>
44 <div id="observer2">observer2</div>
45 <script type="text/javascript">
46 subject.add(new observer(function(){
47 $('#observer2').html('observer2 update')
48 }));
49 </script>
50
