首页 > 代码库 > 观察者模式 例子2

观察者模式 例子2

2024-10-10 15:10:01   220人阅读

<html>
    <head></head>
    <style>
        #content,#ad,#study{
            width:200px;
            height: 100px;
            border: 1px solid black;
        }
    </style>
    <body>
        <h1>observe</h1>
        <select name="" id="">
            <option value="male">male</option>
            <option value="female">female</option>
        </select>
        <input type="button" onclick="t1()" value="观察ad">
        <input type="button" onclick="t2()" value="不观察ad">
        <div id="content">content</div>
        <div id="ad">ad</div>
    </body>
    <script>
        //select为被观察  下面内容为观察
        var sel=document.getElementsByTagName(‘select‘)[0];
        sel.observers={}
        //把观察的记录号
        sel.attach=function(key,obj){
            sel.observers[key]=obj;
        }
        sel.detach=function(key){
            delete this.observers[key];
        }
        sel.onchange=sel.notify= function () {
            for(var key in this.observers){
                this.observers[key].update(this);
            }
        }
        var content=document.getElementById(‘content‘);
        var ad=document.getElementById(‘ad‘);
        content.update=function (observee) {
            if(observee.value==‘male‘){
                this.innerHTML=‘car‘;
            }else if(observee.value=‘female‘){
                this.innerHTML=‘jianfei‘;
            }
        }
        ad.update=function (observee) {
            if(observee.value==‘male‘){
                this.innerHTML=‘male_ad‘;
            }else if(observee.value=‘female‘){
                this.innerHTML=‘female_ad‘;
            }
        }


        //让content观察select的变化
        sel.attach(‘content‘,content);
        function t1(){
            sel.attach(‘ad‘,ad);
        }
        function t2(){
            sel.detach(‘ad‘);
        }
    </script>
</html>

 

观察者模式 例子2


联系
我们