码迷,mamicode.com
首页 > Web开发 > 详细

js设计模式之实现观察者模式实例代码

时间:2020-01-12 11:52:02      阅读:100      评论:0      收藏:0      [点我收藏+]

标签:select   img   update   cti   color   attach   his   fun   减肥   

前端界面

技术图片

 

 

 html代码

<body>
    <select name="" id="select">
        <option value="">请选择风格</option>
        <option value="male">男式风格</option>
        <option value="female">女士风格</option>
    </select>
    <button onclick="t1();">观察学习区</button>
    <button onclick="t2();">不观察学习区</button>
    <div id="content">内容区</div>
    <div id="ad">广告区</div>
    <div id="study">学习区</div>
</body>

css样式

<style>
#content,#ad,#study{
    width: 498px;
    height: 150px;
    border:1px solid #333;
    margin-top: 10px;
}

</style>

js代码

<script>
    var sel = document.getElementById("select");
    // console.log(sel)
    sel.objs = {}
    sel.attach = function(key,obj){
        this.objs[key] = obj;
    }
    sel.delAttach = function(key){
        delete this.objs[key];
    }

    sel.onchange = function(){
        for(var key in this.objs){
            this.objs[key].update(this)
        }
    }

    // 客户端
    var content = document.getElementById(content)
    var ad = document.getElementById(ad)
    var study = document.getElementById(study)
    content.update = function(objs){
        if (objs.value == male) {
            content.style.backgroundColor = "blue";
        }else if (objs.value == female) {
            content.style.backgroundColor = "pink";
        }else{
            content.style.backgroundColor = "";
        }
    }
    ad.update = function(objs){
        if (objs.value == male) {
            ad.innerHTML = "汽车";
        }else if (objs.value == female) {
            ad.innerHTML = "减肥";
        }else{
            ad.innerHTML = "广告区";
        }
    }
    study.update = function(objs){
        if (objs.value == male) {
            study.innerHTML = "学习编程";
        }else if (objs.value == female) {
            study.innerHTML = "学习美工";
        }else{
            study.innerHTML = "学习区";
        }
    }
    sel.attach(content,content);
    sel.attach(ad,ad);
    sel.attach(study,study);
    function t1(){
        sel.attach(study,study)
    }
    function t2(){
        sel.delAttach(study)
    }
</script>

js设计模式之实现观察者模式实例代码

标签:select   img   update   cti   color   attach   his   fun   减肥   

原文地址:https://www.cnblogs.com/Mishell/p/12182010.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!