当前位置:首页 > JavaScript

js ioc实现

2026-02-01 00:36:37JavaScript

依赖注入(IoC)的实现方式

在JavaScript中实现控制反转(IoC)通常通过依赖注入(DI)模式完成。以下是几种常见的实现方法:

构造函数注入

通过构造函数传递依赖对象,这是最直接的依赖注入方式。

class Service {
  constructor(dependency) {
    this.dependency = dependency;
  }

  execute() {
    this.dependency.doSomething();
  }
}

const dependency = { doSomething: () => console.log('Dependency works') };
const service = new Service(dependency);
service.execute(); // 输出: Dependency works

属性注入

依赖通过属性设置而非构造函数注入。

class Service {
  setDependency(dependency) {
    this.dependency = dependency;
  }

  execute() {
    this.dependency.doSomething();
  }
}

const service = new Service();
service.setDependency({ doSomething: () => console.log('Property injection') });
service.execute(); // 输出: Property injection

使用IoC容器

更高级的实现方式是通过IoC容器管理依赖关系。

class Container {
  constructor() {
    this.services = {};
  }

  register(name, callback) {
    this.services[name] = callback;
  }

  resolve(name) {
    if (!this.services[name]) {
      throw new Error(`Service ${name} not found`);
    }
    return this.services[name](this);
  }
}

const container = new Container();
container.register('dependency', () => ({ doSomething: () => console.log('From container') }));
container.register('service', c => new (class {
  constructor() {
    this.dependency = c.resolve('dependency');
  }
  execute() {
    this.dependency.doSomething();
  }
})());

const service = container.resolve('service');
service.execute(); // 输出: From container

使用装饰器实现

在支持装饰器的环境中(如TypeScript),可以通过装饰器简化DI。

function Injectable(target: any) {
  // 标记类为可注入
}

function Inject(dependencyKey: string) {
  return function(target: any, key: string) {
    // 实现注入逻辑
  }
}

@Injectable
class Service {
  @Inject('dependency')
  private dependency: any;

  execute() {
    this.dependency.doSomething();
  }
}

基于接口的DI

通过抽象接口进一步解耦依赖关系。

js ioc实现

// 定义接口
class IDependency {
  doSomething() {}
}

// 实现
class ConcreteDependency extends IDependency {
  doSomething() {
    console.log('Interface-based DI');
  }
}

class Service {
  constructor(dependency) {
    if (!(dependency instanceof IDependency)) {
      throw new Error('Invalid dependency');
    }
    this.dependency = dependency;
  }
}

每种方法各有优劣,构造函数注入适合必需依赖,属性注入适合可选依赖,IoC容器适合复杂应用,装饰器提供更优雅的语法,接口方式增强类型安全。选择取决于项目需求和技术栈。

标签: jsioc
分享给朋友:

相关文章

js实现vue路由

js实现vue路由

Vue路由基础实现 使用Vue Router实现前端路由需要先安装并配置路由库。Vue Router是Vue.js官方的路由管理器。 安装Vue Router: npm install vue-r…

js 实现vue

js 实现vue

Vue.js 的基本实现 在 JavaScript 中实现 Vue.js 的核心功能,可以通过数据绑定、响应式系统和虚拟 DOM 来实现。以下是实现 Vue.js 核心功能的简化版本。 数据响应式系…

js实现延迟

js实现延迟

实现延迟的方法 在JavaScript中,实现延迟操作有多种方式,以下是几种常见的方法: 使用setTimeout函数 setTimeout是JavaScript中最常用的延迟执行方法。它接受一个回…

js实现百叶窗

js实现百叶窗

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

js实现目录

js实现目录

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

js实现vue路由

js实现vue路由

Vue 路由的基本实现 在 Vue.js 中实现路由功能通常使用 Vue Router 库。Vue Router 是 Vue.js 官方的路由管理器,用于构建单页面应用(SPA)。 安装 Vue R…