控制反转（ioc）是一种设计思想，核心是将对象创建和依赖关系管理权交由外部容器接管，从而实现解耦；其关键实现方式是依赖注入（di），支持构造器、setter等多种注入形式，并通过beanfactory与applicationcontext等容器分层管理bean生命周期。
控制反转（IoC）本身不提供 Mock 能力，但它是实现零成本环境切换的关键结构基础——关键不在“反转”，而在“依赖由外部注入”这一事实。
为什么直接在 fetch 封装里写 if (process.env.NODE_ENV === 'mock') 不行
这种硬编码判断会让所有业务组件隐式依赖环境变量，导致：测试时无法单独控制某模块走 mock；CI 环境因环境变量污染导致行为不一致；Mock 数据逻辑和真实请求逻辑耦合在同一个函数里，改一处容易漏另一处。
真正需要的是：同一份业务代码，不改任何调用方式，仅通过替换一个注入的依赖，就切换数据来源。
-
fetchUser函数只依赖一个apiClient接口，不关心它内部是调fetch还是返回Promise.resolve(mockData) - 环境配置只发生在根组件或入口文件，比如
createApiClient()根据环境返回不同实例 - 单元测试中可直接传入
mockApiClient，无需启动 dev-server 或改环境变量
用工厂函数 + 依赖注入实现可切换的 API 客户端
不要把 mock 逻辑塞进请求函数，而是让整个客户端成为可替换的“策略”。典型结构：
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
const createApiClient = () => {
if (import.meta.env.VITE_USE_MOCK === 'true') {
return {
getUser: () => Promise.resolve({ id: 1, name: 'mock-user' }),
postOrder: () => Promise.resolve({ status: 'success' })
};
}
return {
getUser: () => fetch('/api/user').then(r => r.json()),
postOrder: (data) => fetch('/api/order', { method: 'POST', body: JSON.stringify(data) }).then(r => r.json())
};
};
业务组件使用时只接收这个对象，不感知来源：
function UserProfile({ apiClient }) {
const [user, setUser] = useState(null);
useEffect(() => {
apiClient.getUser().then(setUser); // 同一份代码，换 client 就换行为
}, []);
// ...
}
- 开发时运行
VITE_USE_MOCK=true vite，生产构建自动忽略该分支（Vite 会在编译期移除死代码） - 避免用
process.env，Vite 推荐用import.meta.env，且必须以VITE_开头才能暴露给客户端 - 工厂函数返回的对象接口必须严格一致，否则 TypeScript 会报错，这是类型安全的保障点
如何让已有 React 组件零改动接入 IoC 式 Mock
不重写组件，只调整依赖注入方式。常见两种路径：
- 用
React.createContext提供apiClient，根组件用ApiProvider value={createApiClient()}>包裹 —— 所有子组件用useContext(ApiContext)拿 client，切换只需改 Provider 的 value - 对函数组件，用高阶组件包装：
withApiClient(UserProfile)(createApiClient())，内部自动把 client 注入 props - 绝对不要在组件内部调用
createApiClient()，否则每次渲染都新建实例，mock 数据无法复用或控制
如果组件原本直接调用 fetchUser() 这类顶层函数，先把它封装成依赖 client 的版本：const fetchUser = (client) => client.getUser()，再逐步替换调用点 —— 这是重构中最容易卡住的环节，但只需改一次，后续所有环境切换都省事。
真正的成本不在“怎么写 mock”，而在于是否把数据获取逻辑从组件中解耦出来。一旦 client 成为显式依赖，Mock、缓存、错误重试、AB 测试等能力就能独立演进，互不干扰。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
