如何在Javascript里使用依赖注入

在JavaScript中使用依赖注入主要涉及创建可接收外部资源（如服务、配置对象、工具库等）的模块或组件、这样可以增加代码的模块性、可测试性、以及可维护性。一种实践方法是将依赖作为参数传递给函数或类的构造器。另一种方式是使用专门的依赖注入库，如InversifyJS或Angular的依赖注入容器，它们通过特定语法和装饰器支持依赖管理。

一个简单的JavaScript依赖注入例子是一个数据库服务被注入到一个需要进行数据操作的类中。构造器注入允许我们将数据库服务的实例传递给类的新实例，从而解耦了类和数据库服务模块，使得在不同环境下（如测试环境）更换服务变得简单。

---

一、理解依赖注入（DI）的概念

依赖注入（DI）是一种设计模式，其核心原则是将依赖项（被一个对象需要的其他对象）从对象本身分离出来，并通过构造函数、方法或属性从外部环境中注入这些依赖项。

依赖注入的优势

依赖注入极大地提高了代码的灵活性和可重用性，因为它减少了组件之间的硬编码关系。通过DI，组件不需要直接创建或搜索所需的依赖项，而是由外部容器提供。这降低了组件间的耦合度，简化了单元测试，因为依赖项可以被模拟或存根对象所替换。

依赖注入的局限性

尽管DI提供了许多好处，对初学者来说可能会有一定的学习曲线。此外，过度使用DI可以导致管理依赖的复杂性增加，尤其是在大型项目中，需要谨慎平衡。

二、掌握基础的依赖注入技术

在JavaScript中实现DI的方式可以很简单，通过将依赖作为参数传递给函数或对象。

构造器注入

构造器注入是一种常见的依赖注入方法。在这种模式下，所有必需的依赖项通过构造函数传递给对象实例。

class DatabaseService {

    // Database service code...
}
class UserController {
    constructor(databaseService) {
        this.databaseService = databaseService;
    }
    createUser(userData) {
        // Use this.databaseService to interact with the database
    }
}
// Usage
const dbService = new DatabaseService();
const userController = new UserController(dbService);

通过将DatabaseService的实例传递给UserController的构造函数，我们解耦了这两个类的直接依赖。

方法注入

在方法注入中，依赖项将直接传递给使用它们的方法，而不是通过构造函数。

class UserService {

    createUser(databaseService, userData) {
        // Use databaseService to create the user
    }
}
// Usage
const dbService = new DatabaseService();
const userService = new UserService();
userService.createUser(dbService, { name: "John Doe" });

这种方法在只有特定方法需要依赖而其他方法不需要时非常有用。

三、使用依赖注入容器

对于更大、更复杂的项目，使用依赖注入容器来管理依赖项可能更合适。这些容器可以负责实例化依赖项、管理它们的生命周期以及提供给需要它们的组件。

容器和令牌

容器使用令牌来注册和解析依赖项。令牌是一个标识符（通常是字符串或符号），用来引用注册在容器中的特定依赖项。

const CONTAINER = new Map();

const SERVICE_TOKEN = Symbol('databaseService');
CONTAINER.set(SERVICE_TOKEN, new DatabaseService());
class UserController {
    constructor(serviceToken) {
        this.databaseService = CONTAINER.get(serviceToken);
    }
    // ...
}
const userController = new UserController(SERVICE_TOKEN);

符号SERVICE_TOKEN作为一个唯一的标识符，在容器中注册和检索DatabaseService。

工厂函数

工厂函数是一种可以返回新实例或对象的函数，它们也可以作为依赖注入的一种方法。

function createDatabaseService() {

    // Initialization code...
    return new DatabaseService();
}
function createUserController(databaseServiceFactory) {
    const dbService = databaseServiceFactory();
    return new UserController(dbService);
}
const userController = createUserController(createDatabaseService);

通过使用工厂函数，你可以在运行时延迟依赖项的创建，并根据需要创建多个实例。

四、应用于前端框架

在现代前端框架中，依赖注入通常是内置的，如Angular。这些框架提供了更高级和抽象的依赖注入机制来简化管理。

Angular中的依赖注入

Angular 使用类装饰器和类型标记来自动注入依赖项。

import { Injectable } from '@angular/core';

@Injectable({
    providedIn: 'root'
})
class DatabaseService {
    // ...
}
import { Component } from '@angular/core';
@Component({
    selector: 'app-user',
    templateUrl: './user.component.html',
    styleUrls: ['./user.component.css']
})
export class UserComponent {
    constructor(public databaseService: DatabaseService) {}
}

在Angular中，DatabaseService被标记为可注入的，Angular的依赖注入系统会自动提供一个DatabaseService实例给UserComponent。

React中的依赖注入类似方案

React没有官方的依赖注入系统，但你可以使用Context API来传递依赖项。

import React, { createContext, useContext } from 'react';

const DatabaseServiceContext = createContext(null);
export function DatabaseServiceProvider({ children, databaseService }) {
    return (
        <DatabaseServiceContext.Provider value={databaseService}>
            {children}
        </DatabaseServiceContext.Provider>
    );
}
function useDatabaseService() {
    return useContext(DatabaseServiceContext);
}
function UserComponent() {
    const databaseService = useDatabaseService();
    // ...
}

useDatabaseService 自定义钩子利用 React 的 Context API 使依赖项在组件树中可用。

五、面向测试的设计与依赖注入

依赖注入的一个主要好处是便于进行单元测试。通过注入模拟的依赖项，你可以在测试环境中更容易地控制对象的行为。

单元测试中的依赖注入

class UserControllerTest {

    testCreateUser() {
        const mockDatabaseService = {
            createUser: (userData) => {
                // Mock implementation...
            }
        };
        const userController = new UserController(mockDatabaseService);
        userController.createUser({ name: 'Test User' });
        // Assert that mockDatabaseService.createUser was called
    }
}

通过向UserController注入一个模拟的数据库服务，可以测试createUser方法而不涉及真实的数据库逻辑。

使用Jest等测试框架进行Mock

现代JavaScript测试框架，如Jest，提供了易于使用的mock功能，这与依赖注入配合得很好。

jest.mock('./databaseService');

it('should create a user', () => {
    const userController = new UserController(mockDatabaseService);
    // ...
});

相关问答FAQs：

1. 什么是依赖注入（DI）在Javascript中的作用？

依赖注入是一种设计模式，它允许开发者将依赖关系解耦，并通过外部提供依赖对象。在Javascript中使用依赖注入可以提高代码的灵活性、可测试性和可维护性。

2. 如何在Javascript中实现依赖注入？

在Javascript中，可以通过手动编写依赖注入代码来实现DI，也可以使用DI容器库来简化这个过程。手动实现依赖注入可以通过将依赖作为参数传递给函数或构造函数，并将其保存为对象的属性来实现。

而使用DI容器库（如InversifyJS、Awilix等）可以更方便地管理依赖关系，通过容器注册依赖并在需要使用的地方自动解析依赖。

3. Javascript中的依赖注入有哪些优势？

依赖注入可以提供很多好处。首先，它可以解耦代码，使依赖关系变得灵活，方便替换依赖对象。其次，它可以提高代码的可测试性，因为可以轻松地使用模拟对象替代依赖。此外，依赖注入还能提高代码的可维护性，因为它使代码的功能更明确，易于理解和修改。最后，依赖注入还能促进代码的模块化和重用，通过将不同的依赖封装成可复用的模块，降低了代码的耦合度。

最后建议，企业在引入信息化系统初期，切记要合理有效地运用好工具，这样一来不仅可以让公司业务高效地运行，还能最大程度保证团队目标的达成。同时还能大幅缩短系统开发和部署的时间成本。特别是有特定需求功能需要定制化的企业，可以采用我们公司自研的企业级低代码平台：织信Informat。 织信平台基于数据模型优先的设计理念，提供大量标准化的组件，内置AI助手、组件设计器、自动化（图形化编程）、脚本、工作流引擎（BPMN2.0）、自定义API、表单设计器、权限、仪表盘等功能，能帮助企业构建高度复杂核心的数字化系统。如ERP、MES、CRM、PLM、SCM、WMS、项目管理、流程管理等多个应用场景，全面助力企业落地国产化/信息化/数字化转型战略目标。 版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们微信：Informat_5 处理，核实后本网站将在24小时内删除。