如何监听URLSearchParams的变更？有无更优实现方案？

针对你遇到的问题——无法直接监听URLSearchParams的变更，除了Proxy方案外，还有两种更轻量、更贴合URLSearchParams使用场景的实现方式：

1. 封装自定义ObservableSearchParams类 #

直接继承URLSearchParams，重写所有会修改参数的方法，在方法执行后触发自定义回调。这种方式精准覆盖标准API的修改操作，性能开销比Proxy小，代码可读性也更高。

class ObservableSearchParams extends URLSearchParams {
  constructor(init, onChange) {
    super(init);
    this.onChange = onChange;
  }

  // 覆盖所有修改类方法
  append(name, value) {
    super.append(name, value);
    this.onChange?.();
  }

  set(name, value) {
    super.set(name, value);
    this.onChange?.();
  }

  delete(name) {
    super.delete(name);
    this.onChange?.();
  }

  sort() {
    super.sort();
    this.onChange?.();
  }

  replace(name, value) {
    super.replace(name, value);
    this.onChange?.();
  }
}

// 使用示例
const url = new URL('https://example.com');
const searchParams = new ObservableSearchParams(url.searchParams, () => {
  console.log('参数已变更，当前URL：', url.href);
});
// 替换原searchParams，确保修改同步到URL对象
url.searchParams = searchParams;

searchParams.set('foo', 'bar'); // 触发回调

2. 装饰器模式包裹现有实例 #

如果不想创建新类，可以直接包装已有的URLSearchParams实例，给它的修改方法添加钩子逻辑。这种方式无需继承，灵活度更高。

function wrapObservableParams(params, onChange) {
  // 列出所有需要监听的修改方法
  const mutableMethods = ['append', 'set', 'delete', 'sort', 'replace'];
  
  mutableMethods.forEach(method => {
    const originalMethod = params[method];
    params[method] = function(...args) {
      // 执行原方法
      originalMethod.apply(this, args);
      // 触发变更回调
      onChange?.();
    };
  });
  
  return params;
}

// 使用示例
const url = new URL('https://example.com');
const observableParams = wrapObservableParams(url.searchParams, () => {
  console.log('参数更新：', url.href);
});

observableParams.append('test', '123'); // 触发回调

与Proxy方案的对比 #

• 如果你只需要监听标准API调用（比如用set、append修改参数），上面两种方案更高效，避免了Proxy对所有属性和方法的拦截开销，代码也更易调试。
• 如果你需要覆盖所有可能的修改场景（比如直接通过params['key'] = value赋值），Proxy仍然是最全面的选择，它能拦截属性赋值、方法调用等所有操作：

const url = new URL('https://example.com');
const proxyParams = new Proxy(url.searchParams, {
  set(target, prop, value) {
    const result = Reflect.set(target, prop, value);
    console.log('属性赋值触发变更：', url.href);
    return result;
  },
  apply(target, thisArg, args) {
    const result = Reflect.apply(target, thisArg, args);
    console.log('方法调用触发变更：', url.href);
    return result;
  }
});

proxyParams['foo'] = 'bar'; // 触发set拦截
proxyParams.set('baz', 'qux'); // 触发apply拦截

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