JavaScript——观察者模式

　　

观察者模式也称为（订阅-发布模式）是一种行为模式，其作用是用于处理不同对象之间的交互通信问题。观察者模式中会有以下两种对象：

1一个或多个发布者对象；当有重要的事情的时候发生会通知订阅者

2.一个或多个订阅者对象，他们追随一个或多个发布者对象，监听他们的通知并作出相应的反应。

　　观察者模式可以分为两类：推送和拉动。推送模式是指由发布者负责将消息通知给各个订阅者，发布者主动向订阅者推送消息，不管对方是否需要，推送的信息通常是目标对象的全部或部分数据，相当于广播通信。。而拉动模式则是要求订阅者主动跟踪发布者的状态变化，主题对象在通知观察者的时候，只传递少量信息。如果观察者需要更具体的信息，由观察者主动到主题对象中获取，相当于是观察者从主题对象中拉数据。一般这种模型的实现中，会把主题对象自身通过update()方法传递给观察者，这样在观察者需要获取数据的时候，就可以通过这个引用来获取了。。

推送模式的实例：在观察者中要有以下属性和方法：

 1.由回调函数构成的订阅者数组

2.用于添加和删除订阅者的addSubscriber()和removeSubscriber()方法

3.publish()方法，接受并传递给订阅者

4.make()方法，将任意一个对象转变为发布者，并添加上述方法

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <P>观察者模式中的推送实例</P>
        <article>
            ，<ul>
                <li> 由回调函数构成的订阅者数组</li>
                <li> 用于添加和删除订阅者的addSubscriber()和removeSubscriber()方法</li>
                <li>publish()方法，接受并传递给订阅者</li>
                <li> make()方法，将任意一个对象转变为发布者，并添加上述方法</li>
            </ul>
        </article>
        <script>
            var  observer={
                addSubscriber:function(callback){
                    if    (typeof callback==="function" )
                    this.subscribers[this.subscribers.length]=callback;
                },
                removeSubscriber:function(callback){
                    for (let i = 0; i < this.subscribers.length; i++) {
                        if(this.subscribers[i]===callback)
                            delete this.subscribers[i]
                    }
                },
                publish:function(what){
                    for (let i = 0; i < this.subscribers.length; i++) {
                        if    (typeof this.subscribers[i]==="function" )
                            this.subscribers[i](what);
                    }
                },
                make:function(o){
                for (let i in this) {
                    if(this.hasOwnProperty(i))
                    {
                    o[i]=this[i];
                    o.subscribers=[];        
                    }
                }
                }
            }
            var blogger={
                writerBlogPost:function(){
                    var content="Today is "+new Date();
                    this.publish(content);
                }
            };
            var la_times={
                newIssue:function(){
                    var paper="Today is gdfetrdstsd"
                    this.publish(paper);
                }
            }
            var jack={
                read:function(what){
                    console.log("I am Jack .I read "+what )
                }
            }
            var marry={
                read:function(what){
                    console.log("I am marry .I read "+what )
                }
            }
            observer.make(blogger);
            observer.make(la_times);
            blogger.addSubscriber(jack.read);
            blogger.addSubscriber(marry.read);
            blogger.writerBlogPost();
        </script>
    </body>
</html>

以上代码中 blogger 和 la_times 为发布者  jack 和 marry 为订阅者，observer.make(blogger)，observer.make(la_times),observer.make（）方法使得blogger 和la_times成为了发布者（具有了发布者的属性和方法）blogger.addSubscriber(jack.read)和blogger.addSubscriber(marry.read); 使得 jack.read（）he marry.read（） 方法成为了blogger 的订阅者。当blogger.writerBlogPost()的时候就会执行Jack.read()和marry.read() 的方法（）。

posted @ 2020-01-09 23:22  七分暖  阅读(119)  评论(0)  编辑  收藏  举报
回到顶部