[TOC] ## 背景 前端發展至今已經過去30餘年，前端應用領域在不斷壯大的過程中，也變得越來越複雜，隨著程式碼行數和專案需求的增加，內部模組間的依賴可能也會隨之越來越複雜，模組間的 **低複用性** 導致應用 **難以維護**，不過我們可以藉助計算機領域的一些優秀的程式設計理念來一定程度上解決這些問題，接下來要講述的 `IoC` 就是其中之一。 ## 什麼是IOC 其實學過java的就一定會知道java中有一個非常著名的框架叫做**springboot**，它就是將AOP和IOC等概念運用到了極致的代表作，那麼具體IOC是做什麼的呢，我們可以看下下面一段描述。 `IoC` 的全稱叫做 `Inversion of Control`，可翻譯為為「**控制反轉**」或「**依賴倒置**」，它主要包含了三個準則： 1. 高層次的模組不應該依賴於低層次的模組，它們都應該依賴於抽象 2. 抽象不應該依賴於具體實現，具體實現應該依賴於抽象 3. **面向介面程式設計** 而不要面向實現程式設計 假設我們有一個類`Human`，要例項一個`Human`，我們需要例項一個類`Clothes`。而例項化衣服`Clothes`，我們又需要例項化布`Cloth`，例項化鈕釦等等。 當需求達到一定複雜的程度時，我們不能為了一個人穿衣服去從布從鈕釦開始從頭實現，最好能把所有的需求放到一個工廠或者是倉庫，我們需要什麼直接從工廠的倉庫裡面直接拿。 這個時候就需要依賴注入了，我們實現一個IOC容器（倉庫），然後需要衣服就從倉庫裡面直接拿例項好的衣服給人作為屬性穿上去。 這也就大大減少了我們編碼的成本。 ## 如何實現一個IOC 其實實現IOC的思路很簡單，或者說這是一個很輕的東西，任何人只要知道原理都能去實現它。首先我們重複下剛剛所描述的ioc的概念，在正常情況下我們需要Human，Clothes類的時候都只能一個一個新建。 ```js export class Human {} export class Clothes {} function test() { const human = new Human(); const clothes = new Clothes(); } ``` 我們不難看出少量的物件需要新建的時候這麼做確實沒啥問題，但是如果在一個龐大系統中存在上百上千個物件，我們在不同業務場景又需要load不同的物件，同時我們還需要控制物件銷燬避免GC。這樣來說我們想要處理好前端物件我們得做很多工作，這樣我們就引出了接下來我們需要做的工作如何去管理物件。 ### 第一步：實現一個容器 容器其實是一個高大上的概念，其實簡單來說就是個Map物件之類的東西，用於存放現有的物件。下面是我具體實現的一個小demo，主要是存放的容器類。為了保證容器唯一，所以我將其設計成了單例模式。 ```tsx export class SimpleContainer { private containerMap =