观察者模式

来源：互联网发布：磊科nw336驱动 mac 编辑：程序博客网时间：2024/05/21 08:49
<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>
阅读全文
0 0