当前位置:首页 > JavaScript

js ioc实现

2026-03-13 22:44:25JavaScript

实现 JavaScript 的 IOC(控制反转)

在 JavaScript 中实现 IOC(控制反转)通常依赖依赖注入(DI)模式,通过将依赖关系的创建和管理从组件内部转移到外部容器。以下是几种常见实现方式:

手动依赖注入

通过构造函数或属性显式注入依赖项,避免在组件内部直接实例化依赖对象。

js ioc实现

class Logger {
  log(message) {
    console.log(message);
  }
}

class UserService {
  constructor(logger) {
    this.logger = logger;
  }

  getUser(id) {
    this.logger.log(`Fetching user ${id}`);
    return { id, name: 'John Doe' };
  }
}

const logger = new Logger();
const userService = new UserService(logger);
userService.getUser(1);

使用 IOC 容器

通过第三方库(如 inversifyawilix)管理依赖关系,自动解析和注入依赖。

js ioc实现

使用 inversify 示例

import { Container, injectable, inject } from 'inversify';

@injectable()
class Logger {
  log(message) {
    console.log(message);
  }
}

@injectable()
class UserService {
  constructor(@inject('Logger') private logger) {}

  getUser(id) {
    this.logger.log(`Fetching user ${id}`);
    return { id, name: 'John Doe' };
  }
}

const container = new Container();
container.bind('Logger').to(Logger);
container.bind('UserService').to(UserService);

const userService = container.get('UserService');
userService.getUser(1);

基于装饰器的自动注入

通过装饰器(如 tsyringe)简化依赖注入的声明和解析。

import { container, injectable, inject } from 'tsyringe';

@injectable()
class Logger {
  log(message) {
    console.log(message);
  }
}

@injectable()
class UserService {
  constructor(@inject(Logger) private logger) {}

  getUser(id) {
    this.logger.log(`Fetching user ${id}`);
    return { id, name: 'John Doe' };
  }
}

const userService = container.resolve(UserService);
userService.getUser(1);

工厂模式实现

通过工厂函数动态创建依赖对象,实现控制反转。

class Logger {
  log(message) {
    console.log(message);
  }
}

function createUserService(logger) {
  return {
    getUser(id) {
      logger.log(`Fetching user ${id}`);
      return { id, name: 'John Doe' };
    }
  };
}

const logger = new Logger();
const userService = createUserService(logger);
userService.getUser(1);

选择建议

  • 简单场景:手动注入或工厂模式足够轻量。
  • 复杂项目:使用 inversifytsyringe 等库,支持生命周期管理和模块化配置。
  • TypeScript 项目:优先选择基于装饰器的方案(如 tsyringe),类型提示更完善。

标签: jsioc
分享给朋友:

相关文章

js实现乘

js实现乘

JavaScript 实现乘法运算 在 JavaScript 中实现乘法运算可以通过多种方式完成,包括基本运算符、函数封装以及高级算法(如大数乘法)。以下是几种常见方法: 使用基本乘法运算符 Jav…

js轮播图实现原理

js轮播图实现原理

轮播图的基本原理 轮播图通过动态切换显示的内容(图片、文本等)实现视觉上的滑动效果。核心原理是利用CSS和JavaScript控制元素的显示与隐藏,或通过变换位置实现滑动动画。 实现方法一:CSS…

js实现百叶窗

js实现百叶窗

使用CSS和JavaScript实现百叶窗效果 通过CSS动画和JavaScript事件监听可以实现百叶窗效果。核心思路是将内容区域分割为多个条状元素,通过控制它们的展开/折叠状态来模拟百叶窗。 &…

js实现祖玛

js实现祖玛

实现祖玛游戏的核心思路 祖玛游戏的核心玩法是发射彩色珠子,形成三个或以上相同颜色的珠子即可消除。以下是使用JavaScript实现的基本框架。 游戏初始化 创建画布并初始化游戏状态: const…

js手势实现

js手势实现

手势识别实现方法 在JavaScript中实现手势识别通常涉及监听触摸事件(touchstart、touchmove、touchend)或鼠标事件(mousedown、mousemove、mouseu…

js实现目录

js实现目录

实现目录的基本思路 在JavaScript中实现目录功能通常涉及以下几个核心步骤:解析文档中的标题元素(如h1-h6),动态生成目录结构,并添加交互逻辑(如点击跳转)。以下是具体实现方法: 解析标题…