前端中的 IoC 理念

photo by kevin laminto

前端應用在不斷壯大的過程中，內部模組間的依賴可能也會隨之越來越複雜，模組間的低復用性導致應用難以維護，不過我們可以借助計算機領域的一些優秀的程式設計理念來一定程度上解決這些問題，接下來要講述的ioc就是其中之一。

ioc的全稱叫做inversion of control，可翻譯為為「控制反轉」或「依賴倒置」，它主要包含了三個準則：

高層次的模組不應該依賴於低層次的模組，它們都應該依賴於抽象

抽象不應該依賴於具體實現，具體實現應該依賴於抽象

面向介面程式設計而不要面向實現程式設計

概念總是抽象的，所以下面將以乙個例子來解釋上述的概念：

import router from

'./modules/router';

import track from

'./modules/track';

class

init() );

}}// index.js

onready() ,

});複製**

所謂的依賴注入，簡單來說就是把高層模組所依賴的模組通過傳參的方式把依賴「注入」到模組內部，上面的**可以通過依賴注入的方式改造成如下方式：

class

init() );

}}// index.js

import router from

'./modules/router';

import track from

'./modules/track';

router: new router(),

track: new track(),

onready() ,

});複製**

talk is cheap, show you the code:

class

init() );
}static use(module) 
initmodules() 
}複製**

// modules/router.js

import router from
'path/to/router';
export
default 
};// modules/track.js
import track from
'path/to/track';
export
default 
};// index.js
import router from
'./modules/router';
import track from
'./modules/track';
router: ,
track: ,
},});複製**

// modules/share.js

import share from
'path/to/share';
export
default 
};// index.js
// ...
title: 'hello ioc.',
description: 'description here...',
// some other data here...
});}
});複製**

class

}複製**

class

}複製**

init必須是乙個函式

init的「約定」就可以了。

此時回去看router的模組的實現就可以很容易理解為什麼要怎麼寫了：

// modules/router.js

import router from
'path/to/router';
export
default 
};複製**

前端 IOC 思想簡單實踐

你有沒有過這樣乙個經歷，乙個專案立項之時，什麼模組化啊，什麼抽象啊，什麼解耦啊，什麼可復用元件啊什麼的，哪個高階用哪個，可是專案發展到中期，隨著模組的增加，什麼可復用，能用就行，什麼模組化，載入就行，久而久之，專案越來越大，隨之也越來越臃腫，越來越難以維護，改一處看似簡單的模組，卻發現八桿子打不著的...

Unity應用架構設計 7 IoC工廠理念先行

一談到 ioc 有經驗的程式設計師馬上會聯想到控制反轉，將建立物件的責任反轉給工廠。ioc是依賴注入 di 的核心，大名鼎鼎的spring框架就是乙個非常卓越的的控制反轉 依賴注入框架。遺憾的是，我們顯然不能在unity 3d中去使用spring框架，但思想是相通的 ioc也好，控制反轉也罷，本質上...

Spring中IOC程式設計

一 基本概念 1.ioc inverse of controll 控制反 所謂控制反轉就是把建立物件 bean 和維護物件 bean 的關係的權利從程式中轉移到spring的 容器 applicationcontext.xml 而程式本身不再維護.2.di dependency injection ...