• 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() 的方法()。

  • 相关阅读:
    计算机书籍.网址
    MVC是必知必用的
    技术
    三色旗帜分类
    巴斯卡三角形
    Centos安装wine等组件的问题
    some software that is used to speed up your system
    驾照考试系统之流程图
    用静态成员函数调用非静态成员变量
    MFC 进度条控件
  • 原文地址:https://www.cnblogs.com/lin494910940/p/12169284.html
Copyright © 2020-2023  润新知