原文地址：Separation of Data and Ui in your Web App

原文作者：Georgy Glezer

译文出自：掘金翻译计划

本文永久链接：github.com/xitu/gold-m…

译者：fireairforce

校对者：Roc

Web 应用程序中的数据和 UI 分离

大家好，我是 Georgy，是 Bringg 的一个全栈开发人员，这是我写的第一篇文章。 😅

今天我想重点介绍一下在构建 web 应用程序时数据和 UI 分离的概念，它是怎样帮助你构建更清晰、更易于维护和更出色的 web 应用程序，以及我如何用 4 个不同的 UI/框架库呈现相同内容的一个小例子。😄

通常在任意的 web 应用程序中，都有两个主要部分：

数据
UI

因此，你可以选择一个框架/UI 库，比如 React、Angular、Vue 等等，然后决定使用什么状态管理器，或者在没有状态管理器的情况下如何管理你的数据。

你开始写你的第一个功能，以一个用户列表为例，你有一个复选框来选择用户，然后你需要决定在哪里保存你当前选择的用户。

你是将它们保存在 React 组件的 state 里？或者把它们放在你的 redux store 里？亦或者是把它们放在你的 Angular 服务或 controller 里？被选择的用户是否与你的数据有关？或者只是纯粹的视图指示器？

好的，我将和你分享编写功能的思路或想法，通过上面的例子，让你能更清晰地分离数据和 UI。

用户是我们应用程序中的数据，我们可以添加用户、修改用户数据、删除用户、从我们拥有的用户中获取诸如谁在线和用户总数之类的信息。

当我们显示一个用户列表时，我们只是以一种对用户更可见的方式来展示我们的数据，就像一个供用户查看的列表一样。我们允许他选择用户和取消选择用户，这只是视图的当前状态，页面上被选择的用户和数据没有任何关系，应该分离开。

通过这种分离，我们将 JavaScript 应用程序开发为纯 JavaScript 应用程序，然后选择我们想要表示数据的方式。这可以让我们获得最大的灵活性，比如在不同的地方使用不同的 UI 库，这组组件我想用 react 来表示，其它一些组件我想用 web 组件来表示，现在通过这种分离，我可以很容易实现这个想法。