vue.js实现原理 -- 订阅者,发布者模式

1,661 阅读1分钟

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

/*
    下面我们看下打印结果
*/


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

实现