ResizeObserver 笔记

ResizeObserver 的介绍

这个 pollyfill 是用来提供监测目标元素或者页面刷新的一种观察者工具。当目标元素的 clientwidth/height,offsetWidth/Height, 发生变化,或者页面上有动画或者窗体 resize,都会促发回调函数通知观察者。介绍几个类

  • ResizeObserver 这个是用来定义观察者的,观察者其实就是一个回调函数,callback(entris:ResizeObserverEntry[],observer:ResizeObserver)。 这个观察者有三个方法,observe,unobserve,disconnect。一个 observer 可以同时观察多个 html 元素,它们对应同一个回调函数。
    • observe, 就是开始观察某个元素,用法 observe(htmlelement).
    • unobserve,就是停止观察某个元素,用法 unobserve(htmlelement).
    • disconnect,就是停止观察所有的元素.
  • ResizeObserverController, 这个是个单例的控制器或者叫调度器。所有的 resizeObserver 归它管理,或者说 ResizeObserverSPI 归它管。它是调度器,它会检测 DOM 上面的变化,通过MutationObserver或者DOMSubtreeModified事件(如果前者不支持的话), 同时它还订阅了transactionend 事件,它只关心这些 css 属性的变化。
    const transitionKeys = ['top', 'right', 'bottom', 'left', 'width', 'height', 'size', 'weight'];
    当这些事件被促发的时候,它就会迭代内部的SPI数组,调用它们的
    • gatherActive()
    • hasActive()
      过滤出变化的SPI,
      然后对于迭代变化的SPI,依次调用它们的 broadcastActive() 方法。
  • ResizeObserverSPI, 这个是真正提供观察某个元素功能的地方,SPI 应该是 service provider interface.的简称。它是ResizeObserver那三个接口真正提供功能的地方。它提供了如下的方法
    • observe(htmlelement), 开始观察某个 html 元素,该元素以 ResizeObservation 的形态保存于内部的一个 Map 里面。
    • unobserve(htmlelement), 停止观察某个 html 元素
    • disconnect() 停止观察所有的 html 元素。
    • gatherActive() 轮询内部的 ResizeObservation Map,调用它的 isActive() 方法,发现更新了元素,存放于内部的 activeObservations 数组中
    • boradcastActive() 轮询内部的 ResizeObservation Map,调用它的 broadcastRect(),更新最新值。同时调用 callback 通知观察者更新
    • hasActive() 返回当前是否存在更新的元素。
    • clearActive() 清除更新的元素数组。activeObservations。
  • ResizeObservation 这个类是被观察的元素的封装, 它会保存元素上一次的宽高信息,提供了两个方法
    • isActive() 与元素之前的宽高进行比较,如果不同则返回 true,这样就指定这个元素更新了。
    • broadcastRect() 这个是用当前的值更新上一次的值。

总结一下,对于我们用户,一般用法就是

  • 首先定义 observer,
const callback(param:ResizeObserverEntry[],observer:ResizeObserver)=>{};
const observer = new ResizeObserver(callback);
//然后开始观察某个元素
observer.observe(divelement);
//通知观察
observer.unobserve(divelement);
上一篇:VTK学习记录9-Observer/command设计模式


下一篇:ASP.NET MVC4 & Entity Framework 6.0 IIS 部署出错解决方案