js 可以调用react吗_Vesselize - 一个可以与 Vue.js 及 React 无缝集成的 IoC 容器

笔者目前是一个 Vue.js 和 React 都在用的前端打工人，像 Vue Composition API 和 React Hooks 这些技术真的是拯救人生啊，感觉前端的开发体验越来越像丝绸般顺滑。

另一方面呢，由于目前的项目里面有着非常复杂的数据处理逻辑，所以我们封装了很多可复用的 Service 类。但是有一点不太方便的是，必须在业务组件或者 Service 里面手动创建它们所依赖的 Service 实例。受 Angular、Nest 以及 Spring 这些框架的启发，开始尝试在 Vue.js 和 React 应用中通过依赖注入的方式解决这个问题。

Vesselize （文档：https://vesselize.js.org）就是笔者最近业余时间写的一个 JavaScript IoC 容器，目前已经在项目中正式使用。可以直接在 Vue.js 或 React 应用中，直接通过类似 useInstance('ServiceName') 的 API 来解决对服务实例的依赖。这次造轮子的过程中学到了不少新知识，分享出来希望对大家有所帮助。

下面的内容是它的基本概念级入门指南。

Vesselize 核心概念

Providers

Provider 通常是可以被实例化的 JavaScript 构造器函数，此外也可以是任意的工厂方法及已经声明好的值。它们会被注册到容器里面，用于依赖注入及查找。

Container

Container 的职责是用于初始化实例并解决他们的依赖关系。

Context

默认情况下，容器创建的实例都是单例的。通过指定一个 Context 对象，我们可以创建一个跟该上下文绑定的实例。

Vue.js 应用集成 Vesselize 入门指南

下面我们通过代码的形式展示如何在 Vue.js 应用中集成 Vesselize。

安装

yarn add @vesselize/vue
# OR
npm i @vesselize/vue

创建 Providers

假设应用中需要以下三个服务：

• UserAPI 用于请求接口数据
• UserService 调用 UserAPI 获取数据并进行业务逻辑的处理
• AuthService 用于判断用户的角色，比如是否为管理员

// file: api/UserAPI.js
class UserAPI {
    
    async fetchUser(id) {
    
        return fetch(`/path/to/user/${
    id}&#