javascript 观察者模式

<!--观察者模式又叫发布订阅模式，消息机制等等，定义了一种依赖关系，解决了主题对象与观察者之间的功能耦合也称自定义事件-->
<!--通过回调函数实现-->
<!--三个方法：1.订阅2.退订3.发布-->
使用场景：Node.js，文章点赞，留言，对话等等
1.普通写法

var pubsub  = {};
(function (q) {
    var topics = {},
        subUid = -1
    // 发布方法
    q.publish = function (topic,args) {
        if (!topics[topic]) {
            return false;
        }

        setTimeout(function () {
            var subscribers = topics[topic],
                len = subscribers ? subscribers.length : 0;

            while (len--) {
                subscribers[len].func(topic, args);
            }
        }, 0);
        return true
    };
    //订阅方法
    q.subscribe = function (topic,func) {
        if(!topics[topic]){
            topics[topic] = [];
        }
        var token = (++subUid).toString();
        topics[topic].push({
            token: token,
            func: func
        });
        return token;
    };
    //退订方法
     q.unsubscribe = function (token) {
         for(var i in topics){
             if(topics[i]){
                 for(var a = 0;a < topics[i].length;a++){
                     if(topics[i][a].token === token){
                         topics[i].splice(a,1);
                         return token;
                     }
                 }
             }
         }
         return false;
     }
} (pubsub))

　　

// 使用订阅
// pubsub.subscribe('example',function (topics, data) {
//     console.log(topics + ":" + data);
// })
//发布一个通知  （自己理解为：传参调用,第一个参数'example'订阅与发布必须一样）
pubsub.publish('example','你好啊，我是发布')
// 退订
setTimeout(function () {
    pubsub.unsubscribe(ding)
    // console.log(ding);
},0)
// 退订之后重新发布会失败
pubsub.publish('example', '重新发布')

　　

2.原型写法
原型写法就比较简单易懂了，同样的都是三个方法

function look(name) {
    this.name = name
    this.fns = []
}
look.prototype = {
    //订阅
    subscribe:function (fn) {
        this.fns.push(fn)
        // console.log(this.fns[0],'this.fns');
    },
    //退订  filter过滤,退订的实例传进来，退订之后使用另一个订阅对象
    unsubscribe:function (fn) {
        this.fns = this.fns.filter(
            function (el) {
                if(el !== fn){
                    console.log(el,'elelelelel',fn,'fnfnfnffn');
                    return el
                }
            }
        )
    },
    //更新
    update:function (o, thisObj) {
        var scope = thisObj || window
        this.fns.forEach((el) => {
            el.call(scope, o)
        })
    }
}
//测试
var o = new look;
// 发布f1和f2
var f1 = function (data) {
    console.log('王汝鹏:' + data + '赶紧干活了');
}
var f2 = function (data) {
    console.log('王汝鹏:' + data + '别干了');
}
o.subscribe(f1)
o.subscribe(f2);
o.update(1)
//退订 f1
o.unsubscribe(f2)
//在更新
o.update("Tom！");
o.update("Tom111111！");

　　

3.通用代码

// 通用代码
var currency = {
    //订阅
    addSubscriber:function (callback) {
        // 将传入的函数赋予这个数组
        this.subscribers[this.subscribers.length] = callback
    },
    //退订
    removeSubscribers:function (callback) {
        for(var i = 0;i < this.subscribers.length;i++) {
            if(this.subscribers[i] === callback){
                delete (this.subscribers[i])
            }
        }
    },
    //发布
    publish:function (what) {
        console.log(this.subscribers);// 第二个是空的
        for(var i = 0;i< this.subscribers.length;i++){
            if(typeof this.subscribers[i] === 'function'){
                this.subscribers[i](what)
            }
        }

    },
    // 将对象o具有观察功能
    make:function (o) {
        // this === currency这个对象
        for(var i in this){
            // this[i]currency对象里面的每个方法
            o[i] = this[i]
            // 我认为声明了数组
            o.subscribers = []
            // console.log(o.subscribers,'o.subscribers');
        }
    }
}
// 使用订阅
var blogger = {
    recommed:function (id) {
        var msg = 'dudu 推荐了帖子：' + id
        this.publish(msg)
    }
}
var user = {
    vote:function (id) {
        var msg = id +'投票了'
        this.publish(msg)
    }
}
// 观察者 观察两个对象
currency.make(blogger)
currency.make(user)
var tom = {
    // what === msg
    read:function (what) {
        console.log('Tom看到了如下信息' + what);
        // var arr = []
        // arr.push(what)
        // console.log(arr,'arrarrarrarr');

        // 这里其实先设置如何使用的blogger对象,通过这个对象调用订阅，并且读取tom对象下的函数，拼接成以下
        // Tom看到了如下信息dudu 推荐了帖子：123
    }
}
var wang = {
    add:function (what) {
        // document.getElementsByTagName('li')[1].innerText = 'wang给' + what
        console.log('wang给' + what);
    }
}

//调用订阅

blogger.addSubscriber(wang.add)
user.addSubscriber(wang.add)
blogger.addSubscriber(tom.read)
//调用发布

// user.vote('三国传')
blogger.recommed(123)
//退订 一个 只能发布另一个
blogger.removeSubscribers(wang.add)
blogger.removeSubscribers(tom.read)
blogger.recommed(456)

// 另一个对象的订阅
user.addSubscriber(wang.add);
user.vote('三国传'); //调用发布



//例子
// document.getElementById('btn').onclick = function () {
//     blogger.addSubscriber(wang.add)
//     blogger.recommed(123)
// }
// document.getElementById('btn').onclick = function () {
//     blogger.removeSubscribers(wang.add)
//     blogger.recommed('12sda3')
// }

详情参考：http://www.cnblogs.com/TomXu/archive/2012/03/02/2355128.html