域驱动的设计与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中文网其他相关文章！