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>
  • 相关阅读:
    接口的幂等性原则
    SpringBoot热部署-解决方案
    @Resource 与 @Service注解的区别
    软件概要设计做什么,怎么做
    First Show
    Glide源码解析一,初始化
    android使用giflib加载gif
    android的APT技术
    RxJava的concat操作符
    RxJava基本使用
  • 原文地址:https://www.cnblogs.com/norm/p/6164184.html
Copyright © 2011-2022 走看看