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

js实现观察者模式风格替换的更多相关文章

  1. JS实现IOS风格对话框 jquery / zepto

    Alert alert("这个是一个alert弹窗"); Alert 自定义参数 alert({ content: "自定义alert弹窗", btnText: ...

  2. 使用 iosOverlay.js 创建 iOS 风格的提示和通知

    iosOverlay.js 用于在 Web 项目中实现 iOS 风格的通知和提示效果.为了防止图标加载的时候闪烁,你需要预加载的图像资源.不兼容 CSS 动画的浏览器需要 jQuery 支持.浏览器兼 ...

  3. js用replaceAll全部替换的方法

    1 前言 js中字符串整体替换,只有自带的replace,并没有replaceAll,如果我们需要把字符串中的字符统一替换,可以用正则表达式,由于经常使用就在String直接加个原生方法,方便调用. ...

  4. js设计模式-观察者模式

    定义: 观察者模式又叫发布订阅模式,它定义了对象间的一种一对多的依赖关系.观察者模式让两个对象松耦合地联系在一起,虽然不太清楚彼此的细节,但这不影响他们之间的互相通信. 思路 定义一个对象,在对象中实 ...

  5. js中字符串全部替换

    废话不多说,直接发结果 在js中字符串全部替换可以用以下方法: str.replace(/需要替换的字符串/g,"新字符串") 比如: "yyyy-MM-dd-hh-mm ...

  6. js使用占位符替换字符串

    js使用占位符替换字符串是一个ES6中的模版字符串语法. 在``中使用 ${} var a = 5; var b = 10; console.log(`Fifteen is ${a + b} and ...

  7. JS 正则查找与替换

    JS正则查找与替换 一.前提/背景 今天遇到个问题,需要替换字符串中部分字符,这些字符相对整个字符串而言,与其他子字符串类似,无法单独提出:重要的是,该字符串是动态的生成的,就像我们日常看到的网页Ur ...

  8. 谈谈JS的观察者模式（自定义事件）

    呼呼...前不久参加了一个笔试,里面有一到JS编程题,当时看着题目就蒙圈...后来研究了一下,原来就是所谓的观察者模式.就记下来...^_^ 题目 [附加题] 请实现下面的自定义事件 Event 对象 ...

  9. js实现观察者模式

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. kafka 0.11 spark 2.11 streaming例子

    """ Counts words in UTF8 encoded, '\n' delimited text received from the network every ...

  2. elementUI MessageBox弹框 <el-dialog>弹框如果出现input的type属性为password。项目中用到日期组件的地方会报错

    ElementUI:项目中如果用到MessageBox弹框的输入框input且type为password,以及用到<el-dialog>里面用到input且type为password.此时 ...

  3. PSSecurityException之PowerShell权限设置

    Windows下PowerShell默认的权限级别是Restricted,不允许执行PS脚本(即.ps1文件).如果在Restricted权限级别下运行,会得到错误信息: .\XXXX.ps1 : F ...

  4. c#学习0217

    1 继承 继承 1 子类是否继承了父类的构造函数 答案:子类并没有继承父类的构造函数 但是子类或默认调用父类的无参数的构造函数 在子类中创建父类对象 这样子类才可以使用父类的成员 如果在父类中声明了有 ...

  5. PHP十六个魔术方法

    PHP中把以两个下划线__开头的方法称为魔术方法(Magic methods),这些方法在PHP中充当了举足轻重的作用. 魔术方法包括: __construct(),类的构造函数 __destruct ...

  6. [arc067f]yakiniku restaurants

    题意: n家饭店,m张餐票,第i家和第i+1家饭店之间的距离是$A_i$,在第i家饭店用掉第j张餐票会获得$B_{i,j}$的好感度,但是从饭店i走到饭店j会有$dis_{i,j}$的代价,可以从任意 ...

  7. [agc004d]salvage robot

    题意: 别问我谁翻译的 虫合虫莫国的领土我们可以抽象为H*W的笼子,在这虫合土上,有若干个机器人和一个出口,其余都是空地,每次虫合虫莫会要求让所有的机器人向某个方向移动一步,当机器人移动到出口时会被虫 ...

  8. mac终端安装webpack的时候报错Err,解决的办法 sudo npm install webpack -g

    MacBook-Air:~ xxx$ npm install webpack -g npm WARN invalid config registry="" npm WARN inv ...

  9. php5权限控制修饰符

    1.public:public表明该数据成员.成员函数是对所有用户开放的,所有用户都可以直接进行调用 2.private:private表示私有,私有的意思就是除了class自己之外,任何人都不可以直 ...

  10. 【CS round 34】Minimize Max Diff

    [题目链接]:https://csacademy.com/contest/round-34/task/minimize-max-diff/ [题意] 给你n个数字; 数组按顺序不下降; 让你删掉k个数 ...