首页 > 代码库 > javascript上的观察者模式

javascript上的观察者模式

2024-07-15 05:10:50   223人阅读

         观察者模式是众多软件设计模式中较为常用的一种模式。又称订阅发布模式。其主要原理是将多个观察者绑定在一个事件上，当一个事件触发时，通知绑定在上面的观察者，依次触发绑定的多个事件。

        这个模式在基于MV*框架的开发中有广泛的应用，可以有效的将数据层（Model）和视图层（view）分割开，以及不同的视图之间分割开，避免页面之间过度耦合。下面是我的一个例子：

<!—利用观察者模式，使三个块元素分别以不同方式隐藏 -->
<html>    <head>        <meta charset="utf-8">        <title>张旭--观察者模式使用</title>    </head>    <body>        <div id=‘div1‘ style=‘background-color: #123456;height:300px;width:100%‘></div>        <div id=‘div2‘ style=‘background-color: #654321;height:300px;width:100%‘></div>        <div id=‘div3‘ style=‘background-color: #321456;height:300px;width:100%‘></div>        <script type="text/javascript" src=‘jquery-1.8.3.min.js‘></script>        <script type="text/javascript">        
Observe.prototype = {            eventsArr:Observe,
            
            //绑定观察者            bind: function(eventName,callback) {            this.handers[eventName] || (this.handers[eventName]=[]);            this.handers[eventName].push(callback);            },
            //将触发的事件广播出去
            trigger: function(eventName) {               for (var i = 0, len = this.handers[eventName].length;i<len; i++) {                this.handers[eventName][i].apply(self);                };            },            //取消绑定
            destory: function(eventName) {               for (var i = 0, len = this.handers[eventName].length;i<len; i++) {                this.handers[eventName].pop();                };            }        }        //创建一个实例
        observe = new Observe();        分别将观察者绑定在“hide”事件上
        observe.bind("hide",function(){            alert("hide All");        });        observe.bind("hide", function() {          $(‘#div1‘).fadeOut("slow");        });        observe.bind("hide", function() {              $(‘#div2‘).hide(‘slow‘,‘linear‘);        });        observe.bind("hide", function() {          $(‘#div3‘).slideUp("slow");        });        //通过触发“hide”事件，广播给其他的观察者依次触发其他事件        observe.trigger("hide");
        </script>            </body></html>

       在这个例子中，首先通过定义一个新的对象，并给这个对象设置了注册bind（）、广播trigger()、销毁distory()三个方法，接着通过建立一个对象的实例，将三个块元素隐藏的事件绑定在这个实例上，通过触发被绑定的事件，将触发绑定事件广播出去给绑定在上面的观察者，进而触发绑定在上面的事件。

      这样的设计模式的优点在于观察者模式在被观察者和观察者之间建立一个抽象的耦合。被观察者角色所知道的只是一个具体观察者列表，每一个具体观察者都符合一个抽象观察者的接口。由于被观察者和观察者没有紧密地耦合在一起，因此它们可以属于不同的抽象化层次。


联系
我们