js观察者模式

最新推荐文章于 2023-09-20 17:32:20 发布

大猫先生

最新推荐文章于 2023-09-20 17:32:20 发布

阅读量372

点赞数

分类专栏：设计模式文章标签：模式 js

本文链接：https://blog.csdn.net/qq_17392301/article/details/45131111

版权

设计模式专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
    <meta charset=utf8>
    <title></title>
    <style type="text/css">
    div{
        width: 300px;
        height: 200px;
        border:1px solid #ccc;
    }
    </style>

</head>
<body>
    <select>
    <option value="male">男生风格</option>
    <option value="female">女生风格</option>
</select>
<div id="content">我是内容</div>
<div id="ad">我是内容</div>
<div id="study">问</div>
</body>
<script type="text/javascript">
    // 服务端
    var sel=document.getElementsByTagName('select')[0];
        // 建个对象存储观察者
        sel.observers={};
        // 添加观察者
        sel.attach=function(key,obj)
        {
            this.observers[key]=obj;
        }
        // 删除观察者
        sel.detach=function(key)
        {
            delete this.observers[key];
        }
        //给观察者发送信息,怎么发送？当sel改变的时候发送
        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');
        // 观察者的update方法
        content.update=function(observers){
            if(observers.value=='male'){
                this.style.backgroundColor='gray';
            }else if(observers.value=='female')
            {
                this.style.backgroundColor='pink';
            }
        }
        ad.update=function(observers)
        {
            if(observers.value=='male')
            {
                this.innerHTML='计算机';
            }else if(observers.value=='female')
            {
                this.innerHTML='美容';
            }
        }
        sel.attach('content',content);
        sel.attach('ad',ad);

        </script>
</html>

大猫先生

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js观察者模式

<!DOCTYPE html><html><head> <meta charset=utf8> <title></title> <style type="text/css"> div{ width: 300px; height: 200px; border:1px solid #ccc; } </st
复制链接

扫一扫