如何在 JS 库中引用动态创建的路口观察器

Question

我正在尝试构建一个微型 JS 库来模拟 InDesign text threading on the web using this constructor pattern boilerplate。这个想法是用户以所需的顺序输入函数 DOM 选择器，例如

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

库从那里将第一个容器的文本内容拆分为每个单词的跨度。当一个词不在视野中时，图书馆会按顺序将其移动到以下容器中。

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

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

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);
    })
};

然后当文本按单词拆分成 span 时

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

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

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

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

Answer 2

In the callback, entries for the observer that fired the callback are visible. However, if I try to reference the other observers using my observers array variable, takeRecords() returns an empty array - even for the observer that fired the callback!

工作正常，as documented:

takeRecords() returns an array of IntersectionObserverEntry objects, one for each targeted element which has experienced an intersection change since the last time the intersections were checked, either explicitly through a call to this method or implicitly by an automatic call to the observer's callback.

Note: If you use the callback to monitor these changes, you don't need to call this method.

^{（强调我的）}

如何在 JS 库中引用动态创建的路口观察器

How to reference dynamically created intersection observers in a JS library

javascript

constructor

scope

class

intersection-observer