關(guān)於如何在React世界中組織前端應(yīng)用的指導(dǎo)很少。 （只需移動(dòng)文件，直到“感覺正確”，大聲笑）。事實(shí)是我們可以做得更好。讓我們看一下您可能會(huì)考慮用於架構(gòu)網(wǎng)站的一種模式。

首先，您可能會(huì)在 /組件和 /容器文件夾之間將代碼拆分。這適用於小網(wǎng)站，但您會(huì)發(fā)現(xiàn)自己在擴(kuò)展到較大站點(diǎn)時(shí)會(huì)尋找更健壯的東西。幸運(yùn)的是，數(shù)十年來對(duì)系統(tǒng)設(shè)計(jì)的研究為我們提供了許多模式，可以探索以創(chuàng)建可擴(kuò)展的體系結(jié)構(gòu)。

其中之一是域驅(qū)動(dòng)的設(shè)計(jì)，在過去的幾年中，它恢復(fù)了知名度。讓我們探索如何在React-Land中使用它。

域驅(qū)動(dòng)設(shè)計(jì)的底漆

域驅(qū)動(dòng)設(shè)計(jì)（DDD）是通過將其基本數(shù)據(jù)模型與域邏輯聯(lián)繫起來來管理軟件應(yīng)用程序複雜性的實(shí)踐。那是一口氣，所以讓我們進(jìn)一步將其分解。

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

當(dāng)設(shè)計(jì)是域驅(qū)動(dòng)的時(shí)，這意味著我們將域模型（例如撲克域中的撲克卡）放置在上下文（例如上下文分組，例如游戲）中，以幫助管理複雜性。

組織DDD網(wǎng)站

域驅(qū)動(dòng)的設(shè)計(jì)專門用於處理生長(zhǎng)站點(diǎn)的複雜性，因?yàn)樗鼈兲砑恿嗽絹碓蕉嗟哪Ｐ?。?duì)於具有一個(gè)模型的站點(diǎn)來說，這確實(shí)沒有意義。一旦獲得大約四個(gè)型號(hào)，這是開始將模型綁定到多個(gè)上下文的好時(shí)機(jī)。這不是一個(gè)艱難的規(guī)則，因此不要覺得您必須闖入多種上下文，但是一旦您超過了四個(gè)模型，這些上下文分組就會(huì)開始浮出水面。

首先組織您的域

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

這是在Twitter中分開關(guān)注點(diǎn)的唯一方法嗎？絕對(duì)不是！ DDD的一個(gè)關(guān)鍵方面是沒有一種正確的方法來創(chuàng)建域。有很多方法可以將應(yīng)用程序的有限上下文分開，因此不要過多地專注於我們選擇的體系結(jié)構(gòu)。取而代之的是，將其用作跳板，以了解我們?nèi)绾螌DD應(yīng)用於前端代碼的組織。

也就是說，我們的代碼現(xiàn)在將結(jié)構(gòu)化為這樣（假設(shè)您從諸如create-react-app之類的東西開始）：

嘰嘰喳喳/
├─CS.CSS
├ -  app.js
├─..p.test.js
├ - 博客/
└─..-互動(dòng)/

定義每個(gè)域中的組件和容器

現(xiàn)在我們已經(jīng)設(shè)置了基本文件夾結(jié)構(gòu)，現(xiàn)在該添加一些真實(shí)的組件了！從上面的域UML圖中查看，從在給定頁面上獲取數(shù)據(jù)的容器以及組織組成這些頁面的模板的組件將很有用。在擴(kuò)展我們的應(yīng)用程序上，我們現(xiàn)在已經(jīng)有了以下結(jié)構(gòu)（為簡(jiǎn)單起見，請(qǐng)省略我們的隨附的test.js文件）：

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

我們?nèi)匀槐Ａ魬?yīng)用程序文件以初始化對(duì)根級(jí)HTML標(biāo)籤的反應(yīng)。有了我們的域，我們開始構(gòu)建我們的容器（例如主頁和用戶頁面）和組件（例如TweetCard和TweetListItem）。另外，我們可以進(jìn)一步將域內(nèi)的模型分割成看起來這樣：

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

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

添加助手，如果需要

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

與主持人清理模板

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

有與我的用戶直接相關(guān)的信息：名稱，處理，描述，位置，網(wǎng)站，生日，開始日期。其他模型之間也有一些關(guān)聯(lián)計(jì)數(shù) - 其他有多少用戶關(guān)注我？我關(guān)注多少其他用戶？頁面上甚至沒有捕獲其他邏輯，例如我喜歡的推文，答復(fù)，媒體上傳和內(nèi)容。為了適當(dāng)?shù)夭东@所有這些演示邏輯，我們可以在文件樹中添加一個(gè)附加文件，以將我們的演示者模式與JSX組件隔離：

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

將邏輯推入公用事業(yè)

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

 嘰嘰喳喳/
    ├─CS.CSS
    ├ -  app.js
    ├─..p.test.js
    ├ - 博客/
    Homepage.js
    │├├─-tweetcard.js
    │││─-tweetdialog.js
    ││├前Tweetlist.js
    ││├─-tweetListItem.js
    ││├前Usercard.js
    │├├─-USERCARD.PRESENTERJS
    ││└─-userpage.js
    ├─..-互動(dòng)/
    ││├站關(guān)注Button.js
    │││├-button.js
    sharebutton.js
    └ -  UTILS/
         ├ - 貨幣
         ├ - 時(shí)間
         └ - 驗(yàn)證

沒有錯(cuò)誤的方法來組織您的應(yīng)用程序！

最終，選擇是您的。這只是您可以安排申請(qǐng)的眾多方法的一個(gè)例子。域驅(qū)動(dòng)的設(shè)計(jì)是一種有價(jià)值的工具，因?yàn)樗?strong>以有意義的方式將業(yè)務(wù)邏輯分開，為開發(fā)人員之間的域?qū)I(yè)知識(shí)提供了更清晰的區(qū)別，並為易於組織和擴(kuò)展您的代碼提供了規(guī)則。

但是，如果您正在尋找一種替代React應(yīng)用程序文件結(jié)構(gòu)的傳統(tǒng)混亂，請(qǐng)查看以域驅(qū)動(dòng)的設(shè)計(jì)。這可能只是事情。

最後，如果您喜歡這種內(nèi)容，並想了解有關(guān)前端，用戶界面開發(fā)以及UX設(shè)計(jì)和研究的更多信息（根據(jù)您在行業(yè)中的經(jīng)驗(yàn)組織），我會(huì)運(yùn)行一個(gè)免費(fèi)的新聞通訊，您可能想檢查一下。

以上是域驅(qū)動(dòng)的設(shè)計(jì)與React的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！