作为一名前端开拓者，Pavel Pogosov 每天都要面对这个问题。
由于浏览器本身是一个完备异步的环境。
当代 Web 界面必须快速响运用户的操作，这包括更新 UI、发送网络要求、管理导航和实行各种其他任务。

只管人们常常将相应性与框架联系在一起，Pavel Pogosov 认为通过纯 JavaScript 实现相应性可以学到很多。
以是，我们将自己编写一些模式代码，并研究一些基于相应性的原生浏览器 API。

目录PubSub（发布-订阅模式）自定义事宜作为浏览器版本的 PubSub自定义事宜目标不雅观察者模式利用 Proxy 的相应式属性单个工具属性和相应性利用 MutationObserver 的相应式 HTML 属性利用 IntersectionObserver 的相应式滚动1. PubSub（发布-订阅模式）

class PubSub { constructor() { this.subscribers = {}; } subscribe(event, callback) { if (!this.subscribers[event]) { this.subscribers[event] = []; } this.subscribers[event].push(callback); } // 向特定事宜的所有订阅者发布 publish(event, data) { if (this.subscribers[event]) { this.subscribers[event].forEach((callback) => { callback(data); }); } }}const pubsub = new PubSub();pubsub.subscribe('news', (message) => { console.log(`订阅者1收到了新闻：${message}`);});pubsub.subscribe('news', (message) => { console.log(`订阅者2收到了新闻：${message}`);});// 向 'news' 事宜发布pubsub.publish('news', '最新头条新闻：...');// 掌握台日志输出：// 订阅者1收到了新闻：最新头条新闻：...// 订阅者2收到了新闻：最新头条新闻：...

一个常见的利用示例是 Redux。
这款盛行的状态管理库基于这种模式（或更详细地说，是 Flux 架构）。
在 Redux 的高下文中，事情机制相称大略：

html响应式是啥8 种现代 JavaScript 响应式模式 Angular

发布者：store 充当发布者。
当一个 action 被派发时，store 会关照所有订阅的组件状态的变革。
订阅者：运用程序中的 UI 组件是订阅者。
它们订阅 Redux store 并在状态变革时吸收更新。

自定义事宜作为浏览器版本的 PubSub

浏览器通过 CustomEvent 类和 dispatchEvent 方法供应了一个用于触发和订阅自定义事宜的 API。
后者不仅能让我们触发事宜，还能附加任何想要的数据。

const customEvent = new CustomEvent('customEvent', { detail: '自定义事宜数据', // 将所需数据附加到事宜});const element = document.getElementById('.element-to-trigger-events');element.addEventListener('customEvent', (event) => { console.log(`订阅者1收到了自定义事宜：${event.detail}`);});element.addEventListener('customEvent', (event) => { console.log(`订阅者2收到了自定义事宜：${event.detail}`);});// 触发自定义事宜element.dispatchEvent(customEvent);// 掌握台日志输出：// 订阅者1收到了自定义事宜：自定义事宜数据// 订阅者2收到了自定义事宜：自定义事宜数据自定义事宜目标

如果你不想在全局 window 工具上分派事宜，可以创建你自己的事宜目标。

通过扩展原生 EventTarget 类，你可以向其新实例分派事宜。
这确保你的事宜仅在新类本身上触发，避免了全局传播。
此外，你可以直接将处理程序附加到这个特定实例上。

class CustomEventTarget extends EventTarget { constructor() { super(); } // 触发自定义事宜的自定义方法 triggerCustomEvent(eventName, eventData) { const event = new CustomEvent(eventName, { detail: eventData }); this.dispatchEvent(event); }}const customTarget = new CustomEventTarget();// 向自定义事宜目标添加事宜监听器customTarget.addEventListener('customEvent', (event) => { console.log(`自定义事宜收到了数据：${event.detail}`);});// 触发自定义事宜customTarget.triggerCustomEvent('customEvent', '你好，自定义事宜！
');// 掌握台日志输出：// 自定义事宜收到了数据：你好，自定义事宜！
不雅观察者模式

不雅观察者模式与 PubSub 非常相似。
你订阅 Subject，然后它关照其订阅者（不雅观察者）关于变革，使他们能够做出相应的反应。
这种模式在构建解耦和灵巧的架构中发挥了主要浸染。

class Subject { constructor() { this.observers = []; } addObserver(observer) { this.observers.push(observer); } // 从列表中移除不雅观察者 removeObserver(observer) { const index = this.observers.indexOf(observer); if (index !== -1) { this.observers.splice(index, 1); } } // 关照所有不雅观察者关于变革 notify() { this.observers.forEach((observer) => { observer.update(); }); }}class Observer { constructor(name) { this.name = name; } // 关照时调用的更新方法 update() { console.log(`${this.name} 收到了更新。
`); }}const subject = new Subject();const observer1 = new Observer('不雅观察者1');const observer2 = new Observer('不雅观察者2');// 将不雅观察者添加到主体subject.addObserver(observer1);subject.addObserver(observer2);// 关照不雅观察者关于变革subject.notify();// 掌握台日志输出：// 不雅观察者1 收到了更新。
// 不雅观察者2 收到了更新。
利用 Proxy 的相应式属性

如果你想对工具的变革做出反应，Proxy 是一个好方法。
它让我们在设置或获取工具字段的值时实现相应性。

const person = { name: 'Pavel', age: 22,};const reactivePerson = new Proxy(person, { // 拦截设置操作 set(target, key, value) { console.log(`将 ${key} 设置为 ${value}`); target[key] = value; // 表示设置值是否成功 return true; }, // 拦截获取操作 get(target, key) { console.log(`获取 ${key}`); return target[key]; },});reactivePerson.name = 'Sergei'; // 将 name 设置为 Sergeiconsole.log(reactivePerson.name); // 获取 name: SergeireactivePerson.age = 23; // 将 age 设置为 23console.log(reactivePerson.age); // 获取 age: 23单个工具属性和相应性

如果你不须要跟踪工具中的所有字段，可以利用 Object.defineProperty 或一组 Object.defineProperties 来选择特定的一个或几个。

const person = { _originalName: 'Pavel', // 私有属性}Object.defineProperty(person, 'name', { get() { console.log('获取属性 name') return this._originalName }, set(value) { console.log(`将属性 name 设置为值 ${value}`) this._originalName = value },})console.log(person.name) // '获取属性 name' 和 'Pavel'person.name = 'Sergei' // 将属性 name 设置为值 Sergei利用 MutationObserver 的相应式 HTML 属性

在 DOM 中实现相应性的一种方法是利用 MutationObserver。
其 API 许可我们不雅观察目标元素及其子元素的属性变革和文本内容变革。

function handleMutations(mutationsList, observer) { mutationsList.forEach((mutation) => { // 不雅观察到的元素的一个属性发生了变革 if (mutation.type === 'attributes') { console.log(`属性 '${mutation.attributeName}' 变动为 '${mutation.target.getAttribute(mutation.attributeName)}'`); } });}const observer = new MutationObserver(handleMutations);const targetElement = document.querySelector('.element-to-observe');// 开始不雅观察目标元素observer.observe(targetElement, { attributes: true });利用 IntersectionObserver 的相应式滚动

IntersectionObserver API 许可对目标元素与另一个元素或视口区域的交集做出反应。

function handleIntersection(entries, observer) { entries.forEach((entry) => { // 目标元素在视口中 if (entry.isIntersecting) { entry.target.classList.add('visible'); } else { entry.target.classList.remove('visible'); } });}const observer = new IntersectionObserver(handleIntersection);const targetElement = document.querySelector('.element-to-observe');// 开始不雅观察目标元素observer.observe(targetElement);

感谢阅读！