V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
felixpy
V2EX  ›  Vue.js

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

  •  
  •   felixpy ·
    codetrial · 2020-11-29 22:11:43 +08:00 · 2390 次点击
    这是一个创建于 1215 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

    项目示例:

    7 条回复    2020-12-16 20:43:17 +08:00
    Hanggi
        1
    Hanggi  
       2020-11-29 22:14:36 +08:00
    直接用 Angular 就好了。
    felixpy
        2
    felixpy  
    OP
       2020-11-29 22:17:29 +08:00
    @Hanggi 要考虑项目场景和团队情况哈哈
    yzqtdu
        3
    yzqtdu  
       2020-11-30 00:15:54 +08:00 via Android
    看示例代码,和 nestjs 不同的是感觉楼主用依赖查找实现了控制反转
    EPr2hh6LADQWqRVH
        4
    EPr2hh6LADQWqRVH  
       2020-11-30 00:27:26 +08:00
    这个轮子造得没有必要,

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

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

    前端的最主要问题就是不会面向对象,一个连构造函数都没有的东西,强行 DI 太勉强了
    9ki
        5
    9ki  
       2020-11-30 11:12:53 +08:00
    不能通过装饰器注入意义不大,但是想实现装饰器注入就要用 TS,我现在的解决方案和楼主的差不多,都是挺别扭的,类型还不好处理,希望 JS 以后可以一个完整的解决方案吧
    yuankui
        6
    yuankui  
       2020-11-30 15:29:46 +08:00
    container.get("name");

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

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

    楼主这块有什么好的解法呢?
    cereschen
        7
    cereschen  
       2020-12-16 20:43:17 +08:00
    对 ts 的支持是灾难
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   2941 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 15:08 · PVG 23:08 · LAX 08:08 · JFK 11:08
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.