一、前言

依赖注入的概念已经兴起很久了，Spring是将这个概念集成到框架中以达到高超地位的唯一方法。但是在前端领域，似乎很少提到这个概念，那么前端代码不需要解耦吗？前端代码没有依赖性？本文将以React的源代码为例，看看它是如何使用依赖注入的设计模式的。

二、依赖注入的基本概念

在看代码之前，有必要简单介绍一下依赖注入的基本概念。依赖注入和控制反转，这两个词经常一起出现。它们之间的关系用一句话来表达：依赖注入是一种控制反转的方式。另一种方法叫做依赖项查找。

如果一个类依赖于另一个类而没有控制反转，它将创建自己的依赖关系：

班主{eat () {const晚餐=新晚餐('法国菜')；(晚餐准备好了！今晚自己动手：‘，晚餐.姓名)；} } class Detain { constructor(name){ this . name=name；}}假设一个人想吃饭。如果控制不反转，他需要自己做。像上面的代码一样，他需要自己的新晚餐。

如果用控制反转，就不用担心吃什么了。别人给我做，我就直接吃！

上课的人{吃(晚餐){console.log('晚餐准备好了！今晚，一位厨师为我做了这道菜。}}也就是说，不需要自己创建依赖对象，而是从外部导入，这就是依赖注入！

第三，反应中的依赖注入

众所周知，React不仅可以在浏览器(ReactDOM)中运行，还可以让应用程序在手机上运行(ReactNative)。并且有很多代码可以在它们之间共享，这就是依赖注入的使用场景。

让我们看看它是如何注入的：

//react DOM . jsvar react defaultinject=require(' react defaultinject ')；react defaultinjuction . inject()；//react native . jsvar react native defaultinjection=require(' react native defaultinjection ')；reactnationdefaultinjuction . inject()；注入位置都在框架代码开始加载的位置。让我们以ReactDOM为例，详细说明注入的逻辑。

让我们看一下需要注入的对象，这些对象在文件reaction injury . js中定义：

var DOMproperty=require(' DOMproperty ')；var EventPluginHub=require(' EventPluginHub ')；var EventPluginUtils=require(' EventPluginUtils ')；var react component environment=require(' react component environment ')；var reacttemptycomponent=require(' reacttemptycomponent ')；var reacttbrowserveventemitter=require(' reacttbrowserveventemitter ')；var reatostcomponent=require(' reatostcomponent ')；var react plates=required(' react plates ')；var reaction injection={ component : react component environment . inject，DOM property : DOM property . inject，emptycomponent : react temp component . inject，EventPluginHub.injection，EventPluginUtils.injection，EventPluginUtils.injection，eventemiter : reactbrowsereventureemitter . inject，hostcomponent : react component . inject，updates : react . inject，}；module . exports=reaction injection；每个注射都是一个对象，在对象中定义一种或多种注射方法来注射相应的内容。以ReactUpdates.injection为例：

//reactupdate . jsvar reactupdate sin projection={ input conferencetransactions : function(和解交易)}.重新设置日期。ReactReconcileTransaction=和解交易；}，injectBatchingStrategy:函数(_ batchingStrategy){ 0.batchingStrategy=_ batchingStrategy；},};var ReactUpdates={.injection : reatupdatesinprojection，}；可以看到，ReactReconcileTransaction和batchingStrategy这两个ReactUpdates所依赖的都是通过这两个方法注入的。

有了以上内容，就相当于定义了需要依赖的内容。下一步是创建特定的依赖项，并在需要的地方注入它们：

//react defaultinjection . jsvar reaction injection=require(' reaction injection ')；var reactreduclettransaction=require(' reactreduclettransaction ')；var react defaultbatchingsstrategy=require(' react defaultbatchingsstrategy ')；函数inject(){ 0.反应注射。updates . injectconflicetransaction(reactreduclettransaction)；反应注射。updates . injectbatchingstrategy(ReactDefaultBatchingStrategy)；}反应注射。这里的Updates等于ReactUpdates.injection .而inject方法是ReactDefaultInjection.inject()方法，在ReactDOM.js中调用.

以上文件的整体调用关系如下：

四.摘要

介绍了依赖注入的基本概念，并用React的源代码说明了具体的使用场景。这样做的主要目的是解耦，可以根据实际上下文引入不同的依赖对象，优雅地实现代码的抽象和重用。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。