js实现观察者模式风格替换

来源：互联网发布：05后小虎哥称霸网络编辑：程序博客网时间：2024/06/06 02:07

    如下图，我们看到两种风格：在选择男士时，页面颜色为黑色；在选择女士时，页面颜色为粉红色。    主要可以分为两类：            下拉框 ---》 被观察者            div   ---》 观察者

这里写图片描述

面向过程实现风格替换：

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title></head><style>    div{        border: 1px solid #000000;        width: 400px;        height:100px;        margin-top: 5px;    }</style><body><select name="" id="">    <option value="man" selected>男士</option>    <option value="woman">女士</option></select><div id="one"></div><div id="two"></div><div id="three"></div></body><script>    var sel=document.getElementsByTagName('select')[0];    var one=document.getElementById("one");    var two=document.getElementById("two");    one.style.background="black";    two.innerHTML="i am superman";    window.onload=function(){        sel.onchange=function(){            var sv=sel.value;            if(sv=="woman"){                one.style.background="pink";                two.innerHTML="i am superwoman";            }else if(sv=="man"){                one.style.background="black";                two.innerHTML="i am superman";            }        }    }</script></html>

观察者模式实现风格替换：

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title></head><style>    div{        border: 1px solid #000000;        width: 400px;        height:100px;        margin-top: 5px;    }</style><body><select name="" id="">    <option value="man" selected>男士</option>    <option value="woman">女士</option></select><div id="one"></div><div id="two"></div><!--    如果新增加一个 div3 就需要修改旧的代码了，可以看出这种方式的扩展性就特别的低。    因为在面向对象编程中有中思维叫：开闭原则。对于修改是封闭的，对于扩展是开放的。    解决方案：          我们可以用观察者模式，解决这一扩展性低问题。          观察者模式，顾名思义：重点是观察下拉框（被观察者）的改变，     当下拉框改变时，div（观察者）做出相应改变。--><div id="three"></div></body><script>    var sel=document.getElementsByTagName('select')[0];    var one=document.getElementById("one");    var two=document.getElementById("two");    one.style.background="black";    two.innerHTML="i am superman";    //定义一个对象，用来存储观察者对象。    sel.servers={};    //定义一个添加观察者方法    sel.attach=function(key,val){        sel.servers[key]=val;    };    //将观察者添加到观察者队列中    sel.attach("one",one);    sel.attach("two",two);    sel.onchange=function(){        for(var i in this.servers){            this.servers[i].update(this);        }    };    one.update=function(obj){        if(obj.value=="man"){            this.style.background="black";        }else{            this.style.background="pink";        }    };    two.update=function(obj) {        if (obj.value == "man") {            this.innerHTML = "i am superman";        } else {            this.innerHTML = "i am superwoman";        }    };    //当再出现观察者时，我们只需要将观察者添加到观察者队列中。    //降低了代码的耦合性，增加了代码的扩展性。    var three=document.getElementById('three');    sel.attach("three",three);    three.update=function(obj) {        if (obj.value == "man") {            this.innerHTML = "man";        } else {            this.innerHTML = "woman";        }    };</script></html>

0 0