首頁(yè)技術(shù)文章正文

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

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

IT培訓(xùn)班


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

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

var registry= {

food:{cake:'蛋糕'},
fruit: {apple:'蘋(píng)果'}
{:

②定義函數(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)來(lái),輸出依賴對(duì)象的屬性作為測(cè)試依據(jù)。

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

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

接下來(lái)通過(guò)代碼來(lái)演示JavaScript實(shí)現(xiàn)依檄注人的過(guò)程,代碼見(jià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:蘋(píng)果,

};

//獲取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ù),此處用來(lái)模擬注人器的行為

function inject (func) {

var obj={};

/通過(guò)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)過(guò)注人后,此處的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的方式來(lái)獲取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:蛋糕”)。

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

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

在圖4-10中,“蛋糕”二字是通過(guò) food.cake方式獲取的,說(shuō)明依賴注人過(guò)程已經(jīng)實(shí)現(xiàn)。






猜你喜歡:

依賴注入怎樣實(shí)現(xiàn)?有幾種方式?

依賴注入是什么?依賴注入介紹

使用JavaScript變量需要注意哪些語(yǔ)法細(xì)節(jié)?

3種JavaScript代碼書(shū)寫(xiě)位置和注意事項(xiàng)

黑馬程序員HTML&JS+前端培訓(xùn)課程

分享到:
在線咨詢 我要報(bào)名
和我們?cè)诰€交談!