zoukankan      html  css  js  c++  java
  • js观察者模式

    观察者模式存在观察者和被观察者

    被观察者的状态发生改变,通知观察者调用观察者的update方法,观察者的update方法对被观察者的状态进行检测,做出相应的操作

    被观察者存在接口attach,detach,notify

    观察者模式作用:将操作转化为通知

    <!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>观察者模式</title>
    <style type="text/css">
    div{
        border:1px solid green;
        color:gray;
    }
    </style>
    
    </head>
    <body>
        <select name="guancha">
            <option value="jingdian">经典模式</option>
            <option value="huali">华丽模式</option>
        </select>
        <div id="content">
            现在是默认内容.
        </div>
        <input id="btn1" type="button" value="别监控默认区域了">
        <input id="btn2" type="button" value="继续默认区域了">
    <script type="text/javascript">
    //被观察者:select
    //观察者:content
    var osel=document.getElementsByTagName("select")[0];
    var ocon=document.getElementById("content");
    //将所有的观察者都注册在被观察者身上
    osel.observers={};
    //注册方法
    osel.attach=function(key,observer){
        this.observers[key]=observer;
    }
    //注销方法
    osel.detach=function (key){
        delete this.observers[key];
    }
    //通知所有观察者,调用他们的update方法//在select改变时通知所有被观察者
    osel.onchange=osel.notify=function(){
        for(var key in this.observers){
            this.observers[key].update(this);
        }
    }
    //定义ocon的update方法
    ocon.update=function(observer){
        if(observer.value=="jingdian"){
            this.style.background="#FF9E4A";
        }else if(observer.value=="huali"){
            this.style.background="red";
        }
    }
    //向被观察者当中注册
    osel.attach("ocon",ocon);
    
    var obtn1=document.getElementById("btn1");
    var obtn2=document.getElementById("btn2");
    obtn1.onclick=function(){
        osel.detach("ocon");
    }
    obtn2.onclick=function(){
        osel.attach("ocon",ocon);
    }
    </script>
    </body>
    </html>
    
  • 相关阅读:
    常见http代码错误原因及处理
    tar命令详解
    Laravel笔记
    ORM要用到的数组转对象和对象转数组函数
    模块
    内置函数
    正则
    sorted 、 filter 、 map
    匿名函数、冒泡排序,二分法, 递归
    python 函数部分
  • 原文地址:https://www.cnblogs.com/lzzhuany/p/4742278.html
Copyright © 2011-2022 走看看