JavaScript如何實(shí)現(xiàn)依賴注入？

更新時(shí)間:2021-08-10 來源:黑馬程序員瀏覽量:

IT培訓(xùn)班

在JavaScript中實(shí)現(xiàn)依賴注人的關(guān)鍵在于對(duì)依賴對(duì)象參數(shù)的解析,具體步驟如下。

①在一個(gè)注冊(cè)表中，定義兩個(gè)可以被注人的依賴對(duì)象。

var registry= {

food:{cake:'蛋糕'}，
fruit: {apple:'蘋果'}
{：

②定義函數(shù)getFuncParams(func)，在該函數(shù)對(duì)參數(shù)func執(zhí)行toString()函數(shù)后,可以得到func函數(shù)的源碼，我們可以用該方法解析需要依賴的JavaScript對(duì)象。

③得到源碼后用正則表達(dá)式解析出各個(gè)參數(shù)的名稱。

④定義函數(shù)setFuncParams(params),用于接收得到的參數(shù)列表，將列表賦值給個(gè)對(duì)象。

⑤定義一個(gè)eat(food)函數(shù)作為用戶對(duì)象,聲明一個(gè)與依賴對(duì)象同名的參數(shù)并且注人進(jìn)來,輸出依賴對(duì)象的屬性作為測(cè)試依據(jù)。

⑥定義一個(gè)注人器函數(shù)inject(func)模擬IoC容器，,將獲取的依賴對(duì)象的參數(shù)列表傳遞給用戶對(duì)象。

⑦調(diào)用inject(eat函數(shù)測(cè)試注人結(jié)果，如果依賴注人成功，在eat()函數(shù)中便可以使用food對(duì)象的值。

接下來通過代碼來演示JavaScript實(shí)現(xiàn)依檄注人的過程，代碼見demo4-3. html

demo4-3. html

< !DOCTYPE html>

<html>

<head>

<meta charset="UTF- 8">

<title> JavaScript依賴注人</tit1e>
< /head>
<body>

<script>

//-個(gè)注冊(cè)表里有兩個(gè)可注人的依賴對(duì)象

var registry= {

food: {cake:蛋糕，

fruit:{apple:蘋果，

};

//獲取funo的參數(shù)列表(依賴列表)

var get Funcparms= function (func) (

//使用正則表達(dá)式解析源碼

var matches=

func. toString () .match(/^function\s*[^\(]x\(\sx ([^\)]*\)/m);


if (matches δ& matches. length>1)

return matches[1].replace(/\s+/, '') .split(',');

return[];

};

//根據(jù)參數(shù)列表(依賴列表)填充參數(shù)(依賴項(xiàng))

var setFuncParams= function (params)

for (var i in params) {

paramsLi J= registry[params[i]];

return params ;

};

//注人函數(shù),此處用來模擬注人器的行為

function inject (func) {

var obj={};

/通過apply()函數(shù)調(diào)用func并且把參數(shù)列表傳遞func

func.apply (func, setFuncParams (getFuncParams (func))) ;

return obj;

//定義一個(gè)函數(shù),聲明參數(shù)food,容器會(huì)根據(jù)這個(gè)名稱在注冊(cè)表中找到同名的對(duì)象，

//并且注人 eat

var eat= function (food)

//經(jīng)過注人后,此處的food值為{cake:'蛋糕'}

console.log('吃到'十food.cake+'J');

}

//調(diào)用注人方法

< /script>

< /body>

< /html>

在上述代碼中，第10~ 13行定義了一個(gè)注冊(cè)表，注冊(cè)表中包含兩個(gè)對(duì)象food和furint第39行又定義了 eat()函數(shù)函數(shù)中注人對(duì)象food，注入成功后便可以在eat函數(shù)中使用food. cake的方式來獲取cake的屬性值:第15~-22 行定義了geFupParams函數(shù)用于獲取注冊(cè)表的參數(shù)，第24~29行定義了sefunParams()函數(shù)，用于將獲取的參數(shù)列表，并將該存放在params對(duì)象中，第31~36行定義了注人器inject()函數(shù)，在該函數(shù)中，使用apply將獲取的參教列表傳遞給注入器參數(shù)。最后調(diào)用注入器，將用戶對(duì)象eat()函數(shù)作為參數(shù)，在程序運(yùn)行時(shí)，eat()函數(shù)的參數(shù)food的值為(ake:蛋糕”)。

打開Chrome瀏覽器訪問demo4-3.html,查看瀏覽器控制臺(tái)，可以看到輸出內(nèi)容如圖4-10所示。

JavaScript如何實(shí)現(xiàn)依賴注入.jpg