JavaScript 怎么用闭包实现一个轻量级的组件状态监听器-js教程-PHP中文网

闭包实现轻量级状态监听器，封装私有状态、暴露读写接口并支持回调订阅。核心结构含get/set/subscribe方法，可扩展batch/once等增强功能，需注意内存泄漏防范。

javascript 怎么用闭包实现一个轻量级的组件状态监听器

用闭包实现轻量级组件状态监听器，核心是封装私有状态 + 暴露可控的读写接口 + 支持注册回调监听变化。不依赖框架，几行代码就能搞定。

1. 基础结构：闭包封装状态与监听列表

用函数返回对象，把 当前值 和 监听函数数组 闭包在内部，外部无法直接修改，保证状态受控：

function createState(initialValue) {
  let value = initialValue;
  const listeners = [];

  return {
    get() { return value; },
    set(newValue) {
      if (newValue !== value) {
        value = newValue;
        listeners.forEach(cb => cb(value));
      }
    },
    subscribe(callback) {
      listeners.push(callback);
      // 返回取消订阅函数（可选但实用）
      return () => {
        const index = listeners.indexOf(callback);
        if (index > -1) listeners.splice(index, 1);
      };
    }
  };
}

2. 使用示例：绑定到 DOM 元素或简单逻辑

比如监听搜索关键词，并实时更新提示文字：

Javascript Sdk

用于 inference.sh 的 JavaScript/TypeScript SDK，可运行 AI 应用、构建代理、集成 150+ 模型。包名：@inferencesh/sdk（npm install），完整 TypeScript 支持。

下载

const searchState = createState('');

// 订阅变化
searchState.subscribe((val) => {
  document.getElementById('hint').textContent = 
    val ? `搜索中：${val}` : '请输入关键词';
});

// 修改状态触发通知
document.getElementById('input').addEventListener('input', e => {
  searchState.set(e.target.value);
});