寻求等效于WordPress do_action与apply_filters的JavaScript库

原生JavaScript无直接对应机制 #

你说得没错，原生JS里没有直接实现apply_filters的内置机制——DOM事件确实能实现类似do_action的触发回调功能，但没法像apply_filters那样传递值、让回调修改后再返回最终结果。

现成可用的库 #

有几个轻量库专门实现了WordPress风格的钩子系统，完全匹配你的需求：

• Hookable：提供addAction/doAction、addFilter/applyFilter方法，逻辑和WordPress钩子完全对齐，用法和你想要的register_filter/filter_callback_function几乎一致。
• wp-hooks：这个库就是复刻WordPress的钩子API，连函数名都和WP一样——add_action、do_action、add_filter、apply_filters，直接用你熟悉的写法就行。
• microhooks：超轻量的钩子库，体积很小，只保留动作和过滤器的核心功能，适合不需要额外冗余特性的场景。

自行实现的极简思路 #

如果不想依赖第三方库，自己写核心逻辑也很简单：

1. 用一个对象存储所有钩子，键是钩子名称，值对应回调函数数组（过滤器要注意执行顺序）。
2. register_filter负责把回调函数添加到对应钩子的数组里。
3. apply_filters从初始值开始，依次把每个回调的返回值作为下一个回调的输入，最终返回经过所有过滤器处理后的结果。

示例代码：

// 存储钩子的容器
const hooks = { filters: {} };

// 注册过滤器回调
function register_filter(hookName, callback) {
  if (!hooks.filters[hookName]) {
    hooks.filters[hookName] = [];
  }
  hooks.filters[hookName].push(callback);
}

// 执行过滤器并返回处理后的值
function apply_filters(hookName, initialValue, ...extraParams) {
  const filterCallbacks = hooks.filters[hookName] || [];
  return filterCallbacks.reduce((currentValue, callback) => {
    return callback(currentValue, ...extraParams);
  }, initialValue);
}

// 使用示例
register_filter('hook-get-controls', (controls, label) => {
  controls.push({ id: 'new-control', label });
  return controls;
});

const initialControls = [{ id: 'existing-control' }];
const processedControls = apply_filters('hook-get-controls', initialControls, '新增控件');
console.log(processedControls);

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