尝试解读resize-observer-polyfill源码(1)

最新推荐文章于 2024-08-10 07:33:47 发布

qq_38377521

最新推荐文章于 2024-08-10 07:33:47 发布

阅读量811

点赞数

分类专栏： html javascript 文章标签： javascript html

本文链接：https://blog.csdn.net/qq_38377521/article/details/115311799

版权

本文是作者作为前端新手的第一次源码解读，聚焦于resize-observer-polyfill的实现。文章首先介绍了如何获取源码，指出工程使用rollup打包，并详细解析了entry点src/index.js。内容涵盖如何检测运行环境，resize-observer的单例实现，以及ResizeObserver类的构造函数和关键方法如observe、unobserve和disconnect。通过对WeakMap或Map的使用，确保了ResizeObserver在浏览器中的单例行为。

摘要由CSDN通过智能技术生成

00本人前端菜鸡一只，这是我的第一个源码解读文章，持续更新中。

首先，从获取源码。
在这里插入图片描述
由工程根目录下的rollup.config.js可知，这个工程是使用rollup打包的。打开之后可以看到具体配置。

配置文件中的input是这个工程的入口，即src/index.js，打开后可以看到：

这个文件中调用了一个名为global的模块实现对当前运行环境的检测：
在这里插入图片描述
我们一般使用的是浏览器环境，所以global会返回window对象。

index.js通过巧妙地方式实现单例

所以，当首次调用resize-observer时

import ResizeObserver from 'resize-observer-polyfill'

它会返回ResizeObserver类，以下是源码

import {
   Map} from './shims/es6-collections.js';
import ResizeObserverController from './ResizeObserverController.js';
import ResizeObserverSPI from './ResizeObserverSPI.js';

// Registry of internal observers. If WeakMap is not available use current shim
// for the Map collection as it has all required methods and because WeakMap
// can't be fully polyfilled anyway.
const observers = typeof WeakMap !== 'undefined' ? new WeakMap() : new Map();

/**
 * ResizeObserver API. Encapsulates the ResizeObserver SPI implementation
 * exposing only those methods and properties that are defined in the spec.
 */
class ResizeObserver {
   
    /**
     * Creates a new instance of ResizeObserver.
     *
     * @param {ResizeObserverCallback} callback - Callback that is invoked when
     *      dimensions of the observed elements change.
     */
    constructor(callback) {
   
        if (!(this instanceof ResizeObserver)) {
   
            throw new TypeError('Cannot call a class as a function.');
        }
        if (!arguments.length) {
   
            throw new TypeError('1 argument required, but only 0 present.');
        }

        const controller = ResizeObserverController.getInstance();
        const observer = new ResizeObserverSPI(callback, controller, this);

        observers.set(this, observer);
    }
}

// Expose public methods of ResizeObserver.
[
    'obser