0

0

JavaScript依赖注入_IoC容器与装饰器实现

夢幻星辰

夢幻星辰

发布时间:2025-11-27 18:39:07

|

553人浏览过

|

来源于php中文网

原创

依赖注入与控制反转通过将对象创建交由外部容器管理,降低代码耦合。在typescript中,利用装饰器和reflect-metadata可实现ioc容器,通过@injectable标记可注入类,结合map存储依赖映射,递归解析构造函数参数类型完成自动注入,支持复杂应用的解耦与维护。

javascript依赖注入_ioc容器与装饰器实现

依赖注入(Dependency Injection, DI)和控制反转(Inversion of Control, IoC)是现代前端开发中提升代码可维护性与解耦的关键设计模式。在JavaScript尤其是TypeScript生态中,借助装饰器(Decorator)语法可以优雅地实现IoC容器,让对象的创建和依赖管理自动化。

什么是IoC容器与依赖注入

控制反转是指将对象的创建和生命周期管理从代码内部转移到外部容器。原本由类自己实例化依赖,现在由外部“注入”进来,从而降低耦合度。

依赖注入是实现IoC的一种方式,常见形式有构造函数注入、属性注入和方法注入。在JavaScript中,我们可以通过一个IoC容器来管理所有服务的注册与解析。

举个简单例子:如果一个UserService需要UserRepository,传统做法是在UserService内部new UserRepository(),但这样就绑死了实现。使用DI后,UserRepository由容器传入,UserService无需关心如何创建它。

立即学习Java免费学习笔记(深入)”;

使用装饰器声明可注入服务

TypeScript支持装饰器语法(需开启experimentalDecoratorsemitDecoratorMetadata),我们可以用@Injectable装饰器标记哪些类可以被IoC容器管理。

示例:

function Injectable(): ClassDecorator {
  return target => {
    // 标记该类可被注入,可附加元数据
  };
}

@Injectable()
class UserRepository {
  findAll() {
    return ['user1', 'user2'];
  }
}

@Injectable()
class UserService {
  constructor(private repo: UserRepository) {}

  listUsers() {
    return this.repo.findAll();
  }
}

通过装饰器,我们为类添加了元信息,IoC容器可以根据这些信息自动解析依赖关系。

实现简易IoC容器

一个基本的IoC容器需要具备注册(register)和获取(resolve)功能。它维护一个依赖映射表,并能递归解析构造函数参数。

人声去除
人声去除

用强大的AI算法将声音从音乐中分离出来

下载

核心思路:

  • 使用Map保存token到类的映射
  • 利用reflect-metadata读取构造函数参数类型
  • 递归创建实例并注入依赖

实现代码:

import 'reflect-metadata';

const DESIGN_PARAM_TYPES = 'design:paramtypes';
const container = new Map();

function register(token: any, useClass: any) {
  container.set(token, useClass);
}

function resolve<T>(token: any): T {
  const clazz = container.get(token);
  if (!clazz) throw new Error(`No provider for ${token.name}`);

  const paramTypes = Reflect.getMetadata(DESIGN_PARAM_TYPES, clazz) || [];
  const dependencies = paramTypes.map((dep: any) => resolve(dep));

  return new clazz(...dependencies);
}

注册服务:

register(UserRepository, UserRepository);
register(UserService, UserService);

const userService = resolve<UserService>(UserService);
console.log(userService.listUsers()); // ['user1', 'user2']

结合装饰器自动注入构造参数

上述resolve方法依赖reflect-metadata获取构造函数参数类型。只要开启了emitDecoratorMetadata,TypeScript会在编译时自动写入参数类型元数据,IoC容器就能“知道”某个类需要哪些依赖。

注意:基础类型(如string、number)不会被保留,只有引用类型(class)会被记录。因此依赖项必须是类或明确的token。

为了更清晰地控制注入,也可以使用@Inject装饰器指定token:

function Inject(token: any): ParameterDecorator {
  return (target, propertyKey, parameterIndex) => {
    const existingInjectedTokens =
      Reflect.getOwnMetadata('injectedParams', target) || [];
    existingInjectedTokens[parameterIndex] = token;
    Reflect.defineMetadata('injectedParams', existingInjectedTokens, target);
  };
}

这样即使类型信息缺失,也能手动指定注入内容。

基本上就这些。通过装饰器 + reflect-metadata + 容器管理,JavaScript也能实现类似Angular的依赖注入机制。虽然原生JS不内置DI,但在复杂应用或框架开发中,这样的模式非常实用。

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
TypeScript工程化开发与Vite构建优化实践
TypeScript工程化开发与Vite构建优化实践

本专题面向前端开发者,深入讲解 TypeScript 类型系统与大型项目结构设计方法,并结合 Vite 构建工具优化前端工程化流程。内容包括模块化设计、类型声明管理、代码分割、热更新原理以及构建性能调优。通过完整项目示例,帮助开发者提升代码可维护性与开发效率。

44

2026.02.13

TypeScript全栈项目架构与接口规范设计
TypeScript全栈项目架构与接口规范设计

本专题面向全栈开发者,系统讲解基于 TypeScript 构建前后端统一技术栈的工程化实践。内容涵盖项目分层设计、接口协议规范、类型共享机制、错误码体系设计、接口自动化生成与文档维护方案。通过完整项目示例,帮助开发者构建结构清晰、类型安全、易维护的现代全栈应用架构。

185

2026.02.25

string转int
string转int

在编程中,我们经常会遇到需要将字符串(str)转换为整数(int)的情况。这可能是因为我们需要对字符串进行数值计算,或者需要将用户输入的字符串转换为整数进行处理。php中文网给大家带来了相关的教程以及文章,欢迎大家前来学习阅读。

970

2023.08.02

登录token无效
登录token无效

登录token无效解决方法:1、检查token的有效期限,如果token已经过期,需要重新获取一个新的token;2、检查token的签名,如果签名不正确,需要重新获取一个新的token;3、检查密钥的正确性,如果密钥不正确,需要重新获取一个新的token;4、使用HTTPS协议传输token,建议使用HTTPS协议进行传输 ;5、使用双因素认证,双因素认证可以提高账户的安全性。

6559

2023.09.14

登录token无效怎么办
登录token无效怎么办

登录token无效的解决办法有检查Token是否过期、检查Token是否正确、检查Token是否被篡改、检查Token是否与用户匹配、清除缓存或Cookie、检查网络连接和服务器状态、重新登录或请求新的Token、联系技术支持或开发人员等。本专题为大家提供token相关的文章、下载、课程内容,供大家免费下载体验。

840

2023.09.14

token怎么获取
token怎么获取

获取token值的方法:1、小程序调用“wx.login()”获取 临时登录凭证code,并回传到开发者服务器;2、开发者服务器以code换取,用户唯一标识openid和会话密钥“session_key”。想了解更详细的内容,可以阅读本专题下面的文章。

1089

2023.12.21

token什么意思
token什么意思

token是一种用于表示用户权限、记录交易信息、支付虚拟货币的数字货币。可以用来在特定的网络上进行交易,用来购买或出售特定的虚拟货币,也可以用来支付特定的服务费用。想了解更多token什么意思的相关内容可以访问本专题下面的文章。

1898

2024.03.01

class在c语言中的意思
class在c语言中的意思

在C语言中,"class" 是一个关键字,用于定义一个类。想了解更多class的相关内容,可以阅读本专题下面的文章。

809

2024.01.03

JavaScript浏览器渲染机制与前端性能优化实践
JavaScript浏览器渲染机制与前端性能优化实践

本专题围绕 JavaScript 在浏览器中的执行与渲染机制展开,系统讲解 DOM 构建、CSSOM 解析、重排与重绘原理,以及关键渲染路径优化方法。内容涵盖事件循环机制、异步任务调度、资源加载优化、代码拆分与懒加载等性能优化策略。通过真实前端项目案例,帮助开发者理解浏览器底层工作原理,并掌握提升网页加载速度与交互体验的实用技巧。

23

2026.03.06

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
MySQL 初学入门(mosh老师)
MySQL 初学入门(mosh老师)

共3课时 | 0.3万人学习

微信小程序开发之API篇
微信小程序开发之API篇

共15课时 | 1.3万人学习

PHP自制框架
PHP自制框架

共8课时 | 0.6万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号