Vesselize - 一个可以与 Vue.js 及 React 无缝集成的 JavaScript 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 来解决对服务实例的依赖。这次造轮子的过程中学到了不少新知识，分享出来希望对大家有所帮助。

下面是一段在 Vue.js 中使用 Vesselize 的示例代码：

import { ref, watchEffect } from 'vue';
import { useInstance } from '@vesselize/vue';

export default {
  setup() {
    const user = ref({});
    const userService = useInstance('UserService');

    watchEffect(() => {
      userService.getUser().then((data) => {
        user.value = data;
      });
    });

    return {
      user
    };
  },
};

项目信息

Github 代码仓库: https://github.com/vesselize

文档及使用指南: https://vesselize.js.org

项目示例:

• vesselize-vue-starter
• vesselize-react-starter