Vesselize - 一个可以与 Vue.js 及 React 无缝集成的 JavaScript IoC 容器

[felixpy]

楼主目前是一个 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

[Hanggi]

直接用 Angular 就好了。

[felixpy]

@Hanggi 要考虑项目场景和团队情况哈哈

[yzqtdu]

看示例代码，和 nestjs 不同的是感觉楼主用依赖查找实现了控制反转

[EPr2hh6LADQWqRVH]

这个轮子造得没有必要，

依赖注入是要结合类写法才合适，像 ts 那样依赖注入到构造函数，

像你这样写还不如 angular.js 第一代的方式用参数名注入。

前端的最主要问题就是不会面向对象，一个连构造函数都没有的东西，强行 DI 太勉强了

[9ki]

不能通过装饰器注入意义不大，但是想实现装饰器注入就要用 TS，我现在的解决方案和楼主的差不多，都是挺别扭的，类型还不好处理，希望 JS 以后可以一个完整的解决方案吧

[yuankui]

container.get("name");

在 typescript 返回的是 any 类型, 如果要在 typescript, 需要手动进行类型确认, 用起来不是很有自信哦.

像 spring 中,可以通过 getBean(ClassName)类自动推动实例的类型,写起代码来就很自信了.

楼主这块有什么好的解法呢?

[cereschen]

对 ts 的支持是灾难