8種現(xiàn)代JavaScript響應(yīng)式模式小結(jié)

更新時間：2024年02月07日 10:55:35 作者：今天也想MK代碼

響應(yīng)式的本質(zhì)是關(guān)于系統(tǒng)如何對數(shù)據(jù)變化做出反應(yīng),并且存在不同類型的響應(yīng)式,本文就來介紹8種現(xiàn)代JavaScript響應(yīng)式模式小結(jié),具有一定的參考價值,感興趣的可以了解一下

PubSub 或發(fā)布-訂閱

PubSub 是最常用和基本的響應(yīng)式模式之一。發(fā)布者負責通知訂閱者有關(guān)更新的信息,訂閱者接收這些更新并可以相應(yīng)地做出反應(yīng)。

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。這個流行的狀態(tài)管理庫就是基于這種模式(或者更具體地說,是基于 Flux 架構(gòu))。在 Redux 的上下文中,事情工作得很簡單:

發(fā)布者:存儲充當發(fā)布者的角色。當一個動作被分發(fā)時,存儲通知所有訂閱的組件有關(guān)狀態(tài)更改的信息。
訂閱者:應(yīng)用程序中的 UI 組件是訂閱者。它們訂閱 Redux 存儲并在狀態(tài)發(fā)生變化時接收更新。

作為 PubSub 瀏覽器版本的自定義事件

瀏覽器通過 CustomEvent 類和 dispatchEvent 方法為觸發(fā)和訂閱自定義事件提供了 API。后者不僅為我們提供了觸發(fā)事件的能力,還可以將任何所需的數(shù)據(jù)附加到事件上。

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 對象上全局分派事件,你可以創(chuàng)建自己的事件目標。

通過擴展原生 EventTarget 類,您可以將事件分派到它的新實例上。這可以確保您的事件只在新類本身上被觸發(fā),避免全局傳播。此外,您可以靈活地直接將處理程序附加到此特定實例上。

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)有關(guān)更改的信息,允許它們相應(yīng)地作出反應(yīng)。這種模式在構(gòu)建解耦和靈活的架構(gòu)方面發(fā)揮著重要作用。

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 的響應(yīng)式屬性

如果您想對對象中的更改做出反應(yīng),Proxy 是最好的選擇。它允許我們在設(shè)置或獲取對象字段的值時實現(xiàn)響應(yīng)式。

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

單個對象屬性和響應(yīng)式

如果您不需要跟蹤對象中的所有字段,可以使用 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 的響應(yīng)式 HTML 屬性

使用 MutationObserver 實現(xiàn) DOM 中的響應(yīng)式的一種方法。它的 API 允許我們觀察目標元素及其子元素中的屬性更改和文本內(nèi)容更改。

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 的響應(yīng)式滾動

IntersectionObserver API 使我們能夠響應(yīng)目標元素與另一個元素或視口區(qū)域的相交。

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);

到此這篇關(guān)于8種現(xiàn)代JavaScript響應(yīng)式模式小結(jié)的文章就介紹到這了,更多相關(guān)JavaScript響應(yīng)式模式內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: