一、前言

依賴注入（Dependency Injection）這個概念的興起已經有很長時間了，把這個概念融入到框架中達到出神入化境地的，非Spring莫屬。然而在前端領域，似乎很少會提到這個概念，難道前端的程式碼就不需要解耦嗎？前端的程式碼就沒有依賴了？本文將以 React 的原始碼為例子，看看它是如何使用依賴注入這一設計模式的。

二、依賴注入的基本概念

在看程式碼之前，有必要先簡單介紹一下依賴注入的基本概念。依賴注入和控制反轉（Inversion of Control），這兩個詞經常一起出現。一句話表述他們之間的關係：依賴注入是控制反轉的一種實現方式。另一種方式叫依賴查詢（Dependency Lookup）。

在控制不反轉的情況下，某個類如果依賴另一個類，它會自己來建立依賴：

class Person {

eat() {

const dinner = new Dinner('法國菜');

console.log('開飯啦！，今晚自己做：', dinner.name);

}

class Dinner {

constructor(name) {

this.name = name;

}

假設一個人要吃飯，如果控制不反轉，就需要自己來做，像上面的程式碼一樣要自己new Dinner。

如果使用控制反轉，吃什麼就不用自己費腦子了，別人給我做好放到我面前，我直接吃就好！

class Person {

eat(dinner) {

console.log('開飯啦！，今晚有大廚給我做：', dinner.name);

}

也就是說，不需要自己來建立依賴的物件了，由外部傳入，這就是依賴注入！

三、React 中的依賴注入

眾所周知，React 除了可以在瀏覽器執行外（ReactDOM），也可以製作 App 在手機端執行（ReactNative）。而兩者有大量的程式碼都是可以共享的，這就是依賴注入的使用場景了。

我們來看下具體是如何注入的：

// ReactDOM.js

var ReactDefaultInjection = require('ReactDefaultInjection');

ReactDefaultInjection.inject();

// ReactNative.js

var ReactNativeDefaultInjection = require('ReactNativeDefaultInjection');

ReactNativeDefaultInjection.inject();

注入的位置都在框架程式碼最開始載入的位置。下面以 ReactDOM 為例子，詳細講解注入的邏輯。

先來看看需要注入的物件都有哪些，定義在 ReactInjection.js 這個檔案當中：

var DOMProperty = require('DOMProperty');

var EventPluginHub = require('EventPluginHub');

var EventPluginUtils = require('EventPluginUtils');

var ReactComponentEnvironment = require('ReactComponentEnvironment');

var ReactEmptyComponent = require('ReactEmptyComponent');

var ReactBrowserEventEmitter = require('ReactBrowserEventEmitter');

var ReactHostComponent = require('ReactHostComponent');

var ReactUpdates = require('ReactUpdates');

var ReactInjection = {

Component: ReactComponentEnvironment.injection,

DOMProperty: DOMProperty.injection,

EmptyComponent: ReactEmptyComponent.injection,

EventPluginHub: EventPluginHub.injection,

EventPluginUtils: EventPluginUtils.injection,

EventEmitter: ReactBrowserEventEmitter.injection,

HostComponent: ReactHostComponent.injection,

Updates: ReactUpdates.injection,

};

module.exports = ReactInjection;

這裡面每一個 injection 都是一個物件，物件內定義了一個或多個 inject 的方法來注入對應的內容。以ReactUpdates.injection為例子：

// ReactUpdates.js

var ReactUpdatesInjection = {

injectReconcileTransaction: function (ReconcileTransaction) {

...

ReactUpdates.ReactReconcileTransaction = ReconcileTransaction;

},

injectBatchingStrategy: function (_batchingStrategy) {

...

batchingStrategy = _batchingStrategy;

},

};

var ReactUpdates = {

...

injection: ReactUpdatesInjection,

};

可以看到 ReactUpdates 依賴的ReactReconcileTransaction和batchingStrategy就是透過這 2 個方法注入進去的。

有了上面的內容，相當於定義好需要依賴的內容了。下一步就是建立具體的依賴內容，然後注入到需要的地方：

// ReactDefaultInjection.js

var ReactInjection = require('ReactInjection');

var ReactReconcileTransaction = require('ReactReconcileTransaction');

var ReactDefaultBatchingStrategy = require('ReactDefaultBatchingStrategy');

...

function inject() {

...

ReactInjection.Updates.injectReconcileTransaction(

ReactReconcileTransaction

);

ReactInjection.Updates.injectBatchingStrategy(

ReactDefaultBatchingStrategy

);

}

這裡的 ReactInjection.Updates 等於 ReactUpdates.injection 這個物件。而 inject 方法，就是在前文的 ReactDOM.js 中呼叫的方法ReactDefaultInjection.inject()。

上述各個檔案整體的呼叫關係如下：

四、總結

本文介紹了依賴注入的基本概念，並結合 React 的原始碼講解具體的使用場景。這樣做的主要目的是解耦，可以根據實際的上下文傳入不同的依賴物件，優雅的實現了程式碼的抽象與複用。

文章同步釋出：

React 原始碼中的依賴注入方法

相關文章