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女士`);

/*
    下面我们看下打印结果
*/
复制代码

可以看到，已经实现了，第一位订阅者没有了，只剩第二位 订阅者了，当然实现的方法有很多种，这只是其中一种使用原型链

实现

转载于:https://juejin.im/post/5c7f6efce51d45043849da2f