Web前端中依賴注入的方法是什么-創(chuàng)新互聯(lián)

本篇內容介紹了“Web前端中依賴注入的方法是什么”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

專注于為中小企業(yè)提供成都做網(wǎng)站、成都網(wǎng)站設計服務,電腦端+手機端+微信端的三站合一,更高效的管理,為中小企業(yè)秀洲免費做網(wǎng)站提供優(yōu)質的服務。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動了成百上千企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網(wǎng)站建設實現(xiàn)規(guī)模擴充和轉變。

一、什么是IoC

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

1、高層次的模塊不應該依賴于低層次的模塊，它們都應該依賴于抽象

2、抽象不應該依賴于具體實現(xiàn)，具體實現(xiàn)應該依賴于抽象

3、面向接口編程 而不要面向實現(xiàn)編程

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

假設需要構建一款應用叫 App，它包含一個路由模塊 Router 和一個頁面監(jiān)控模塊 Track，一開始可能會這么實現(xiàn)：

// app.js

import Router from './modules/Router';

import Track from './modules/Track';

class App {

constructor(options) {

this.options = options;

this.router = new Router();

this.track = new Track();

this.init();

}

init() {

window.addEventListener('DOMContentLoaded', () => {

this.router.to('home');

this.track.tracking();

this.options.onReady();

});

}

}

// index.js

import App from 'path/to/App';

ew App({

onReady() {

// do something here...

},

});

嗯，看起來沒什么問題，但是實際應用中需求是非常多變的，可能需要給路由新增功能(比如實現(xiàn) history 模式)或者更新配置(啟用 history, ew Router({ mode: 'history' }))。這就不得不在 App 內部去修改這兩個模塊，這是一個 INNER BREAKING 的操作，而對于之前測試通過了的 App 來說，也必須重新測試。

很明顯，這不是一個好的應用結構，高層次的模塊 App 依賴了兩個低層次的模塊 Router 和 Track，對低層次模塊的修改都會影響高層次的模塊 App。那么如何解決這個問題呢，解決方案就是接下來要講述的 依賴注入(Dependency Injection)。

二、依賴注入

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

// app.js

class App {

constructor(options) {

this.options = options;

this.router = options.router;

this.track = options.track;

this.init();

}

init() {

window.addEventListener('DOMContentLoaded', () => {

this.router.to('home');

this.track.tracking();

this.options.onReady();

});

}

}

// index.js

import App from 'path/to/App';

import Router from './modules/Router';

import Track from './modules/Track';

ew App({

router: new Router(),

track: new Track(),

onReady() {

// do something here...

},

});

可以看到，通過依賴注入解決了上面所說的 INNER BREAKING 的問題，可以直接在 App 外部對各個模塊進行修改而不影響內部。

是不是就萬事大吉了?理想很豐滿，但現(xiàn)實卻是很骨感的，沒過兩天產品就給你提了一個新需求，給 App 添加一個分享模塊 Share。這樣的話又回到了上面所提到的 INNER BREAKING 的問題上：你不得不對 App 模塊進行修改加上一行 this.share = options.share，這明顯不是我們所期望的。

雖然 App 通過依賴注入的方式在一定程度上解耦了與其他幾個模塊的依賴關系，但是還不夠徹底，其中的 this.router 和 this.track 等屬性其實都還是對「具體實現(xiàn)」的依賴，明顯違背了 IoC 思想的準則，那如何進一步抽象 App 模塊呢。

Talk is cheap, show you the code

class App {

static modules = []

constructor(options) {

this.options = options;

this.init();

}

init() {

window.addEventListener('DOMContentLoaded', () => {

this.initModules();

this.options.onReady(this);

});

}

static use(module) {

Array.isArray(module) ? module.map(item => App.use(item)) : App.modules.push(module);

}

initModules() {

App.modules.map(module => module.init && typeof module.init == 'function' && module.init(this));

}

}

經(jīng)過改造后 App 內已經(jīng)沒有「具體實現(xiàn)」了，看不到任何業(yè)務代碼了，那么如何使用 App 來管理我們的依賴呢：

// modules/Router.js

import Router from 'path/to/Router';

export default {

init(app) {

app.router = new Router(app.options.router);

app.router.to('home');

}

};

// modules/Track.js

import Track from 'path/to/Track';

export default {

init(app) {

app.track = new Track(app.options.track);

app.track.tracking();

}

};

// index.js

import App from 'path/to/App';

import Router from './modules/Router';

import Track from './modules/Track';

App.use([Router, Track]);

ew App({

router: {

mode: 'history',

},

track: {

// ...

},

onReady(app) {

// app.options ...

},

});

可以發(fā)現(xiàn) App 模塊在使用上也非常的方便，通過 App.use() 方法來「注入」依賴，在 ./modules/some-module.js 中按照一定的「約定」去初始化相關配置，比如此時需要新增一個 Share 模塊的話，無需到 App 內部去修改內容：

// modules/Share.js

import Share from 'path/to/Share';

export default {

init(app) {

app.share = new Share();

app.setShare = data => app.share.setShare(data);

}

};

// index.js

App.use(Share);

ew App({

// ...

onReady(app) {

app.setShare({

title: 'Hello IoC.',

description: 'description here...',

// some other data here...

});

}

});

直接在 App 外部去 use 這個 Share 模塊即可，對模塊的注入和配置極為方便。

那么在 App 內部到底做了哪些工作呢，首先從 App.use 方法說起：

class App {

static modules = []

static use(module) {

Array.isArray(module) ? module.map(item => App.use(item)) : App.modules.push(module);

}

}

可以很清楚的發(fā)現(xiàn)，App.use 做了一件非常簡單的事情，就是把依賴保存在了 App.modules 屬性中，等待后續(xù)初始化模塊的時候被調用。

接下來我們看一下模塊初始化方法 this.initModules() 具體做了什么事情：

class App {

initModules() {

App.modules.map(module => module.init && typeof module.init == 'function' && module.init(this));

}

}

可以發(fā)現(xiàn)該方法同樣做了一件非常簡單的事情，就是遍歷 App.modules 中所有的模塊，判斷模塊是否包含 init 屬性且該屬性必須是一個函數(shù)，如果判斷通過的話，該方法就會去執(zhí)行模塊的 init 方法并把 App 的實例 this 傳入其中，以便在模塊中引用它。

從這個方法中可以看出，要實現(xiàn)一個可以被 App.use() 的模塊，就必須滿足兩個「約定」：

1. 模塊必須包含 init 屬性

2. init 必須是一個函數(shù)

這其實就是 IoC 思想中對「面向接口編程 而不要面向實現(xiàn)編程」這一準則的很好的體現(xiàn)。App 不關心模塊具體實現(xiàn)了什么，只要滿足對 接口 init 的「約定」就可以了。

此時回去看 Router 的模塊的實現(xiàn)就可以很容易理解為什么要怎么寫了：

// modules/Router.js

import Router from 'path/to/Router';

export default {

init(app) {

app.router = new Router(app.options.router);

app.router.to('home');

}

};

“Web前端中依賴注入的方法是什么”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關的知識可以關注創(chuàng)新互聯(lián)-成都網(wǎng)站建設公司網(wǎng)站，小編將為大家輸出更多高質量的實用文章！

本文名稱：Web前端中依賴注入的方法是什么-創(chuàng)新互聯(lián)
網(wǎng)頁URL：http://bm7419.com/article28/dihdcp.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供Google、企業(yè)網(wǎng)站制作、域名注冊、網(wǎng)站維護、網(wǎng)站策劃、建站公司

廣告

聲明：本網(wǎng)站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經(jīng)允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)

小程序開發(fā)