js31---观察者模式

简介:
<!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>
复制代码

 


本文转自农夫山泉别墅博客园博客,原文链接:http://www.cnblogs.com/yaowen/p/6885538.html,如需转载请自行联系原作者

相关文章
|
6月前
|
缓存 JavaScript 前端开发
Vue.js入门模板语法[上] 及Vue.js实现购物车---详细讲解
Vue.js入门模板语法[上] 及Vue.js实现购物车---详细讲解
32 0
|
10月前
|
JavaScript
JS(第十课)JS中的对象(二)
JS(第十课)JS中的对象(二)
67 0
|
7月前
|
JavaScript 前端开发
​vue.js入门篇之Vue.js 样式绑定
​vue.js入门篇之Vue.js 样式绑定
34 1
|
10月前
|
JavaScript
JS(第十课)JS中的对象(一)
JS(第十课)JS中的对象(一)
51 0
|
12月前
|
JavaScript 前端开发
​vue.js入门篇之Vue.js 样式绑定​
【摘要】 目录​​​Class 属性绑定​​​​​数组语法​​​​​Style 属性绑定​​​​​在 Vue.js 中,我们可以使用 v-bind 来动态设置元素的 class 和 style 样式属性。​Class 属性绑定​我们可以使用 v-bind:class 设置一个对象来动态切换 class。例如:​以上实例中,当 isActive 为 true 时,会显示一个绿色的 div 块,否则不显示...
|
JavaScript
js是如何实现new一个对象的?
面向对象,从new一个对象开始。在ES6中,引入了关键词`class`来声明一个类,在此之前想要创建一个"类",只能使用函数的方式。可以说,`class`其实就是函数`function`的一个语法糖。有了类,我们就可以使用`new`来创建一个实例对象。
470 0
js是如何实现new一个对象的?
第201天:js---实现继承的5种方式
一、构造函数方式 1 //构造函数 2 function People(){ 3 this.race = '汉族'; 4 } 5 People.prototype={ 6 eat:function(){ 7 console.
1039 0
|
JavaScript 前端开发 Java
|
JavaScript 前端开发
|
JavaScript 前端开发 Java