当前位置：首页 > news >正文

前端依赖注入：解耦组件依赖

news 2026/5/22 8:11:17

前端依赖注入：解耦组件依赖

前言

各位前端小伙伴，不知道你们有没有遇到过这种情况：组件之间依赖关系复杂，难以测试和维护！

我曾经开发过一个大型前端项目，组件之间直接依赖，修改一个组件会影响多个其他组件。后来我引入了依赖注入，代码变得清晰易维护！

依赖注入核心概念

什么是依赖注入？

依赖注入是一种设计模式，它允许对象接收它所依赖的对象，而不是自己创建它们。

依赖注入的优势

解耦组件：组件之间不需要直接依赖具体实现
易于测试：可以轻松替换依赖进行测试
提高复用性：依赖可以被多个组件共享
易于维护：修改依赖不会影响使用它的组件

依赖注入结构

┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐ │ Container │ │ Provider │ │ Consumer │ │ (容器) │ │ (提供者) │ │ (消费者) │ └────────┬────────┘ └────────┬────────┘ └────────┬────────┘ │ │ │ │ 1. 注册依赖 │ │ │───────────────────────>│ │ │ │ │ │ │ 2. 获取依赖 │ │ │<───────────────────────│ │ │ │ │ │ │ │ 3. 使用依赖 │ │ │────────────────────────>│

依赖注入实现

基础实现

class Container { constructor() { this.dependencies = {} this.singletons = {} } register(key, factory, isSingleton = true) { this.dependencies[key] = { factory, isSingleton } } resolve(key) { const { factory, isSingleton } = this.dependencies[key] if (!factory) { throw new Error(`Dependency ${key} not found`) } if (isSingleton) { if (!this.singletons[key]) { this.singletons[key] = factory(this) } return this.singletons[key] } return factory(this) } inject(target) { const injectables = target.inject || [] const dependencies = injectables.map(key => this.resolve(key)) return new target(...dependencies) } } // 使用 const container = new Container() container.register('api', () => new ApiService()) container.register('logger', () => new Logger()) class UserService { static inject = ['api', 'logger'] constructor(api, logger) { this.api = api this.logger = logger } } const userService = container.inject(UserService)

装饰器实现

const container = new Container() function inject(key) { return function(target, propertyKey) { Object.defineProperty(target, propertyKey, { get() { return container.resolve(key) }, configurable: true }) } } class UserService { @inject('api') api @inject('logger') logger getUser(id) { this.logger.log('Getting user:', id) return this.api.get(`/users/${id}`) } }

依赖注入在前端框架中的应用

React中的依赖注入

import { createContext, useContext, useMemo } from 'react' const ContainerContext = createContext(null) export function ContainerProvider({ children, container }) { return ( <ContainerContext.Provider value={container}> {children} </ContainerContext.Provider> ) } export function useInject(key) { const container = useContext(ContainerContext) return useMemo(() => container.resolve(key), [container, key]) } // 使用 const container = new Container() container.register('api', () => new ApiService()) function App() { return ( <ContainerProvider container={container}> <UserProfile /> </ContainerProvider> ) } function UserProfile() { const api = useInject('api') useEffect(() => { api.getUser(1).then(setUser) }, [api]) return <div>User Profile</div> }

Vue中的依赖注入

import { provide, inject, createApp } from 'vue' const container = new Container() container.register('api', () => new ApiService()) const app = createApp(App) app.provide('container', container) // 自定义hook function useInject(key) { const container = inject('container') return container.resolve(key) } // 使用 function UserProfile() { const api = useInject('api') onMounted(() => { api.getUser(1).then(setUser) }) return <div>User Profile</div> }

依赖注入高级功能

1. 依赖作用域

class Container { constructor(parent = null) { this.dependencies = {} this.singletons = {} this.parent = parent } createChild() { return new Container(this) } resolve(key) { if (this.dependencies[key]) { const { factory, isSingleton } = this.dependencies[key] if (isSingleton && !this.singletons[key]) { this.singletons[key] = factory(this) } return isSingleton ? this.singletons[key] : factory(this) } if (this.parent) { return this.parent.resolve(key) } throw new Error(`Dependency ${key} not found`) } }

2. 依赖工厂

class Container { constructor() { this.factories = {} } register(key, factory) { this.factories[key] = factory } registerInstance(key, instance) { this.factories[key] = () => instance } registerFactory(key, FactoryClass) { this.factories[key] = (container) => new FactoryClass(container) } resolve(key) { const factory = this.factories[key] if (!factory) { throw new Error(`Dependency ${key} not found`) } return factory(this) } }

3. 依赖生命周期

class Container { constructor() { this.dependencies = {} this.singletons = {} this.disposables = [] } register(key, factory, options = {}) { this.dependencies[key] = { factory, ...options } } resolve(key) { const { factory, singleton = true, onDispose } = this.dependencies[key] if (!factory) { throw new Error(`Dependency ${key} not found`) } if (singleton) { if (!this.singletons[key]) { this.singletons[key] = factory(this) if (onDispose) { this.disposables.push(() => onDispose(this.singletons[key])) } } return this.singletons[key] } const instance = factory(this) if (onDispose) { this.disposables.push(() => onDispose(instance)) } return instance } dispose() { this.disposables.forEach(dispose => dispose()) this.singletons = {} this.disposables = [] } }

依赖注入最佳实践

1. 定义依赖接口

interface ApiService { get(url: string): Promise<any> post(url: string, data: any): Promise<any> } class RealApiService implements ApiService { get(url: string) { return fetch(url).then(res => res.json()) } post(url: string, data: any) { return fetch(url, { method: 'POST', body: JSON.stringify(data) }).then(res => res.json()) } } class MockApiService implements ApiService { get(url: string) { return Promise.resolve({ mock: true }) } post(url: string, data: any) { return Promise.resolve({ success: true }) } }

2. 配置环境依赖

const container = new Container() if (process.env.NODE_ENV === 'production') { container.register('api', () => new RealApiService()) } else { container.register('api', () => new MockApiService()) }

3. 单元测试

import { Container } from './container' import { UserService } from './userService' describe('UserService', () => { let container let mockApi beforeEach(() => { container = new Container() mockApi = { get: jest.fn().mockResolvedValue({ id: 1, name: 'John' }) } container.register('api', () => mockApi) }) it('should get user', async () => { const userService = container.inject(UserService) const user = await userService.getUser(1) expect(mockApi.get).toHaveBeenCalledWith('/users/1') expect(user).toEqual({ id: 1, name: 'John' }) }) })