更新時間:2021-08-10 來源:黑馬程序員 瀏覽量:
在JavaScript中實現(xiàn)依賴注人的關(guān)鍵在于對依賴對象參數(shù)的解析,具體步驟如下。
①在一個注冊表中,定義兩個可以被注人的依賴對象。
var registry= { food:{cake:'蛋糕'}, fruit: {apple:'蘋果'} {:
②定義函數(shù)getFuncParams(func),在該函數(shù)對參數(shù)func執(zhí)行toString()函數(shù)后,可以得到func函數(shù)的源碼,我們可以用該方法解析需要依賴的JavaScript對象。
③得到源碼后用正則表達式解析出各個參數(shù)的名稱。
④定義函數(shù)setFuncParams(params),用于接收得到的參數(shù)列表,將列表賦值給個對象。
⑤定義一個eat(food)函數(shù)作為用戶對象,聲明一個與依賴對象同名的參數(shù)并且注人進來,輸出依賴對象的屬性作為測試依據(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) ( //使用正則表達式解析源碼 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ù),在程序運行時,eat()函數(shù)的參數(shù)food的值為(ake:蛋糕”)。
打開Chrome瀏覽器訪問demo4-3.html,查看瀏覽器控制臺,可以看到輸出內(nèi)容如圖4-10所示。
在圖4-10中,“蛋糕”二字是通過 food.cake方式獲取的,說明依賴注人過程已經(jīng)實現(xiàn)。
猜你喜歡: