如何通过HTML构建基于观察者模式的组件-html教程-PHP中文网

html本身不支持观察者模式，需用javascript实现：mutationobserver监听dom变化，custom elements的observedattributes响应属性变更，proxy拦截对象状态，eventtarget用于松耦合通信。

如何通过html构建基于观察者模式的组件

HTML 本身不提供观察者模式能力，所谓“用 HTML 构建观察者模式组件”，本质是用 JavaScript 在 HTML 环境中实现观察逻辑，并绑定到 DOM 元素或自定义组件上。直接写 <observer></observer> 标签或靠 HTML 属性自动触发通知，是不可能的。

当你需要知道某个元素内部是否被插入、删除、属性是否被改、文本是否更新，MutationObserver 是浏览器原生支持且性能可控的方案。它不是“HTML 的功能”，但它是你在 HTML 页面里能用的最贴近“观察 DOM”的机制。

必须显式调用 observe() 才会开始监听；不调就完全静默
回调接收的是 MutationRecord[] 数组，不是单个事件对象，需遍历判断 record.type（如 'childList'、'attributes'）
subtree: true 才能监听子树变动；默认只看目标节点自身
监听目标被移除后，若没调 disconnect()，MutationObserver 实例仍持有对节点的引用，可能阻碍 GC

如果你在写自定义 HTML 标签（比如 <my-counter></my-counter>），想让组件对 value 属性变化做出反应，不能指望属性变就自动触发重渲染——必须手动声明哪些属性要被观察，并在 attributeChangedCallback 中处理。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

静态 getter observedAttributes 返回字符串数组，例如 return ['value', 'disabled']
只有通过 el.setAttribute('value', '10') 或 el.value = '10'（后者需同步反射为属性）才会触发 attributeChangedCallback
HTML 属性和 JS 属性不自动同步：设 el.value = 5 不会触发回调，除非你同时调 el.setAttribute('value', '5') 或在 setter 里手动同步
attributeChangedCallback 中拿到的是字符串值，数值型属性需自行 parseInt 或 Number

当你要观察的是 JS 对象状态（如 { count: 0, name: 'foo' }），而不是 DOM 节点，Proxy 是目前最实用的拦截手段。它比 Object.defineProperty 更全面，能捕获新增、删除、遍历等操作。

set 拦截赋值，deleteProperty 拦截 delete obj.key，ownKeys 拦截 Object.keys 等
不要在 set 里直接更新 UI；应调用统一的通知函数（如 notify({ type: 'set', key, value })），由订阅者决定怎么响应
Proxy 无法代理原始值（string、number）、null 或 undefined；数组索引赋值（arr[0] = x）也不会触发 set，需配合 Reflect.set 和额外判断
一个 Proxy 实例只能代理一个对象，不能复用到多个目标上

EventTarget（包括 HTMLElement）提供 dispatchEvent / addEventListener，常被当作简易事件总线使用。但它缺少 Observer 模式的关键特征：没有中心化的 Subject 管理订阅关系，也不保证通知顺序或错误隔离。

它不记录谁订阅了什么，removeEventListener 必须传入**完全相同的函数引用**才能解绑，匿名函数或箭头函数会导致无法清理
事件冒泡/捕获机制与观察者模式的“一对多直连通知”逻辑不同，容易误用为跨层级通信，增加调试难度
适合组件间低耦合广播（如 document.dispatchEvent(new CustomEvent('theme-change', { detail: 'dark' }))），不适合精确控制通知时机或依赖状态的场景
若需强类型、可取消、可链式组合的通知流，应引入 RxJS 的 Subject 或手写带 unsubscribe 的观察者管理器

真正难的不是写出一个能 notify 的类，而是决定观察什么、谁该被通知、何时该停止监听。DOM 变动、属性变更、数据赋值、自定义事件——每种场景对应不同的 API 边界和内存责任，混用容易导致响应延迟或泄漏。选哪个，取决于你实际要“观察”的东西落在哪一层。