观察者模式小探

Posted 2020-12-27 merrys

在尝试ng5+示例时初识可观察对象，之后在项目中使用七牛云上传视频的时候再次遇到，虽然项目已经上线并正常使用，可-------几乎不理解。

定义

记录一下‘思想’

let observable = qiniu.upload(file, key, this.token, putExtra, config);//file文件 key文件名 token最好从后台获取
let observer = {
　　next(res) {//接收上传进度信息
　　　　_this.percentage = res.total.percent;
　　},
　　error(err) {//上传失败触发
　　　　//do something
　　},
　　complete(res) {//上传完成触发
　　　　//。。。。。。。。。
　　}
};
observable.subscribe(observer); // 上传开始

七牛云上传视频的一段代码。

qiniu.upload返回一个‘可观察对象(observable)’-----能够订阅observer的对象。每当observable改变。就会触发observer。也可以这么说，observable是一个可观察对象，通过subscribe使observer成为它的观察者，每当observable改变，就会通知到observer。

写到这里，突然想到vuejs数据响应原理。。。

第一段话：当你把一个普通的 javascript 对象传给 Vue 实例的 data 选项，Vue 将遍历此对象所有的属性，并使用 Object.defineProperty 把这些属性全部转为 getter/setter。

第二段话：每个组件实例都有相应的 watcher 实例对象，它会在组件渲染的过程中把属性记录为依赖，之后当依赖项的 setter 被调用时，会通知 watcher 重新计算，从而致使它关联的组件得以更新。

跟七牛云的实例分析相比，

• Vue遍历data后，每个data就已经是可观察的对象（或是说属性了），更具体的话该是每个属性的setter？？？有了可订阅的能力；
• watcher是绑定到组件实例的，每当setter被调用，会通知到watcher，那么setter和watcher之间就会有一个“桥梁”，使setter能通知到watcher。

这不就是观察者模式了？？？？

身在山中不见山啊！！！