zoukankan      html  css  js  c++  java
  • 观察者模式小探

    在尝试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。

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

    身在山中不见山啊!!!

  • 相关阅读:
    Js高程:教你如何写出可维护的代码
    ES6 尾调用和尾递归
    js判断对象是否为空对象,判断对象中是否有某属性
    WebSocket断开原因、心跳机制防止自动断开连接
    Js闭包使用姿势指南
    浏览器事件模型
    Js数组排序
    简单的前端错误处理
    移动端做弹窗类页面注意事项
    加载时常统计
  • 原文地址:https://www.cnblogs.com/Merrys/p/9391220.html
Copyright © 2011-2022 走看看