域驅動的設計與React

關於如何在React世界中組織前端應用的指導很少。 （只需移動文件，直到“感覺正確”，大聲笑）。事實是我們可以做得更好。讓我們看一下您可能會考慮用於架構網站的一種模式。

首先，您可能會在 /組件和 /容器文件夾之間將代碼拆分。這適用於小網站，但您會發現自己在擴展到較大站點時會尋找更健壯的東西。幸運的是，數十年來對系統設計的研究為我們提供了許多模式，可以探索以創建可擴展的體系結構。

其中之一是域驅動的設計，在過去的幾年中，它恢復了知名度。讓我們探索如何在React-Land中使用它。

域驅動設計的底漆

域驅動設計（DDD）是通過將其基本數據模型與域邏輯聯繫起來來管理軟件應用程序複雜性的實踐。那是一口氣，所以讓我們進一步將其分解。

該領域是一個本體，這意味著世界上的事物是如何分組的。例如，托樑一詞與建築構建領域具有非常特定的聯繫。另一個詞，例如邁克（Mike ），可以屬於多個領域，例如聖經名稱的領域（邁克爾（Michael）的縮寫）或與北約語音字母有關的政治領域。

當設計是域驅動的時，這意味著我們將域模型（例如撲克域中的撲克卡）放置在上下文（例如上下文分組，例如游戲）中，以幫助管理複雜性。

組織DDD網站

域驅動的設計專門用於處理生長站點的複雜性，因為它們添加了越來越多的模型。對於具有一個模型的站點來說，這確實沒有意義。一旦獲得大約四個型號，這是開始將模型綁定到多個上下文的好時機。這不是一個艱難的規則，因此不要覺得您必須闖入多種上下文，但是一旦您超過了四個模型，這些上下文分組就會開始浮出水面。

首先組織您的域

讓我們將Twitter作為我們組織的示例網站。在Twitter中分離域的一種方法是將我們的模型分開，以在推文和交互元素的動力和交互元素之間進行分配，這些元素可以使微博傳播和蓬勃發展。

這是在Twitter中分開關注點的唯一方法嗎？絕對不是！ DDD的一個關鍵方面是沒有一種正確的方法來創建域。有很多方法可以將應用程序的有限上下文分開，因此不要過多地專注於我們選擇的體系結構。取而代之的是，將其用作跳板，以了解我們如何將DDD應用於前端代碼的組織。

也就是說，我們的代碼現在將結構化為這樣（假設您從諸如create-react-app之類的東西開始）：

嘰嘰喳喳/
├─CS.CSS
├ -  app.js
├─..p.test.js
├ - 博客/
└─..-互動/

定義每個域中的組件和容器

現在我們已經設置了基本文件夾結構，現在該添加一些真實的組件了！從上面的域UML圖中查看，從在給定頁面上獲取數據的容器以及組織組成這些頁面的模板的組件將很有用。在擴展我們的應用程序上，我們現在已經有了以下結構（為簡單起見，請省略我們的隨附的test.js文件）：

嘰嘰喳喳/
├─CS.CSS
├ -  app.js
├─..p.test.js
├ - 博客/
Homepage.js
│├├─-tweetcard.js
│││─-tweetdialog.js
││├前Tweetlist.js
││├─-tweetListItem.js
││├─-userpage.js
││└前Usercard.js
└─..-互動/
    ├ - ─遵循Button.js
    ├ - ─button.js
    └─— sharebutton.js

我們仍然保留應用程序文件以初始化對根級HTML標籤的反應。有了我們的域，我們開始構建我們的容器（例如主頁和用戶頁面）和組件（例如TweetCard和TweetListItem）。另外，我們可以進一步將域內的模型分割成看起來這樣：

嘰嘰喳喳/
└ - 博客/
    ├ - 用戶/
    Homepage.js
    ││├前Usercard.js
    ││└─-userpage.js
    └─..pweett/
        ├├前Tweetcard.js
        ├ -  tweetdialog.js
        ├ -  tweetlist.js
        └ - ─tweetListitem.js

但是，鑑於應用程序的大小，在此階段不需要。

添加助手，如果需要

當我們構建應用程序時，我們的UI將繼續增加複雜性。為了解決這個問題，我們有兩種方法可以將關注點並將邏輯從組件模板中撤出：主持人和實用程序。主持人將所有視覺演示邏輯從模板中推出，以使視圖層盡可能清潔和簡單。實用程序在前端收集了與模板無關的所有其他邏輯的共享功能。讓我們檢查一下這些。

與主持人清理模板

想想Twitter個人資料。您在我的帳戶上看到哪些元素？

有與我的用戶直接相關的信息：名稱，處理，描述，位置，網站，生日，開始日期。其他模型之間也有一些關聯計數 - 其他有多少用戶關注我？我關注多少其他用戶？頁面上甚至沒有捕獲其他邏輯，例如我喜歡的推文，答复，媒體上傳和內容。為了適當地捕獲所有這些演示邏輯，我們可以在文件樹中添加一個附加文件，以將我們的演示者模式與JSX組件隔離：

嘰嘰喳喳/
└ - 博客/
    ├ - 用戶/
    ││├前Usercard.js
    │││前USERCARD.PRESENTER.JS

將邏輯推入公用事業

某些呈現邏輯是如此基本，以至於它在應用程序中是否在渲染中使用，它都可以在應用程序中有用。貨幣格式，驗證和時間戳記格式都是用例，我們可以從應用程序中的隔離公用事業功能中受益。這些住在哪裡？由於它們跨越了域，因此公用事業可以放在自己的文件夾中：

 嘰嘰喳喳/
    ├─CS.CSS
    ├ -  app.js
    ├─..p.test.js
    ├ - 博客/
    Homepage.js
    │├├─-tweetcard.js
    │││─-tweetdialog.js
    ││├前Tweetlist.js
    ││├─-tweetListItem.js
    ││├前Usercard.js
    │├├─-USERCARD.PRESENTERJS
    ││└─-userpage.js
    ├─..-互動/
    ││├站關注Button.js
    │││├-button.js
    sharebutton.js
    └ -  UTILS/
         ├ - 貨幣
         ├ - 時間
         └ - 驗證

沒有錯誤的方法來組織您的應用程序！

最終，選擇是您的。這只是您可以安排申請的眾多方法的一個例子。域驅動的設計是一種有價值的工具，因為它以有意義的方式將業務邏輯分開，為開發人員之間的域專業知識提供了更清晰的區別，並為易於組織和擴展您的代碼提供了規則。

但是，如果您正在尋找一種替代React應用程序文件結構的傳統混亂，請查看以域驅動的設計。這可能只是事情。

最後，如果您喜歡這種內容，並想了解有關前端，用戶界面開發以及UX設計和研究的更多信息（根據您在行業中的經驗組織），我會運行一個免費的新聞通訊，您可能想檢查一下。

以上是域驅動的設計與React的詳細內容。更多資訊請關注PHP中文網其他相關文章！