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

Vesselize-一个可以与Vue.js和ReactLife无缝集成的JavaScriptIoC容器，感觉前端开发体验越来越顺滑如丝。另一方面，由于当前项目的数据处理逻辑非常复杂，我们封装了很多可复用的Service类。但有一点不方便的是，它们所依赖的Service实例必须在业务组件或Service中手动创建。受Angular、Nest和Spring等框架的启发，我们开始尝试在Vue.js和React应用中通过依赖注入来解决这个问题。Vesselize（文档：vesselize.js.org）是笔者最近在业余时间写的一个JavaScriptIoC容器，目前已经正式在项目中使用。可以通过useInstance('ServiceName')等API直接在Vue.js或React应用程序中解决对服务实例的依赖。这次在造轮子的过程中学到了很多新知识，希望分享出来对大家有所帮助。以下是其基本概念级入门指南。VesselizeProvidersProvider的核心概念通常是一个可以实例化的JavaScript构造函数，也可以是任意工厂方法和声明值。它们在容器中注册以进行依赖注入和查找。ContainerContainer的职责是初始化实例并解决它们的依赖关系。上下文默认情况下，容器创建的所有实例都是单例。通过指定一个上下文对象，我们可以创建一个绑定到该上下文的实例。Vue.js应用集成Vesselize入门指南下面我们将以代码的形式展示如何将Vesselize集成到Vue.js应用中。安装yarnadd@vesselize/vue#ORnpmi@vesselize/vue复制代码CreateProviders假设应用中需要以下三个服务：UserAPI用于请求接口数据UserService调用UserAPI获取数据并处理业务逻辑AuthService用于判断用户角色，比如是否是管理员//file:api/UserAPI.jsclassUserAPI{asyncfetchUser(id){returnfetch(`/path/to/user/${id}`).then(res=>res.json());}}//文件：services/UserService.jsclassUserService{userAPI=null;asyncgetUser(id){constuser=awaitthis.userAPI.fetchUser(id);//数据处理逻辑...returnuser;}//通过Vesselize容器注入userAPI实例setVesselize(vesselize){this.userAPI=vesselize.get('UserAPI');}}//文件：services/AuthService.jsclassAuthService{constructor(maxAdminUserId){this.maxAdminUserId=maxAdminUserId;}isAdmin(user){returnuser.id<=this.maxAdminUserId;}}复制代码创建一个VueVesselize插件下面的代码通过createVesselize方法创建一个Vue.js插件，也是一个容器实例。从'@vesselize/vue'导入{createVesselize}；从'./api/UserAPI'导入UserAPI；从'./services/UserService'导入UserService；从'./services/RoleAuthService'导入RoleAuthService；constvesselize=createVesselize({providers:[{token:'UserAPI',useClass:UserAPI},{token:'UserService',useClass:UserService},{token:'AuthService',useFactory(){constmaxAdminUserId=1;returnnewAuthService(maxAdminUserId);}}]});复制代码注册VueVesselize插件import{createApp}from'vue';importrouterfrom'./router';importstorefrom'./store';importvesselizefrom'./vesselize';importAppfrom'./App.vue';constapp=createApp(App).use(store).use(router).use(vesselize);app.mount('#app');复制代码获取组件中的服务实例通过CompositionAPIuseInstance，我们可以轻松获取组件中的组件实例。复制代码最后，如果你想直接在项目中尝试一下，看看这个示例项目：vesselize-vue-stArter.React应用集成Vesselize入门指南还是上面的例子，我们看看如何在React中安装yarnadd@vesselize/react#ORnpmi@vesselize/react复制代码CreateProviders同上还需要UserAPI,UserService,AuthService三个服务。合并Providers我们首先将所有Provider合并到一个数组中：importUserAPIfrom'./api/UserAPI';从“./services/UserService”导入用户服务；从“./services/RoleAuthService”导入RoleAuthService；constproviders=[{token:'UserAPI',useClass:UserAPI},{token:'UserService',useClass:UserService},{token:'AuthService',useFactory(){constmaxAdminUserId=1;返回新的AuthService（maxAdminUserId）；}}];导出默认提供者；复制代码添加组件VesselizeProvider通过Vesselize提供的VesselizeProvider来包装项目的App组件，同时传入所有合并的Provider。从'@vesselize/react'导入{VesselizeProvider};从'./providers'导入供应商;从'./components/UserProfile'导入UserProfile;函数应用程序（）{返回（);}exportdefaultApp;复制代码以获取组件中的服务实例。通过useInstancehook，可以很方便的获取服务实例。import{useParams}from'react-router-dom'import{useState,useEffect}from'react';从'@vesselize/react'导入{useInstance}；functionUserProfile(){const{id}=useParams();const[用户,setUser]=useState({});const[isAdmin,setIsAdmin]=useState(false);//通过hook获取组件实例constuserService=useInstance('UserService');constauthService=useInstance('AuthService');useEffect(()=>{userService.getUser(id).then((data)=>{setUser(data);setIsAdmin(authService.isAdmin(data));});},[id,userService,authService]);return(

);}导出默认用户配置文件;复制代码最后，如果想直接在项目中尝试，可以看一下create-react-app创建的这个示例项目：vesselize-react-starter。写在最后在创建Vesselize的过程中，学到了很多东西。本文将分享给大家，希望对大家有所帮助。感谢您的阅读，祝您生活愉快！附录Github代码仓库：github.com/vesselize文档及使用指南：vesselize.js.org项目示例：vesselize-vue-startervesselize-react-starter