<转>JS实现观察者模式

感谢自学IT网的燕十八老师

 

?
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
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>观察者模式</title>
    <style type="text/css" media="all">
        #sec{
            margin:20px;
        }
        #cont,#ad,#study{
            width:400px;
            height:200px;
            margin:10px;
            border:1px solid #ccc;
        }
    </style>
     
</head>
<body>
    <div class='container'>
        <select name="" id="sec">
            <option value='male'>男性</option>
            <option value='famale'>女性</option>
        </select>
        &nbsp;
        <input type='button' value='观察尾部' onclick='t1()' />
        <input type='button' value='不观察尾部' onclick='t2()' />
        <div id='cont'>这里是内容</div>
        <div id='ad'>这里是广告</div>
        <div id='study'>这里是学习</div>
    </div>
</body>
    <script type="text/javascript" charset="utf-8">
        var sec = document.getElementById('sec');
        var ad = document.getElementById('ad');
        var cont = document.getElementById('cont');
        var study = document.getElementById('study');
 
        sec.observers = {};
        sec.attach = function(key,obj){
            this.observers[key] = obj;
        }
 
        sec.detach = function(key){
            delete sec.observers[key];
        }
 
        sec.onchange = sec.notify = function(){
            for(var key in this.observers){
                this.observers[key].update(this);
            }
        }
 
        cont.update = function(observer){
            if (observer.value=='male')
            {
                this.style.backgroundColor = 'gray';
            }else if (observer.value=='famale'){
                this.style.backgroundColor = 'pink';
            }
        }
 
        ad.update = function(observer){
            if (observer.value=='male')
            {
                this.innerHTML = '汽车';
            }else if (observer.value=='famale'){
                this.innerHTML = '减肥';
            }
        }
 
        study.update = function(observer){
            if (observer.value=='male')
            {
                this.innerHTML = '电脑';
            }else if (observer.value=='famale'){
                this.innerHTML = '化妆';
            }
        }
 
        // 监听
        sec.attach('cont',cont);
        sec.attach('ad',ad);
        sec.attach('study',study);
 
        function t1(){
            // 观察尾部
            sec.attach('study',study);
        }
 
        function t2(){
            // 不观察尾部
            sec.detach('study');
        }
    </script>
</html>

posted on 2015-10-10 00:30  hahahahahai12  阅读(144)  评论(0)    收藏  举报

导航