什麼是 JavaScript 中的 Flux 架構元件?


如果你在過去幾年裡一直關注 JavaScript 世界,你可能聽說過“flux”架構的概念。簡而言之,flux 是一種用於管理應用程式中資料流的模式。它最初是為 React 設計的,但它可以與任何其他 JavaScript 框架一起使用。

有幾種不同的方法可以實現 flux,但它們都共享一些關鍵元件:

  • 分發器 - 這是一箇中央物件,負責管理應用程式中的所有資料流。所有更新都從分發器開始。

  • 儲存 - 這些是包含應用程式資料的物件。可以將它們視為模型,但它們還具有發出更改事件的能力。

  • 檢視 - 這些是構成使用者介面的 React 元件。它們偵聽儲存發出的更改事件並相應地更新自身。

在本教程中,我們將更深入地瞭解每個元件,並瞭解它們如何協同工作。

分發器

分發器是 flux 應用程式的中心樞紐。它負責管理所有資料流。所有更新都從分發器開始。

分發器是一個單例物件,這意味著應用程式中只有一個例項。它也是一個事件發射器。當發生操作時,分發器會發出一個事件,其中包含操作型別和任何相關資料。

分發器將這些事件廣播到儲存,然後儲存相應地更新自身。檢視偵聽儲存發出的更改事件並更新自身。

儲存

儲存是包含應用程式資料的物件。可以將它們視為模型,但它們還具有發出更改事件的能力。

當儲存從分發器接收操作時,它可以選擇相應地更新自身。更新其資料後,它會發出更改事件。

檢視偵聽這些更改事件並更新自身。

檢視

檢視是構成使用者介面的 React 元件。它們偵聽儲存發出的更改事件並相應地更新自身。

在 flux 應用程式中,所有更新都從分發器開始。分發器會發出一個事件,其中包含操作型別和任何相關資料。儲存接收這些事件並相應地更新自身。儲存更新其資料後,它們會發出更改事件。檢視偵聽這些更改事件並更新自身。

結論

Flux 是一種用於管理應用程式中資料流的模式。它最初是為 React 設計的,但它可以與任何其他 JavaScript 框架一起使用。

有幾種不同的方法可以實現 flux,但它們都共享一些關鍵元件:分發器、儲存和檢視。

分發器是 flux 應用程式的中心樞紐。它負責管理所有資料流。所有更新都從分發器開始。

儲存是包含應用程式資料的物件。可以將它們視為模型,但它們還具有發出更改事件的能力。

檢視是構成使用者介面的 React 元件。它們偵聽儲存發出的更改事件並相應地更新自身。

更新於:2022年9月14日

363 次檢視

開啟您的 職業生涯

透過完成課程獲得認證

開始
廣告