模拟AngularJS依赖注入：原理与实现详解

AngularJS是一种流行的JavaScript框架，其核心特性之一是依赖注入(DI)，它是一种设计模式，用于在应用程序中管理模块间的交互和组件之间的依赖关系，使得代码更加模块化、松耦合。依赖注入的主要目标是减少硬编码和解耦，提高代码的可维护性和测试性。 在AngularJS中，有两种常见的依赖注入实现方式： 1. 推断式注入声明 (Inferred Injection Declaration) - 这种方式利用JavaScript的动态特性，当创建一个带有函数表达式的控制器或服务时，AngularJS会自动检测函数的参数，并根据参数名推断依赖。例如： ```javascript injector.invoke(function($http, $timeout) { ... }); ``` - AngularJS内部通过调用`toString()`方法解析函数参数，识别出可能的依赖项，并通过`$injector`将它们注入到函数的上下文中。 2. 行内注入声明 (Inline Injection Declaration) - 这种方式更为显式，函数定义时直接提供一个参数数组，包含依赖名和函数本身。在控制器中常见： ```javascript module.controller('name', ['$http', '$timeout', function($http, $timeout) { ... }]); ``` - 这种方法提供了更明确的依赖关系声明，便于理解和维护。 为了模拟AngularJS的依赖注入，我们可以构建一个简单的DI框架，包括以下几个关键部分： - 存储空间（dependencies）：这里是一个对象，用于存储键值对，键是依赖的名称，值是对应的依赖实例。 - 注册方法（register）：接受一个键和一个依赖实例，将它们添加到存储空间中，以便后续使用。 - 核心实现方法（resolve）：接收一组参数，根据这些参数在存储空间中查找相应的依赖映射，然后返回依赖实例。 以下是一个简化版的模拟实现： ```javascript var SimpleInjector = { dependencies: {}, register: function(key, dependency) { this.dependencies[key] = dependency; }, resolve: function(params) { let resolvedDependencies = {}; for (let i = 0; i < params.length; i += 2) { resolvedDependencies[params[i]] = this.dependencies[params[i + 1]]; } return resolvedDependencies; } }; // 使用示例 SimpleInjector.register('$http', { /* 实例化$http对象 */ }); SimpleInjector.register('$timeout', { /* 实例化$timeout对象 */ }); let resolvedCtrl = SimpleInjector.resolve(['$http', '$timeout', function($http, $timeout) { // 在这里，$http和$timeout已注入到函数中 // ... }]); ``` 这个模拟框架展示了AngularJS依赖注入的核心逻辑，虽然它并不完全等同于AngularJS的`$injector`，但它可以帮助我们理解实际依赖注入工作原理。通过这样的模拟，开发者可以更好地掌握DI的思想，并在没有AngularJS的情况下应用类似的技术。