码迷,mamicode.com
首页 > Web开发 > 详细

js31---观察者模式

时间:2017-05-21 19:39:55      阅读:214      评论:0      收藏:0      [点我收藏+]

标签:blog   code   模式   调用   already   body   执行   html 4.01   函数类型   

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Untitled Document</title>
        <script type=text/javascript charset=utf-8>
        
        
        
        //发布者(被观察者)
        var Publish = function(name){
            this.name = name ;
            this.subscribers = [];//所有的订阅者数组(每一个元素是函数类型fn)
        };
        
        //发布者发布消息
        Publish.prototype.deliver = function(news){//当成员函数看
            var publish = this ;
            this.subscribers.forEach(function(fn){//fn是遍历过程中每一个元素
                fn(news,publish);    //把新消息发给一个订阅者
            });
            return this ; //return this 可以继续调用本函数或其他函数
        };
        
        Function.prototype.subscribe = function(publish){//当成员函数看
            var sub = this;
            //some:数组的每一个元素,如果其中有一个返回true,那么整体返回true
            var alreadyExists = publish.subscribers.some(function(item){
                return item === sub ; 
            });
            //如果当前出版社里不存在这个人 则将其加入其中
            if(!alreadyExists){
                 publish.subscribers.push(this);
            }
            return this; //return this 可以继续调用本函数或其他函数
        };
        
        Function.prototype.unsubscribe = function(publish){//当成员函数看
            var sub = this ; 
            // filter (过滤函数:循环便利数组的每一个元素,执行一个函数如果不匹配,则删除该元素)
            publish.subscribers = publish.subscribers.filter(function(item){
                return item !== sub ;
            });
            return this; //链式编程
        };
        
        //发布者对象
        var pub1 = new Publish(第一报社);
        
        //观察者(订阅者)
        var sub1 = function(news){ //sub1当成函数地址,当成普通变量看,也就是sub1类型是函数类型而已。
            alert(arguments[1].name + : + news + "sub1"); 
        };
        var sub2 = function(news){ 
            alert(arguments[1].name + : + news + "sub2"); 
        };
        
        sub1.subscribe(pub1);//订阅就是加入到发布者的数组中
        sub2.subscribe(pub1);
        
        pub1.deliver(text1);
        
        sub1.unsubscribe(pub1); //取消订阅
        </script>
    </head>
    <body>
    </body>
</html>

 Function.prototype:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Untitled Document</title>
        <script type=text/javascript charset=utf-8>
        var Publish = function(name){
            this.name = name ;
        };
        
        Function.prototype.subscribe = function(){  //加载函数类型的变量上
            alert(123);
        };
        
        var g = function(){}
        g.subscribe();//123
        
        var f = new Publish("sss");
        f.subscribe();//f.subscribe is not a function
        
        function h(){}
        h.subscribe();//123
        
        </script>
    </head>
    <body>
    </body>
</html>

 

js31---观察者模式

标签:blog   code   模式   调用   already   body   执行   html 4.01   函数类型   

原文地址:http://www.cnblogs.com/yaowen/p/6885538.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!