如何在不修改封装脚本的情况下监听filter()调用并获取结果？

要让你的筛选脚本全局生效，同时允许其他使用者无需修改原代码就能检测filter()调用并获取结果，推荐以下几种实用方案：

1. 派发自定义DOM事件（推荐） #

这是最符合前端事件驱动模型的方案，通过在filter()执行完成后派发自定义事件，将结果携带在事件对象中，其他使用者只需监听该事件即可。

原脚本修改示例： #

function myScript() {
  function filter() {
    // 原有的筛选逻辑，计算结果
    const filterResult = {
      condition: '筛选条件',
      data: ['结果1', '结果2']
    };

    // 派发自定义事件，携带结果
    document.dispatchEvent(new CustomEvent('filterCompleted', {
      detail: filterResult, // 存放筛选结果的字段
      bubbles: true, // 允许事件冒泡，方便在任意元素上监听
      cancelable: true
    }));

    return filterResult;
  }

  // 为目标按钮绑定点击事件
  document.querySelectorAll('.my-script.filter-button').forEach(btn => {
    btn.addEventListener('click', filter);
  });
}

// 全局启用脚本
myScript();

其他使用者的使用方式： #

// 监听自定义事件，获取筛选结果
document.addEventListener('filterCompleted', (event) => {
  console.log('筛选完成，结果：', event.detail);
  // 这里可以添加自己的业务逻辑，比如更新统计、渲染额外内容等
});

2. 暴露全局回调钩子 #

在脚本中预留一个全局可配置的回调函数，当filter()执行完成后自动调用该钩子（如果使用者定义了的话），实现方式简单直接。

原脚本修改示例： #

function myScript() {
  function filter() {
    const filterResult = { /* 筛选结果 */ };

    // 检查全局回调是否存在，存在则调用并传入结果
    if (typeof window.onFilterCompleted === 'function') {
      window.onFilterCompleted(filterResult);
    }

    return filterResult;
  }

  document.querySelectorAll('.my-script.filter-button').forEach(btn => {
    btn.addEventListener('click', filter);
  });
}

myScript();

其他使用者的使用方式： #

// 定义全局回调函数，接收筛选结果
window.onFilterCompleted = function(result) {
  console.log('获取到筛选结果：', result);
  // 自定义处理逻辑
};

3. 将结果挂载到全局对象 #

把每次filter()的执行结果存储到一个全局可访问的变量中，使用者可以直接读取该变量，或者通过监听变量变化来触发逻辑。

原脚本修改示例： #

function myScript() {
  // 初始化全局变量，用于存储筛选结果
  window.currentFilterResult = null;

  function filter() {
    const filterResult = { /* 筛选结果 */ };

    // 更新全局变量
    window.currentFilterResult = filterResult;

    return filterResult;
  }

  document.querySelectorAll('.my-script.filter-button').forEach(btn => {
    btn.addEventListener('click', filter);
  });
}

myScript();

其他使用者的使用方式： #

// 方式1：直接读取全局变量（适合主动查询场景）
console.log('当前筛选结果：', window.currentFilterResult);

// 方式2：监听全局变量变化（适合被动触发场景）
Object.defineProperty(window, 'currentFilterResult', {
  set: function(newValue) {
    console.log('筛选结果已更新：', newValue);
    // 执行自定义逻辑
  },
  get: function() {
    return this._internalFilterResult;
  },
  configurable: true
});

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