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

    1.什么是观察者模式

    一个元素发生变化,这个元素的观察者执行一些事件。

    2.例子

    这里就把点击事件做成观察者模式,先注册事件在观察者的对象列表里,一旦触发事件,就回执行事件函数。

    <body>
        <div id="box">123123123</div>
    <script>
        (function () {
            var observer = {};
    
            //要监听的对象列表,例子
            /*
            * 'dom':document.getElementById('box'),
             'type':'click',
             'fn': function () {
             console.log(1111222222221);
             }
            *
            * */
            observer.list = [];
    
    
            //监听函数
            observer.listen = function (obj) {
                this.list.push(obj);
            };
    
            //发布监听
            observer.publish = function () {
                var that = this;
                for(var i=0;i<this.list.length;i++)
                {
    
                    this.list[i]['dom'].addEventListener(this.list[i]['type'],(function(i){
                        return function(){
                            that.list[i]['fn']();
                        }
                    })(i))
                }
            }
    
    
            //监听一个点击事件
            observer.listen({
                'dom':document.getElementById('box'),
                'type':'click',
                'fn': function () {
                    console.log(1111222222221);
                }
            });
    
            //发布
            observer.publish();
        }())
    
    
    </script>
    </body>
  • 相关阅读:
    互联网架构 高可用和高并发 (转)
    mysql数据库索引
    SQL小结
    limit小结
    JDK8 元空间
    OpenStack基础知识
    shell 发送所有内容到会话
    通过word给博客园发布文章教程
    centos7.4安装过程
    Zabbix 调整告警发送的内容格式
  • 原文地址:https://www.cnblogs.com/norm/p/6164184.html
Copyright © 2011-2022 走看看