首页 > web前端 > js教程 > 改善项目中的耦合

改善项目中的耦合

Mary-Kate Olsen
发布: 2024-12-24 22:09:11
原创
936 人浏览过

大家好!这篇文章旨在帮助您改进项目数据类型的连接方式,使它们更可靠且更易于理解。

TLDR 对于那些匆忙的人:避免重复引用同一事物的类型和常量,并尝试给它们提供暗示性的名称(即使它们是简单的字符串或数字)。这将使您以后更容易识别、修改或删除您的代码。


问题

假设您正在开发一个电子商务网站,并且您已将产品类型定义为:

export type ProductType = {
  id: string;
  name: string;
  price: number;
};
登录后复制

在此类项目中,您可以通过简单的函数轻松找到引用产品 id 的多种方式:

  • const getProductById = (产品: ProductType[], id: string) =>; {...};
  • const onProductPress = (productId: string) =>; {...};

更高级的情况,例如将产品的数据保存在状态存储中,或将 props 传递给 JS 框架中的其他组件


问题

现在让我们用这种方法解决问题:

  1. 如果产品的 id 不是这么简单好记怎么办?如果它是类似 ab12-w35-s48-09 (代表例如供应商类别产品变体)怎么办?
  2. 如果(这是我的重点)您必须更改整个项目中所有出现的产品 ID 的类型怎么办? 如果您在不同的文件中引用它时给它不同的名称(例如 ProductId、product_id、pid 或 id),这可能会特别困难。您也不能只搜索字符串,因为您肯定会发现许多与它无关的出现。

潜在的解决方案

要解决问题一,您可以使用 模板文字类型,这将使新产品 ID 的类型为:${string}-${string}-${string}-${string}。现在,在多个文件中重复此操作会很烦人,因此可以:

  • 为 id 字段创建自定义类型,并在 ProductType 中使用它:
type ProductIdType = `${string}-${string}-${string}-${string}`
登录后复制

如果需要,您还可以为每个字符串创建并引用不同的类型,或者引用您之前创建的其他类型。最后您将使用新类型:

(productId : ProductIdType) => {...}
登录后复制
  • 或者你可以参考ProductType的id条目:
(productId : ProductType['id']) => {...}
登录后复制

这两种方法都可以解决问题二:无论您在哪里找到 ProductIdType 或 ProductType['id'],您都会知道您正在处理产品的 id,并且知道您应该替换它。

第一个解决方案可能看起来更友好,但现在您将拥有一个双向结构,其中一个产品类型和另一个 id 类型,可以独立使用。以下是所述结构的示例表示:

Improving Coupling in your Project

这无疑是一个较小的问题,但如果您更改/删除 ProductType 的 id 条目,该更改不会反映在您的整个项目中。

然而,最后一种方法是我通常遵循的方法,因为它增加了数据的耦合(由于缺乏更好的词)。现在,您对产品数据的所有引用都直接指向 ProductType:

Improving Coupling in your Project


结论

我并不是说您应该始终为所有数据创建类型。每当我看到自己重复引用相同的数据类型时,我通常会选择访问原始数据类型,就像第二种方法一样。

额外提示 1: 您可以对 const 应用相同的逻辑:如果您发现自己在多个位置重复相同的魔术数字或字符串,最好给它一个正确的指定并使用它。

额外提示 2: 如果您想选择/排除某个类型的多个条目而不是重复它们,请使用“选择”、“省略”和“排除”以及其他实用程序类型。

就这些了!我希望你喜欢我的帖子。请随时留下您对此主题的反馈。

以上是改善项目中的耦合的详细内容。更多信息请关注PHP中文网其他相关文章!

来源:dev.to
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板