8种现代JavaScript响应式模式

最新推荐文章于 2024-07-14 12:56:18 发布

今天也想MK代码

最新推荐文章于 2024-07-14 12:56:18 发布

阅读量1.9k

点赞数 50

文章标签： javascript udp 开发语言

本文链接：https://blog.csdn.net/weixin_42429220/article/details/136063968

版权

响应式的本质是关于系统如何对数据变化做出反应,并且存在不同类型的响应式。但是,在本文中,我们的重点是关于根据数据变化采取行动的响应式。

作为一名前端开发人员,我每天都要面对这些。这是因为浏览器本身是一个完全异步的环境。现代 web 接口必须快速响应用户操作,包括更新 UI,发送网络请求,管理导航以及其他各种任务。

虽然人们经常将响应式与框架联系在一起,但是我认为通过使用纯 JS 实现它我们可以学到很多。所以,我们将自己编写模式代码,并研究一些基于响应式的原生浏览器 API。

内容目录

PubSub 或发布-订阅

PubSub 是最常用和基本的响应式模式之一。发布者负责通知订阅者有关更新的信息,订阅者接收这些更新并可以相应地做出反应。

class PubSub {
  constructor() {
    this.subscribers = {};
  }

  subscribe(event, callback) {
    if (!this.subscribers[event]) {
      this.subscribers[event] = [];
    }

    this.subscribers[event].push(callback);
  }

  // Publish a message to all subscribers of a specific event
  publish(event, data) {
    if (this.subscribers[event]) {
      this.subscribers[event].forEach((callback) => {
        callback(data);
      });
    }
  }
}

const pubsub = new PubSub();

pubsub.subscribe('news', (message) => {
  console.log(`Subscriber 1 received news: ${message}`);
});

pubsub.subscribe('news', (message) => {
  console.log(`Subscriber 2 received news: ${message}`);
});

// Publish a message to the 'news' event
pubsub.publish('news', 'Latest headlines: ...');

// console logs are:
// Subscriber 1 received news: Latest headlines: ...
// Subscriber 2 received news: Latest headlines: ...

一个流行的使用示例是 Redux。这个流行的状态管理库就是基于这种模式(或者更具体地说,是基于 Flux 架构)。在 Redux 的上下文中,事情工作得很简单:

发布者:存储充当发布者的角色。当一个动作被分发时,存储通知所有订阅的组件有关状态更改的信息。
订阅者:应用程序中的 UI 组件是订阅者。它们订阅 Redux 存储并在状态发生变化时接收更新。

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

浏览器通过 CustomEvent 类和 dispatchEvent 方法为触发和订阅自定义事件提供了 API。后者不仅为我们提供了触发事件的能力,还可以将任何所需的数据附加到事件上。

const customEvent = new CustomEvent('customEvent', {
  detail: 'Custom event data', // Attach desired data to the event
});

const element = document.getElementById('.element-to-trigger-events');

element.addEventListener('customEvent', (event) => {
  console.log(`Subscriber 1 received custom event: ${event.detail}`);
});

element.addEventListener('customEvent', (event) => {
  console.log(`Subscriber 2 received custom event: ${event.detail}`);
});

// Trigger the custom event
element.dispatchEvent(customEvent);

// console logs are:
// Subscriber 1 received custom event: Custom event data
// Subscriber 2 received custom event: Custom event data

自定义事件目标

如果你不喜欢在 window 对象上全局分派事件,你可以创建自己的事件目标。

通过扩展原生 EventTarget 类,您可以将事件分派到它的新实例上。这可以确保您的事件只在新类本身上被触发,避免全局传播。此外,您可以灵活地直接将处理程序附加到此特定实例上。

class CustomEventTarget extends EventTarget {
  constructor() {
    super();
  }

  // Custom method to trigger events
  triggerCustomEvent(eventName, eventData) {
    const event = new CustomEvent(eventName, { detail: eventData });
    this.dispatchEvent(event);
  }
}

const customTarget = new CustomEventTarget();

// Add an event listener to the custom event target
customTarget.addEventListener('customEvent', (event) => {
  console.log(`Custom event received with data: ${event.detail}`);
});

// Trigger a custom event
customTarget.triggerCustomEvent('customEvent', 'Hello, custom event!');

// console log is:
// Custom event received with data: Hello, custom event!

观察者

观察者模式与 PubSub 真的很相似。您订阅 Subject,然后它通知其订阅者(Observers)有关更改的信息,允许它们相应地作出反应。这种模式在构建解耦和灵活的架构方面发挥着重要作用。

class Subject {
  constructor() {
    this.observers = [];
  }

  addObserver(observer) {
    this.observers.push(observer);
  }

  // Remove an observer from the list
  removeObserver(observer) {
    const index = this.observers.indexOf(observer);

    if (index !== -1) {
      this.observers.splice(index, 1);
    }
  }

  // Notify all observers about changes
  notify() {
    this.observers.forEach((observer) => {
      observer.update();
    });
  }
}

class Observer {
  constructor(name) {
    this.name = name;
  }

  // Update method called when notified
  update() {
    console.log(`${this.name} received an update.`);
  }
}

const subject = new Subject();
const observer1 = new Observer('Observer 1');
const observer2 = new Observer('Observer 2');

// Add observers to the subject
subject.addObserver(observer1);
subject.addObserver(observer2);

// Notify observers about changes
subject.notify();

// console logs are:
// Observer 1 received an update.
// Observer 2 received an update.

使用 Proxy 的响应式属性

如果您想对对象中的更改做出反应,Proxy 是最好的选择。它允许我们在设置或获取对象字段的值时实现响应式。

const person = {
  name: 'Pavel',
  age: 22,
};

const reactivePerson = new Proxy(person, {
  // Intercept set operation
  set(target, key, value) {
    console.log(`Setting ${key} to ${value}`);
    target[key] = value;

    // Indicates if setting value was successful
    return true;
  },
  // Intercept get operation
  get(target, key) {
    console.log(`Getting ${key}`);

    return target[key];
  },
});

reactivePerson.name = 'Sergei'; // Setting name to Sergei
console.log(reactivePerson.name); // Getting name: Sergei

reactivePerson.age = 23; // Setting age to 23
console.log(reactivePerson.age); // Getting age: 23

单个对象属性和响应式

如果您不需要跟踪对象中的所有字段,可以使用 Object.defineProperty 或 Object.defineProperties 来选择特定的一个或一组。

const person = {
  _originalName: 'Pavel', // private property
}

Object.defineProperty(person, 'name', {
  get() {
    console.log('Getting property name')
    return this._originalName
  },
  set(value) {
    console.log(`Setting property name to value ${value}`)
    this._originalName = value
  },
})

console.log(person.name) // 'Getting property name' and 'Pavel'
person.name = 'Sergei' // Setting property name to value Sergei

使用 MutationObserver 的响应式 HTML 属性

使用 MutationObserver 实现 DOM 中的响应式的一种方法。它的 API 允许我们观察目标元素及其子元素中的属性更改和文本内容更改。

function handleMutations(mutationsList, observer) {
  mutationsList.forEach((mutation) => {
    // An attribute of the observed element has changed
    if (mutation.type === 'attributes') {
      console.log(`Attribute '${mutation.attributeName}' changed to '${mutation.target.getAttribute(mutation.attributeName)}'`);
    }
  });
}

const observer = new MutationObserver(handleMutations);
const targetElement = document.querySelector('.element-to-observe');

// Start observing the target element
observer.observe(targetElement, { attributes: true });

使用 IntersectionObserver 的响应式滚动

IntersectionObserver API 使我们能够响应目标元素与另一个元素或视口区域的相交。

function handleIntersection(entries, observer) {
  entries.forEach((entry) => {
    // The target element is in the viewport
    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');

// Start observing the target element
observer.observe(targetElement);

感谢您的阅读!

我希望您觉得这篇文章很有用。如果您有任何疑问或建议,请留下评论。您的反馈会帮助我变得更好。