当前位置: 首页 > 后端技术 > Node.js

关于Angular中模块和组件粒度的讨论

时间:2023-04-03 19:28:30 Node.js

一位Angular开发者提出了这样一个问题:我们有一个中等规模的Angular应用程序,包含大约150个组件。其中许多组件需要注入到服务类中,并且需要在应用程序中声明其他组件。我们一直在试验并寻找一种对开发人员更友好的方法。当前的方法是为每个组件创建一个模块。模块导入子组件模块并提供(或导入)组件所需的所有服务。它还导出组件本身,以便其他组件可以通过模块引用它。它使组合组件变得轻而易举,并且为组件设置测试夹具非常简单(这是之前重复依赖项和子组件树依赖项的地方)。这种方法似乎与基于组件的体系结构相匹配,并允许围绕组件依赖项进行封装。一个问题是,拥有这么多模块对性能(或其他)有何影响?Answer如果一个模块依赖于其他组件,则可以只包含每个直接依赖的组件相关的组件模块,不需要关心间接依赖。这种方法乍一看似乎需要更多的开发,但从长远来看,它会产生更少的维护问题。考虑这样一个场景:组件A依赖B,B依赖C。那么先创建ModuleC,声明ComponentCModuleB,声明ComponentB,导入模块CModuleA,同时声明ComponentA,导入ModuleB。模块A不需要直接引入模块C,如果由于项目原因,现在组件B需要依赖组件D,例如在HTML模板中使用如下语句:那么我们只需要修改ModuleB,所有依赖于ComponentB的Components都可以继续正常工作。Angular中依赖管理的典型例子:或者将vendor.js和main.js分开:这样的依赖关系可以由像webpack这样的模块包自动管理。有一种方法是创建一个包含很多组件的模块,然后只导入它,但是你最终会导入几个你不使用的组件,如果你使用延迟加载,你的模块可能会变得很大,除非你在AppModule中导入该模块,使您的启动时间增加。在功能模块中导入组件模块:feature.module.ts:imports:[ComponentAModule,ComponentBModule,ComponentCModule,]