js 觀察者模式

 想要成爲一個優秀的人,最重要的事情是培養良好的習慣。函數

什麼是觀察者模式呢?this

觀察者模式 又叫作發佈-訂閱模式,它定義了一種一對多的關係,讓多個觀察者對象同時監聽某一個主題對象,當主題對象的狀態發生變化的時候,須要通知全部的觀察者對象,使得他們去更新。spa

在觀察者模式中,並不知一個對象調用另外一個對象的方法,而是,一個對象訂閱另外一個對象的特定活動並在狀態改變後得到通知。當發生了一個重要的事件的時候,發佈者將會通知全部訂閱者而且可能常常以事件對象的形式傳遞消息。prototype

例子:code

    function Observer() {
        this.fns = [];
    }
    Observer.prototype = {
        // 訂閱的方法
        subscribe: function(fn) {
            this.fns.push(fn)
            console.log('這裏面是啥', this.fns)
        },
        //取消訂閱
        unsubscribe: function(fn) {
            this.fns = this.fns.filter(el => {
                if(el !== fn) {
                    return el;
                }
            })
        } ,
        // 更新
        update: function(o, thisObj) {
            var scope = thisObj || window;
            this.fns.forEach(el => {
                el.call(scope, o)
            });
        }
    }
    var o =new Observer;
    var f1 = function(data) {
        console.log('robbbit' + data+ 'ganhuo')
    }
    var f2 = function(data) {
        console.log('wwww' + data + "343")
    }
    o.subscribe(f1);
    o.subscribe(f2);
    o.update('tom');
    o.unsubscribe(f1);
    o.update('amy')

首先定義被觀察者,被觀察者是Observer函數,在該函數的原型上掛在上subscribe,unsubscribe,update三個方法,而後實例化Observer函數,而後f1,f2分別是觀察者,在update方法中更新被觀察者的時候,對應的觀察者也會更新。server

相關文章
相關標籤/搜索