设计模式-观察者模式

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>
原文地址:https://www.cnblogs.com/norm/p/6164184.html