如何合并监听不同元素的多个IntersectionObserver实例

问题背景 #

我编写了一段使用IntersectionObserver的代码，实现效果为：当目标元素进入屏幕可视区域时，将类名为.productTitle的标题内容修改为该可视元素对应的名称。目前我为5个待观测区域分别创建了5个独立的observer实例，代码虽然可以正常运行，但写法冗余不够合理，需要找到合并多个观测实例的简化方法。

原有冗余实现代码：

var observer = new IntersectionObserver(function(entries) {
    if(entries[0].isIntersecting === true)
        document.querySelector(".productTitle").innerHTML = "Logotype";
}, { threshold: [1] });

var observer1 = new IntersectionObserver(function(entries) {
    if(entries[0].isIntersecting === true)
        document.querySelector(".productTitle").innerHTML = "Branding";
}, { threshold: [1] });

var observer2 = new IntersectionObserver(function(entries) {
    if(entries[0].isIntersecting === true)
        document.querySelector(".productTitle").innerHTML = "Website Dev.";
}, { threshold: [1] });

var observer3 = new IntersectionObserver(function(entries) {
    if(entries[0].isIntersecting === true)
        document.querySelector(".productTitle").innerHTML = "3d Modeling";
}, { threshold: [1] });

var observer4 = new IntersectionObserver(function(entries) {
    if(entries[0].isIntersecting === true)
        document.querySelector(".productTitle").innerHTML = "Vectorial Work";
}, { threshold: [1] });

observer.observe(document.querySelector("#visibleLogo"));
observer1.observe(document.querySelector("#visibleBranding"));
observer2.observe(document.querySelector("#visibleWeb"));
observer3.observe(document.querySelector("#visible3d"));
observer4.observe(document.querySelector("#visibleVector"));

简化方案 #

IntersectionObserver本身就支持单实例观测多个目标元素，不需要为每个元素单独创建实例。核心逻辑是在回调函数中通过entry.target区分当前触发状态变更的元素，再匹配对应要展示的标题即可。

优化后代码 #

// 配置映射表：key为待观测元素ID，value为元素可见时要显示的标题
const titleConfig = {
  visibleLogo: "Logotype",
  visibleBranding: "Branding",
  visibleWeb: "Website Dev.",
  visible3d: "3d Modeling",
  visibleVector: "Vectorial Work"
};

// 提前缓存标题节点，避免每次触发都重新查询DOM
const productTitle = document.querySelector(".productTitle");

// 仅创建1个观察者实例
const observer = new IntersectionObserver((entries) => {
  // 遍历所有状态变更的元素
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      // 根据当前可见元素的ID，匹配对应标题更新
      productTitle.innerHTML = titleConfig[entry.target.id];
    }
  })
}, { threshold: [1] });

// 批量注册所有待观测元素
Object.keys(titleConfig).forEach(targetId => {
  const el = document.getElementById(targetId);
  if (el) observer.observe(el);
});

优化点说明 #

• 消除重复代码：不再重复创建5个逻辑几乎完全一致的观察者实例
• 可维护性提升：后续新增/修改观测项，只需要修改titleConfig配置即可，不需要改动核心观测逻辑
• 性能更好：单实例相比多实例内存占用更低，运行开销更小
• 减少DOM查询：提前缓存标题节点，避免每次可见性触发都执行DOM查询

内容的提问来源于stack exchange，提问作者Eu2019