首页 > 教程 >
手把手带你了解Angular中的依赖注入
2023-02-23教程围观次
简介本篇文章带大家了解一下依赖注入,介绍一下依赖注入解决的问题和它原生的写法是什么,并聊聊Angular的依赖注入框架,希望对大家有所帮助!最近在Angular项目中经常能碰到依赖注入这个关键词,但是始终不理解它是怎么实现的,在Angular的官网上也只有关于它的使用,详细点的原理并没有说明,所以就下来我们就从原生的写法来讲解一下,依赖注入是用来解决什么问题的,他用js应该怎么去表现。依赖注入是什么依
本篇文章带大家了解一下
依赖注入,介绍一下依赖注入解决的问题和它原生的写法是什么,并聊聊
Angular的依赖注入框架,希望对大家有所帮助!
最近在Angular项目中经常能碰到依赖注入这个关键词,但是始终不理解它是怎么实现的,在Angular的官网上也只有关于它的使用,详细点的原理并没有说明,所以就下来我们就从原生的写法来讲解一下,依赖注入是用来解决什么问题的,他用js应该怎么去表现。
依赖注入是什么
依赖注入简称DI,是面向对象编程中的一种设计原则,用来减少代码之间的耦合度。
我们先来看一段代码
class Video{ constructor(url){}} class Note{ video: Video constructor(){ this.video = new Video("https://aaaaa.mp4") } getScreenshot(){ this.video.getScreenshot() }} const note = new Note()note.getScreenshot()
假设我们用一个视频类,它其中有一个方法 getScreenshot 获取截图,在实例化视频类的时候,需要传入一个视频 url 这样的参数。现在有一个笔记类,它需要去调用视频类下的截图方法,那么我们就可以说,笔记类是依赖于视频类的。所以在笔记类的内部,我们就需要去实例化视频类,这样才能在笔记类中获取视频类的实例对象,并且调用它里面的截图方法。
上面代码的耦合度过高,并不推荐使用,比方说如果Video的视频地址换了一个,那么在Note中就需要去改变传入的视频url,这样假设要是有更多的类依赖于视频类,那么一旦做出更改,那么所有地方都要跟着改变,非常的不方便。
接下来利用依赖注入解决上面的问题:
class Note{ video: Video constructor(video: Video){ this.video = Video; }} const video = new Video("https://aaaaa.mp4")const note = new Note(video)
我们在类的外部去实例化视频类,并且通过参数传递的方式把实例传递给了笔记类,通过这样的方式就能够成功解决耦合度过高的问题,我们把通过参数传递实例的这种方式称为:注入。
优点
通过依赖注入降低了代码之间的耦合度,增加了代码的可维护性。视频类中的代码更改也不会去影响到笔记类了。
Angular的DI框架
在上述实现的过程当中,还是有着一个不是特别理想的地方,就是我们需要在类的外部去实例化视频类,虽然只有这一处,但是我们还是希望视频类的内部再怎么更改,都不会影响外部代码。
在 Angular 提供的 DI 框架中,我们就不需要自己去做视频类的实例化操作,它将实现依赖注入的过程隐藏了,对于开发者来说,只需要使用很简单的代码就可以使用复杂的依赖注入功能。
在 Angular 的 DI 有四个核心的概念:
Dependency:组件要依赖的实例对象,服务实例对象
Token:获取服务实例对象的标识,在Angular会维护很多的实例对象,在我们需要获取的时候,就需要通过标识去获取
Injector:注入器,负责创建维护服务类的实例对象,并向组件中注入服务实例对象,通过参数的方式传递给各个组件
Procider:对象,用于配置注入器,指定创建服务实例对象的服务类和获取实例对象的标识
Injector注入器
我们先通过Angular提供的基本语法来创建一个注入器
1、创建注入器
import { ReflectiveInjector } from "@angular/core"//服务类class Video{}//创建注入器并传入服务类const injector = ReflectiveInjector.resolveAndCreate([ Video ])
引入ReflectiveInjector其中resolveAndCreate方法用于创建注入器,它接收一个数组,数组中就是需要创建实例对象的类,这个方法会返回一个注入器
2、获取注入器中的服务类实例对象
const video = injector.get(Video)
在injector下有一个get方法,用于传入标识并且获取实例对象,默认标识就是服务类的名称也就是Video
这样我们就能够获取到Video的实例对象了,Angular给我们提供的这套DI框架使得我们不需要去手动的实例化某一个类来获得它的实例对象,它会来帮我们完成。
3、服务的实例对象为单例模式,注入器在创建服务实例后悔对其进行缓存
const video1 = injector.get(Video)const video2 = injector.get(Video) console.log(video1 === video1)//true
也就是说,无论通过框架获取多少次实例对象,他返回的都是同一个实例对象
4、但是我们可以通过创建多个注入器,不同的注入器返回的同一个服务实例化的对象不是同一个
const injector1 = ReflectiveInjector.resolveAndCreate([ Video ])const injector2 = ReflectiveInjector.resolveAndCreate([ Video ]) const video1 = injector1.get(Video)const video2 = injector2.get(Video) console.log(video1 === video1)//false
5、注入器上面存在一个创建子级注入器的方法为 resolveAndCreateChild,这个方法会创建一个子级注入器,父级注入器和子级注入器之间的关系类似于js的作用域链,当前注入器查找不到就会去父级注入器查找,比如:
const injector = ReflectiveInjector.resolveAndCreate([ Video ])const injectorChild = injector.resolveAndCreateChild([]) const video1 = injector.get(Video)const video2 = injectorChild.get(Video) console.log(video1 === video1)//true
像上面这段代码,我们在创建子级注入器的时候,不传递参数,但是在子级注入器实例化的时候,由于自身不存在 Video 这个服务,它就会去父级查找,当然,就找到了父级的 Video 这个服务并且实例化,所以后面的两个实例化对象相等
总结
本文介绍了依赖注入解决的问题和它原生的写法是什么用的,并且介绍了Angular提供给我们的DI框架,用它提供给我们的简单api实现了实例化的过程,并且讲解了注入器,也是会分层级的,能提供给我们更好地一个项目设计方式。之后有机会再来讲解一下provider以及更多的扩展。
下载链接:网站源码/小程序源码/网站模板下载
下载排行
- 最新720全景云系统/可生成小程序+带PC端+安装教程/价值800元的720云全景系统源码
- thinkphp资源源码付费下载站网站源码
- 群多多社群人脉H5-2.1.4多开插件+小程序独立前端+搭建教程
- ThinkPHP高仿蓝奏云网盘系统源码/对接易支付系统程序
- ShopXO开源电商系统源码支持PC+H5支付宝小程序微信小程序百度小程序头条&抖音小程序QQ小程序APP等
- 自带多平台解析接口短视频去水印图集水印小程序源码下载
- 七夕情侣飞行棋游戏限定版本源码/解锁版
- 仿XDGAME下载游戏网站源码/可做资讯网站
- 高仿拼多多源码/拼单商城系统源码/拼团商城源码
- 新版PHP云进销存系统ERP销售库存仓库员工管理系统源码
最新发布
-
最新去水印小程序源码分享/无需后台/对接接口/支持全网去水印功能
-
群多多社群人脉H5-2.1.4多开插件+小程序独立前端+搭建教程
-
七夕情侣飞行棋游戏限定版本源码/解锁版
-
苹果CMS海螺模版V20修复版/加广告代码
-
宠物社区风格 商业版(GBK)Discuz模板
-
全新UI基于Thinkphp的最新自助打印系统/云打印小程序源码/附教程
-
易优CMS家纺家居装饰类网站模板/EyouCMS家具家居类企业网站模板
-
EyouCMS艺术***摄影工作室网站模板/易优CMS摄影工作室网站模板
-
易优CMS响应式精品茶具实木茶盘销售网站模板/EyouCMS响应式酒水饮料类企业网站模板
-
EyouCMS响应式推土机挖掘机机械类网站模板/易优CMS机械设备类企业网站模板