如何在 JS 库中引用动态创建的交叉点观察器

Question

我正在尝试使用 this constructor pattern boilerplate 在网络上构建一个微型 JS 库来模拟 InDesign text threading。这个想法是用户以所需的顺序提供函数 DOM 选择器，例如

var thread=new TextThread(['#container1','#container2']);
thread.build();

然后库从那里将第一个容器的文本内容拆分为每个单词的 span。当单词不在视野范围内时，库会按顺序将其移动到以下容器中。

这就是 IntersectionObserver 的用武之地： 我需要为每个提供给构造函数的容器分配一个观察者，然后让它观察其中的跨度。当 span 不在视野范围内时，它会触发观察者回调，该回调应该使用 .takeRecords() 方法遍历所有观察者，以检查每个容器中哪些 span 不在视野范围内。我已经让观察者触发他们的回调没有问题，但问题是在回调中引用所有观察者。

我尝试的是从样板文件中将数组变量存储在自执行函数中，然后在构建构造函数时，它将观察者推送到该数组。

var observers=[];

var Constructor = function (selectors) {
    /*placeholder for code that selects and assigns the containers*/

    containers.forEach((item, i) =>{
        var options={
            root: item,
            rootMargin: '0px',
            threshold: 1.0
        }
        var newObserver=new IntersectionObserver(callback,options);
        observers.push(newObserver);
    })
};

那么当文本被word分割成spans时

words.forEach((word,w) =>{
observers[ current container index ].observe(word); });

在回调中，触发回调的观察者的条目是可见的。但是，如果我尝试使用我的观察者数组变量引用 other 观察者，则 takeRecords() 返回一个空数组。这是我正在测试的回调：

function callback(entries){
    //the entries for the observer firing the callback are returning correctly
    console.log(entries)
    //the forEach below doesn't work though. It returns an empty array for each observer.
observers.forEach((item, i) => {
    console.log(item.takeRecords())
});
}

Answer 1

在回调中，触发回调的观察者的条目是可见的。但是，如果我尝试使用我的观察者数组变量引用其他观察者，takeRecords() 将返回一个空数组——即使对于触发回调的观察者也是如此！

一切正常，as documented:

takeRecords() 返回IntersectionObserverEntry 的数组 对象，每个目标元素都经历了一个 自上次检查交叉口后的交叉口变化， 通过调用此方法或显式调用 自动调用观察者的回调。

注意：如果你使用回调来监控这些变化，你不需要 调用这个方法。

^{（强调我的）}

Answer 2

您将观察者声明为该类的私有变量。您需要将其公开或静态。我不熟悉你的设计，但我建议make it static。从架构的角度来看，使这些静态对我来说更有意义