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

vue.js实现原理 -- 订阅者，发布者模式相关推荐

Vue.js 运行原理解析、vue源码剖析
Vue.js 运行机制全局概览全局概览这一节笔者将为大家介绍一下 Vue.js 内部的整个流程,希望能让大家对全局有一个整体的印象,然后我们再来逐个模块进行讲解.从来没有了解过 Vue.js 实现 ...
JavaScript设计模式——订阅者-发布者模式简单实现
一.什么是发布者-订阅者模式订阅者把自己想订阅的事件注册到调度中心,当发布者发布该事件到调度中心,就是该事件触发时,由调度中心统一调度订阅者注册到调度中心的处理代码. 基本思想就是内部保存了一个对象 ...
Vue.js说说组件
什么是组件:组件是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码.在较高层面上,组件是自定义的元素,Vue.js的编译器为它添加特殊功能.在有些情况下,组件也可以是原生HTM ...
使用Vue.js初次真正项目开发-2018/07/14
一.组件化使用Vue.js进行开发,按照MVVM模式,围绕数据为核心,进行开发. 开发过程根据业务和功能组件化,组件化一方面让我们开发思路更加清晰,另一方面对于数据的处理和控制变得更加简单,毕竟一个 ...
Vue.js not detected
安装vue devtools工具,在chrome中一直是灰色,title是Vue.js not detected ① F12关闭开发者模式 ② 刷新 ③ 然后再按F12就好了网上看到的,居然真的有用 ...
学习Vue.js实战（一）
Vue.js是什么? Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架. (所谓Progressive,就是可以一步一步的有阶段性的使用vue.js.其简单小巧,压 ...
Vue.js 内部运行机制之总结常见问题解答
Vue.js 内部运行机制之总结 & 常见问题解答总结在本小册的第一节中,笔者对 Vue.js 内部运行机制做了一个全局的概览,当时通过下面这张图把 Vue.js 拆分成一个一个小模块来介 ...
为Angular（2+）开发人员提供带TypeScript的Vue.js
目录介绍单页应用程序的演变(SPA) 三大框架概述 Angular开发者的Vue.js 学习Vue.js Vue.js页面的剖析构建示例应用程序 TypeScript的案例入门--Vue.js ...
推送近期三波关于Vue.js的资讯
原文来自:集web前端最近很火的vue2框架资源:定时更新,欢迎Star一下. 推送自己整理近期三波关于Vue.js的资讯: 这里就抛砖引玉了,望有更屌的资源送助攻. 第一波 vue-js-toggl ...

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

vue.js实现原理 -- 订阅者，发布者模式相关推荐

最新文章

热门文章