阅读element-ui源码之ResizeObserver使用

1.ResizeObserver

阅读tabs标签页源码时，发现了这个api。于是，我查了下MDN。

• 可以监听任意DOM元素内容区域的变化。这里的变化包括但不限于：
  （1）某个节点的出现和隐藏。（2）某个节点的大小变化。
• 和resize api相比的优点：
  众所周知window.resize事件能帮我们监听窗口大小的变化。但是reize事件会在一秒内触发将近60次，所以很容易在改变窗口大小时导致性能问题。换句话说，window.resize事件通常是浪费的，因为它会监听每个元素的大小变化（只有window对象才有resize事件）。ResizeObserver的优点就不言而喻了。
• 具体的用法就不说了。可以去MDN上查找。下面重点说下，element-ui是如何使用的？

2.element-ui中的使用

• 首先，ResizeObserver这个api是有兼容性问题的。element-ui引入了第三方库：

import ResizeObserver from 'resize-observer-polyfill';

• 接着，它采用了观察者模式，来处理元素尺寸变化逻辑。

// 判断是否在浏览器环境中，还是在node中
const isServer = typeof window === 'undefined';

/* istanbul ignore next */
const resizeHandler = function(entries) {
  for (let entry of entries) {
    // entry.target通过这个访问监听的DOM对象，然后，这个对象上有__resizeListeners__属性。遍历存储的监听回调
    const listeners = entry.target.__resizeListeners__ || [];
    if (listeners.length) {
      listeners.forEach(fn => {
        fn();
      });
    }
  }
};

/* istanbul ignore next */
// 接受DOM元素和方法
export const addResizeListener = function(element, fn) {
  if (isServer) return;
  if (!element.__resizeListeners__) {
    // 在DOM元素对象上，设置__resizeListeners__属性，存储监听器（回调函数）。
    element.__resizeListeners__ = [];
    // ResizeObserver：MDN上解释可以监听DOM元素的变化（什么变化呢？位置变化和大小变化）
    element.__ro__ = new ResizeObserver(resizeHandler);
    element.__ro__.observe(element);// 这里观察主体是DOM对象。（本质就是观察一个对象）
  }
  element.__resizeListeners__.push(fn);
};

/* istanbul ignore next */
export const removeResizeListener = function(element, fn) {
  if (!element || !element.__resizeListeners__) return; // 先判断下
  element.__resizeListeners__.splice(element.__resizeListeners__.indexOf(fn), 1);
  if (!element.__resizeListeners__.length) {
    // 取消element.__ro__观察者身上所有的元素的观察
    element.__ro__.disconnect();
  }
};