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

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

IT培訓(xùn)班

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

①在一個注冊表中，定義兩個可以被注人的依賴對象。

var registry= {

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

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

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

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

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

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

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

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

demo4-3. html

< !DOCTYPE html>

<html>

<head>

<meta charset="UTF- 8">

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

<script>

//-個注冊表里有兩個可注人的依賴對象

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ù)(依賴項)

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;

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

//并且注人 eat

var eat= function (food)

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

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

}

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

< /script>

< /body>

< /html>

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

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

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