社区 学习 工具库 休闲
搜索
简体中文
首页 > web前端 > js教程 > 掌握依赖倒置原则：使用 DI 实现干净代码的最佳实践

掌握依赖倒置原则：使用 DI 实现干净代码的最佳实践

Linda Hamilton
发布： 2024-11-30 00:25:11
原创
263 人浏览过

如果您熟悉面向对象编程，或者刚刚开始探索它，您可能遇到过缩写词SOLID。 SOLID 代表了一组旨在帮助开发人员编写干净、可维护且可扩展的代码的原则。在这篇文章中，我们将重点关注 SOLID 中的“D”，它代表依赖倒置原则。

但在深入了解细节之前，让我们首先花点时间了解这些原则背后的“原因”。

在面向对象编程中，我们通常将应用程序分解为类，每个类封装特定的业务逻辑并与其他类交互。例如，想象一个简单的在线商店，用户可以将产品添加到购物车中。此场景可以通过多个类一起进行建模来管理商店的运营。让我们以这个例子为基础来探索依赖倒置原则如何改进我们系统的设计。

class ProductService {
 getProducts() {
   return ['product 1', 'product 2', 'product 3'];
 }
}


class OrderService {
 constructor() {
   this.productService = new ProductService();
 }

 getOrdersForUser() {
   return this.productService.getProducts();
 }
}


class UserService {
 constructor() {
   this.orderService = new OrderService();
 }

 getUserOrders() {
   return this.orderService.getOrdersForUser();
 }
}
登录后复制
登录后复制
登录后复制
登录后复制

正如我们所见，像 OrderService 和 ProductService 这样的依赖关系在类构造函数中紧密耦合。这种直接依赖使得替换或模拟这些组件变得困难，这在测试或交换实现时提出了挑战。

依赖注入（DI）

依赖注入 (DI) 模式提供了这个问题的解决方案。通过遵循 DI 模式，我们可以解耦这些依赖关系，并使我们的代码更加灵活和可测试。以下是我们如何重构代码来实现 DI：

Mastering the Dependency Inversion Principle: Best Practices for Clean Code with DI

class ProductService {
 getProducts() {
   return ['product 1', 'product 2', 'product 3'];
 }
}


class OrderService {
 constructor(private productService: ProductService) {}

 getOrdersForUser() {
   return this.productService.getProducts();
 }
}


class UserService {
 constructor(private orderService: OrderService) {}

 getUserOrders() {
   return this.orderService.getOrdersForUser();
 }
}


new UserService(new OrderService(new ProductService()));
登录后复制
登录后复制
登录后复制

我们显式地将依赖项传递给每个服务的构造函数，这虽然是朝着正确方向迈出的一步，但仍然会导致紧密耦合的类。这种方法确实稍微提高了灵活性，但它并没有完全解决使我们的代码更加模块化且易于测试的根本问题。

依赖倒置原理（DiP）

依赖倒置原理（DiP）通过回答关键问题更进一步：我们应该传递什么？该原则表明，我们不应传递具体的实现，而应仅传递必要的抽象，特别是与预期接口匹配的依赖项。

例如，考虑带有 getProducts 方法的 ProductService 类，该方法返回 产品数组 。我们可以通过多种方式实现它，而不是直接将 ProductService 耦合到特定的实现（例如，从数据库中获取数据）。一种实现可能从数据库获取产品，而另一种实现可能返回硬编码的 JSON 对象以进行测试。关键是两种实现共享相同的接口，确保灵活性和可互换性。

Mastering the Dependency Inversion Principle: Best Practices for Clean Code with DI

控制反转 (IoC) 和服务定位器

为了将这一原则付诸实践，我们经常依赖一种称为控制反转 (IoC) 的模式。 IoC 是一种技术，将对依赖项的创建和管理的控制从类本身转移到外部组件。这通常是通过依赖注入容器或服务定位器来实现的，它充当注册表，我们可以从中请求所需的依赖项。通过 IoC，我们可以动态地注入适当的依赖项，而无需将它们硬编码到类构造函数中，从而使系统更加模块化并且更易于维护。

Mastering the Dependency Inversion Principle: Best Practices for Clean Code with DI

class ProductService {
 getProducts() {
   return ['product 1', 'product 2', 'product 3'];
 }
}


class OrderService {
 constructor() {
   this.productService = new ProductService();
 }

 getOrdersForUser() {
   return this.productService.getProducts();
 }
}


class UserService {
 constructor() {
   this.orderService = new OrderService();
 }

 getUserOrders() {
   return this.orderService.getOrdersForUser();
 }
}
登录后复制
登录后复制
登录后复制
登录后复制

正如我们所看到的，依赖项是在容器内注册的，这使得它们可以在必要时被替换或交换。这种灵活性是一个关键优势，因为它促进了组件之间的松散耦合。

但是，这种方法有一些缺点。由于依赖项是在运行时解析的，因此如果出现问题（例如，如果依赖项丢失或不兼容），可能会导致运行时错误。此外，无法保证注册的依赖项将严格符合预期的接口，这可能会导致微妙的问题。这种依赖关系解析方法通常称为服务定位器模式，并且在许多情况下被认为是反模式，因为它依赖于运行时解析并且有可能掩盖依赖关系。

InversifyJS

JavaScript 中用于实现 控制反转 (IoC) 模式的最流行的库之一是 InversifyJS。它提供了一个强大且灵活的框架，用于以干净、模块化的方式管理依赖关系。然而，InversifyJS 有一些缺点。一项主要限制是设置和管理依赖项所需的样板代码量。此外，它通常需要以特定的方式构建应用程序，这可能并不适合每个项目。

Mastering the Dependency Inversion Principle: Best Practices for Clean Code with DI

InversifyJS 的替代方案是Friendly-DI，这是一种轻量级且更简化的方法，用于管理 JavaScript 和 TypeScript 应用程序中的依赖关系。它的灵感来自于 Angular 和 NestJS 等框架中的 DI 系统，但设计得更加简约、简洁。

Friendly-DI 的一些主要优势包括：

  • 体积小：只有 2 KB，没有外部依赖。
  • 跨平台：在浏览器和 Node.js 环境中无缝工作。
  • 简单的 API：直观且易于使用，只需最少的配置。
  • MIT 许可证：具有宽松许可的开源。

但是，需要注意的是，Friendly-DI 是专为 TypeScript 设计的，您需要先安装其依赖项才能开始使用它。

class ProductService {
 getProducts() {
   return ['product 1', 'product 2', 'product 3'];
 }
}


class OrderService {
 constructor() {
   this.productService = new ProductService();
 }

 getOrdersForUser() {
   return this.productService.getProducts();
 }
}


class UserService {
 constructor() {
   this.orderService = new OrderService();
 }

 getUserOrders() {
   return this.orderService.getOrdersForUser();
 }
}
登录后复制
登录后复制
登录后复制
登录后复制

并且还扩展tsconfig.json:

class ProductService {
 getProducts() {
   return ['product 1', 'product 2', 'product 3'];
 }
}


class OrderService {
 constructor(private productService: ProductService) {}

 getOrdersForUser() {
   return this.productService.getProducts();
 }
}


class UserService {
 constructor(private orderService: OrderService) {}

 getUserOrders() {
   return this.orderService.getOrdersForUser();
 }
}


new UserService(new OrderService(new ProductService()));
登录后复制
登录后复制
登录后复制

上面的例子可以用Friendly-DI修改：

class ServiceLocator {
 static #modules = new Map();

 static get(moduleName: string) {
   return ServiceLocator.#modules.get(moduleName);
 }

 static set(moduleName: string, exp: never) {
   ServiceLocator.#modules.set(moduleName, exp);
 }
}

class ProductService {
 getProducts() {
   return ['product 1', 'product 2', 'product 3'];
 }
}


class OrderService {
 constructor() {
   const ProductService = ServiceLocator.get('ProductService');
   this.productService = new ProductService();
 }

 getOrdersForUser() {
   return this.productService.getProducts();
 }
}


class UserService {
 constructor() {
   const OrderService = ServiceLocator.get('OrderService');
   this.orderService = new OrderService();
 }

 getUserOrders() {
   return this.orderService.getOrdersForUser();
 }
}

ServiceLocator.set('ProductService', ProductService);
ServiceLocator.set('OrderService', OrderService);


new UserService();
登录后复制
登录后复制

  1. 正如我们所看到的，我们添加了 @Injectable() 装饰器，它将我们的类标记为可注入的，表明它们是依赖注入系统的一部分。这个装饰器允许 DI 容器知道这些类可以在需要的地方实例化和注入。

  2. 当在构造函数中将类声明为依赖项时，我们不会直接绑定到具体类本身。相反，我们根据其接口来定义依赖关系。这将我们的代码与具体实现解耦，并提供更大的灵活性，从而在需要时更容易交换或模拟依赖项。

  3. 在此示例中，我们将 UserService 放置在 App 类中。这种模式被称为组合根。 组合根是应用程序中组装和注入所有依赖项的中心位置 - 本质上是我们应用程序依赖关系图的“根”。通过将此逻辑保留在一个位置，我们可以更好地控制如何在整个应用程序中解析和注入依赖项。

最后一步是在 DI 容器中注册 App 类，这将使容器能够在应用程序启动时管理生命周期和所有依赖项的注入。

Mastering the Dependency Inversion Principle: Best Practices for Clean Code with DI

npm i friendly-di reflect-metadata
登录后复制

如果我们需要替换应用程序中的任何类，我们只需要按照原始接口创建模拟类：

class ProductService {
 getProducts() {
   return ['product 1', 'product 2', 'product 3'];
 }
}


class OrderService {
 constructor() {
   this.productService = new ProductService();
 }

 getOrdersForUser() {
   return this.productService.getProducts();
 }
}


class UserService {
 constructor() {
   this.orderService = new OrderService();
 }

 getUserOrders() {
   return this.orderService.getOrdersForUser();
 }
}
登录后复制
登录后复制
登录后复制
登录后复制

然后使用替换方法，我们将可替换类声明为模拟类：

class ProductService {
 getProducts() {
   return ['product 1', 'product 2', 'product 3'];
 }
}


class OrderService {
 constructor(private productService: ProductService) {}

 getOrdersForUser() {
   return this.productService.getProducts();
 }
}


class UserService {
 constructor(private orderService: OrderService) {}

 getUserOrders() {
   return this.orderService.getOrdersForUser();
 }
}


new UserService(new OrderService(new ProductService()));
登录后复制
登录后复制
登录后复制

友好-DI我们可以多次替换：

class ServiceLocator {
 static #modules = new Map();

 static get(moduleName: string) {
   return ServiceLocator.#modules.get(moduleName);
 }

 static set(moduleName: string, exp: never) {
   ServiceLocator.#modules.set(moduleName, exp);
 }
}

class ProductService {
 getProducts() {
   return ['product 1', 'product 2', 'product 3'];
 }
}


class OrderService {
 constructor() {
   const ProductService = ServiceLocator.get('ProductService');
   this.productService = new ProductService();
 }

 getOrdersForUser() {
   return this.productService.getProducts();
 }
}


class UserService {
 constructor() {
   const OrderService = ServiceLocator.get('OrderService');
   this.orderService = new OrderService();
 }

 getUserOrders() {
   return this.orderService.getOrdersForUser();
 }
}

ServiceLocator.set('ProductService', ProductService);
ServiceLocator.set('OrderService', OrderService);


new UserService();
登录后复制
登录后复制

就这样，如果您对此主题有任何意见或澄清，请在评论中写下您的想法。

以上是掌握依赖倒置原则：使用 DI 实现干净代码的最佳实践的详细内容。更多信息请关注PHP中文网其他相关文章！

来源：dev.to
上一篇：Radix UI 用自定义调色板替换 Radix Color 下一篇：为什么在 `` 标签中同时使用 `src` 和内容会出现问题？
本站声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
作者最新文章
最新问题
function_exists()无法判定自定义函数 function test()    {        return true;    }    if (function_exists('TEST')) {        ech...
来自于 2024-04-29 11:01:01
0
3
2041
google 浏览器 手机版显示的怎么实现 老师您好，google 浏览器怎么变成手机版样式的？
来自于 2024-04-23 00:22:19
0
11
2201
子窗口操作父窗口，输出没反应 前两句可执行，最后一句没法应
来自于 2024-04-19 15:37:47
0
1
1857
父窗口没有输出 document.onclick = function(){ window.opener.document.write('我是子窗口的输出');                  ...
来自于 2024-04-18 23:52:34
0
1
1745
关于CSS思维导图的课件在哪？ 课件
来自于 2024-04-16 10:10:18
0
0
1766
相关专题
更多>
热门推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板