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

AngularJS的依赖注入是其核心特性之一，对于前端开发来说是一种新颖且强大的设计模式。依赖注入的目的是降低模块之间的耦合度，避免硬编码，使代码更加模块化和可维护。本文将介绍AngularJS中的两种主要依赖注入实现方式：推断式注入声明和行内注入声明。 1. 推断式注入声明 这种方式利用函数对象的`toString()`方法来解析参数列表。当创建一个带有依赖的函数时，AngularJS会自动检测并注入所需的依赖。例如： ```javascript function($http, $timeout) { // ... } ``` `invoke()`方法用于执行这个函数，并自动注入已注册的依赖。 2. 行内注入声明 行内注入更为直观，允许开发者在控制器、服务等定义时直接提供依赖。通过一个包含依赖名称和函数的数组传递给定义器： ```javascript module.controller('name', ['$http', '$timeout', function($http, $timeout) { // ... }]); ``` 这里的`['$http', '$timeout']`就是依赖数组，AngularJS会根据这个数组查找并注入相应的服务或值。 为了模拟AngularJS的依赖注入，我们需要构建一个基础框架。框架包括三个关键部分： - 存储空间（dependencies）：一个对象，用于存储键值对，键是依赖名称，值是依赖的实现。 - 注册方法（register）：接受键和值作为参数，将它们添加到存储空间中，并返回当前对象以支持链式调用。 - 核心实现方法（resolve）：接收参数，根据参数在存储空间中找到对应的依赖，并返回。 以下是一个简单的模拟实现： ```javascript var Injector = { dependencies: {}, register: function(key, value) { this.dependencies[key] = value; return this; // 链式调用 }, resolve: function(args) { var dependencies = {}; angular.forEach(args, function(arg, index) { if (typeof arg === 'string') { // 如果是依赖名称 dependencies[arg] = this.dependencies[arg]; // 从存储空间中获取依赖 } else if (arg instanceof Function) { // 如果是函数对象 dependencies = arg; // 直接使用函数本身（假设它实现了依赖注入） } }, this); return dependencies; } }; // 使用示例 Injector.register('$http', ...); // 注册依赖 var resolvedDependencies = Injector.resolve(['$http', 'anotherDependency']); // 获取并注入依赖 ``` 通过这个模拟实现，我们可以理解AngularJS依赖注入的原理：它根据函数定义中的参数名称或者传递的依赖数组，动态地查找并注入相应的依赖。这样的设计使得代码更加灵活，易于测试和扩展。