在现代 Web 应用程序中，前端部分通常被设计为单页应用程序（SPA），它们可以从服务器获取数据并显示它们。传统的 Web 应用程序从服务器中获取完整的 HTML 页面，当然也不排除使用 AJAX 技术另行加载部分内容。但是 SPA 更注重利用 AJAX 技术来和服务器交换资源，通常是 JSON 格式的数据。
然而，随着应用程序越来越复杂，数据模型变得越来越抽象并且规模逐渐变大。此时，通过 RESTful API 发送多个请求以获取所需数据已不再是一个可行的选择。许多开发人员不得不考虑到使用查询语言，例如 GraphQL。
GraphQL 是由 Facebook 开发的一种查询语言和运行时，其强调的设计思想之一就是分离关注点。在 GraphQL 中，关注点分离通常是将查询和数据处理功能分离的技术，这使得整个应用程序变得更加易于维护和扩展。
关注点分离
关注点分离是一种软件设计模式，通常用于将应用程序中的各个部分分解成独立的功能。
在 GraphQL 中，关注点分离是将查询和数据修改（mutation）分离的技术。为了实现此目的，GraphQL 将查询与解析、验证和执行等底层逻辑相分离。
查询关注点是指查询应该如何被构造，以及应该返回什么结果。这些查询通常由客户端生成，包括 GraphQL 查询和变更操作。客户端进行查询时可以指定需要获取的数据、过滤器、排序器以及其他参数。
数据处理关注点处理数据，以便按照前端应用程序的需求处理它。数据处理包括数据源的处理以及所有与数据源相关的操作，例如查询、过滤、排序、聚合、定义字段等等。
经过这样的操作，前端应用程序将获得他们需要的完整数据。这个过程非常灵活，因为一个 GraphQL 查询可以自由地组合和过滤多个数据源的数据。
示例代码
为了更清晰地理解 GraphQL 中的关注点分离设计思想，我们可以通过一个示例来进行演示。在这个示例中，我们假设有一些数据源供查询。我们需要获取在纽约市生活的用户和他们的朋友列表。
首先，我们需要编写一个 GraphQL 查询，如下所示：
----- -
------------ ---- -------
----
-------
--------
----
-------
-
-
-我们使用了 query 语句，以及一个名为 people 的参数。这个参数接受一个值 city，表示我们只想要查询居住在纽约市的用户。
然后，我们需要一个数据源，该数据源需要只返回居住在纽约市的用户。以下代码提供了这样一个数据源：
----- ---------------- -
----- --------------------- -
-- ----- ---- ---- --------
----- ----- - -
----- ----
-
----- ------ - ----- --
---------------------
------------
----------
------ ------
-
-我们可以看到，在这个数据源中，我们将 city 参数传递给 MongoDB 数据库并返回结果。
最后，我们需要解析 GraphQL 查询并将其转换为有效数据。以下代码提供了这样一个功能：
----- --------- - -
------ -
------- -------- ----- -------- ----- -- -
------ -------------------------------------------
-
-
-这个函数使用的是 Apollo 服务器库的 GraphQL 解析器。如上所述，我们需要取回我们的数据并将其返回给前端应用程序。
结论
GraphQL 的关注点分离设计思想是一种非常有效的技术，它将前端应用程序的查询和数据处理功能分离开来，为底层逻辑和开发者带来了更多的灵活性和可读性。因此，关注点分离设计思想是值得前端开发人员学习的技术，这将有助于构建更具弹性和易维护性的应用程序。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6731d3140bc820c5823aa043