JavaScript系列（43）--依赖注入系统实现详解

JavaScript依赖注入系统实现详解 💉

今天，让我们深入探讨JavaScript的依赖注入系统实现。依赖注入是一种设计模式，它通过将依赖关系的创建和管理从代码中分离出来，提高了代码的可维护性和可测试性。

依赖注入基础概念 🌟

💡 小知识：依赖注入是控制反转（IoC）的一种实现方式，它将对象的创建和依赖关系的处理交给外部容器来管理，而不是在对象内部直接创建依赖对象。

基本实现 📊

javascript">// 1. 基础依赖注入容器
class Container {constructor() {this.services = new Map();this.singletons = new Map();}// 注册服务register(name, definition, dependencies = []) {this.services.set(name, { definition, dependencies });}// 注册单例服务singleton(name, definition, dependencies = []) {this.register(name, definition, dependencies);this.singletons.set(name, null);}// 解析服务resolve(name) {const service = this.services.get(name);if (!service) {throw new Error(`Service ${name} not found`);}// 检查是否是单例且已存在实例if (this.singletons.has(name)) {const singletonInstance = this.singletons.get(name);if (singletonInstance) {return singletonInstance;}}// 解析依赖const dependencies = service.dependencies.map(dep => this.resolve(dep));// 创建实例const instance = typeof service.definition === 'function'? new service.definition(...dependencies): service.definition;// 如果是单例，保存实例if (this.singletons.has(name)) {this.singletons.set(name, instance);}return instance;}
}// 2. 装饰器支持
function Injectable() {return function(target) {// 保存原始构造函数target.injectable = true;return target;};
}function Inject(name) {return function(target, propertyKey) {// 在原型上定义属性const metadata = Reflect.getMetadata('inject', target) || {};metadata[propertyKey] = name;Reflect.defineMetadata('inject', metadata, target);};
}// 3. 依赖解析器
class DependencyResolver {constructor(container) {this.container = container;}// 解析类的依赖resolveClass(target) {const metadata = Reflect.getMetadata('inject', target.prototype);const dependencies = {};if (metadata) {for (const [key, name] of Object.entries(metadata)) {dependencies[key] = this.container.resolve(name);}}return dependencies;}// 创建实例并注入依赖createInstance(target) {const dependencies = this.resolveClass(target);const instance = new target();Object.assign(instance, dependencies);return instance;}
}

高级功能实现 🚀

javascript">// 1. 生命周期管理
class LifecycleManager {constructor() {this.hooks = new Map();}// 注册生命周期钩子registerHook(service, hook) {if (!this.hooks.has(service)) {this.hooks.set(service, []);}this.hooks.get(service).push(hook);}// 执行初始化钩子async initialize(service) {const hooks = this.hooks.get(service) || [];for (const hook of hooks) {if (hook.onInit) {await hook.onInit();}}}// 执行销毁钩子async destroy(service) {const hooks = this.hooks.get(service) || [];for (const hook of hooks) {if (hook.onDestroy) {await hook.onDestroy();}}}
}// 2. 作用域管理
class ScopeManager {constructor() {this.scopes = new Map();this.currentScope = null;}// 创建新作用域createScope(name) {const scope = new Container();this.scopes.set(name, scope);return scope;}// 进入作用域enterScope(name) {const scope = this.scopes.get(name);if (!scope) {throw new Error(`Scope ${name} not found`);}this.currentScope = scope;return scope;}// 退出作用域exitScope() {this.currentScope = null;}// 在当前作用域中解析服务resolve(name) {if (!this.currentScope) {throw new Error('No active scope');}return this.currentScope.resolve(name);}
}// 3. 异步依赖处理
class AsyncContainer extends Container {constructor() {super();this.asyncServices = new Map();}// 注册异步服务async registerAsync(name, factory) {this.asyncServices.set(name, factory);}// 异步解析服务async resolveAsync(name) {// 检查是否是异步服务if (this.asyncServices.has(name)) {const factory = this.asyncServices.get(name);return await factory();}// 否则使用同步解析return this.resolve(name);}// 批量解析异步服务async resolveAll(names) {return Promise.all(names.map(name => this.resolveAsync(name)));}
}

实际应用场景 💼

javascript">// 1. 服务定义和注入
@Injectable()
class UserService {constructor(database) {this.database = database;}async getUsers() {return this.database.query('SELECT * FROM users');}
}@Injectable()
class AuthService {@Inject('userService')userService;async authenticate(username, password) {const user = await this.userService.findByUsername(username);return user && user.password === password;}
}// 2. API服务注入
@Injectable()
class ApiService {constructor(config) {this.baseUrl = config.apiUrl;}async request(method, path, data) {const response = await fetch(`${this.baseUrl}${path}`, {method,headers: {'Content-Type': 'application/json'},body: data ? JSON.stringify(data) : undefined});return response.json();}
}// 3. 业务逻辑注入
@Injectable()
class OrderService {constructor(@Inject('userService') userService,@Inject('paymentService') paymentService,@Inject('notificationService') notificationService) {this.userService = userService;this.paymentService = paymentService;this.notificationService = notificationService;}async createOrder(userId, items) {const user = await this.userService.getUser(userId);const payment = await this.paymentService.processPayment(user, items);if (payment.success) {await this.notificationService.sendOrderConfirmation(user, items);return { success: true, orderId: payment.orderId };}return { success: false, error: payment.error };}
}

性能优化技巧 ⚡

javascript">// 1. 依赖缓存
class CachedContainer extends Container {constructor() {super();this.cache = new Map();}resolve(name) {if (this.cache.has(name)) {return this.cache.get(name);}const instance = super.resolve(name);this.cache.set(name, instance);return instance;}clearCache() {this.cache.clear();}invalidate(name) {this.cache.delete(name);}
}// 2. 延迟加载
class LazyContainer extends Container {constructor() {super();this.factories = new Map();}registerLazy(name, factory) {this.factories.set(name, factory);}resolve(name) {if (this.factories.has(name)) {const factory = this.factories.get(name);const instance = factory();this.register(name, instance);this.factories.delete(name);return instance;}return super.resolve(name);}
}// 3. 批量注册优化
class BatchContainer extends Container {constructor() {super();this.batchQueue = [];}startBatch() {this.batchQueue = [];}register(name, definition, dependencies = []) {this.batchQueue.push({ name, definition, dependencies });}commitBatch() {for (const registration of this.batchQueue) {super.register(registration.name,registration.definition,registration.dependencies);}this.batchQueue = [];}
}

最佳实践建议 💡

依赖注入模式

javascript">// 1. 构造函数注入
class UserController {constructor(userService, authService) {this.userService = userService;this.authService = authService;}
}// 2. 属性注入
class OrderController {@Inject('orderService')orderService;@Inject('userService')userService;
}// 3. 方法注入
class ProductController {@Inject('productService')setProductService(service) {this.productService = service;}
}