vue.js實現原理 -- 訂閱者，發佈者模式

zh衆所周知，vue2.x版本是經過Object.defineProperty() 種的get進行攔截，set進行發送， 

其實這只是表面理解，實際運用的是 JavaScript 的  訂閱者、發佈者模式。

首先，瞭解一下什麼是  訂閱者、發佈者模式 吧。

w3c 上是這麼定義的 

能夠用一個圖來理解 

首先咱們來實現一下使用原型鏈的寫法吧

//定義一個函數,用來承載

function publisher () {
    //定義一個空數組用來接收傳遞過來數據
    this.arr = [];
}

publisher.prototype = {
    //訂閱
    subscribe : function (fn) {
        //訂閱將'訂閱者'push到arr數組中
        this.arr.push (fn)
    },
    //解除訂閱
    unSubscribe : function (fn) {
        //過濾訂閱者,若是'訂閱者'el存在arr數組中，就解綁訂閱
        this.arr = this.arr.forEach(function (el) {
            if(el !== fn) {
                return el;
            }
        })
    },

    //更新訂閱內容
    upDate : function (o,thisObj) {
        //o => 剩餘訂閱者 
        var scoped = thisObj || window ;
        //或者
        var scoped = thisObj || this.subscribe;
        this.fns.forEach (function (el) {
            // scoped 能夠隨便設置,el最終會替換scoped,將o 剩餘訂閱者傳遞進arr數組,將
               訂閱的人的信息打印出來
            el.call(scoped,o)
        }) 
    }
}


//建立一個實例
var newSubScribe = new publisher () ;

//建立一個訂閱者
var user = function (data) {
    console.log (` 第一位訂閱者 ${data} 訂閱了。`)
}

//建立第二位訂閱者
var newUser = function (data) {
    console.log (` 第二位訂閱者 ${data} 訂閱了。`)
}

//綁定訂閱
newSubScribe.subscribe(user);

newSubScribe.subscribe(newUser);

//更新訂閱內容,看下效果
newSubScribe.upDate(`Z先生`);

//解綁第一個訂閱者
newSubScribe.unSubscribe(user);

//在更新下數據
newSubScribe.upDate(`Z女士`);

/*
    下面咱們看下打印結果
*/
複製代碼

能夠看到，已經實現了，第一位訂閱者沒有了，只剩第二位 訂閱者了，固然實現的方法有不少種，這只是其中一種使用原型鏈

實現