8种现代JavaScript响应式模式小结

 更新时间:2024年02月07日 10:55:35   作者:今天也想MK代码  
响应式的本质是关于系统如何对数据变化做出反应,并且存在不同类型的响应式,本文就来介绍8种现代JavaScript响应式模式小结,具有一定的参考价值,感兴趣的可以了解一下

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

作为一名前端开发人员,我每天都要面对这些。这是因为浏览器本身是一个完全异步的环境。现代 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);

到此这篇关于8种现代JavaScript响应式模式小结的文章就介绍到这了,更多相关JavaScript响应式模式内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家! 

相关文章

最新评论