JavaScript如何实现依赖注入？

更新时间:2021-08-10 来源:黑马程序员浏览量:

IT培训班

在JavaScript中实现依赖注人的关键在于对依赖对象参数的解析,具体步骤如下。

①在一个注册表中，定义两个可以被注人的依赖对象。

var registry= {

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

②定义函数getFuncParams(func)，在该函数对参数func执行toString()函数后,可以得到func函数的源码，我们可以用该方法解析需要依赖的JavaScript对象。

③得到源码后用正则表达式解析出各个参数的名称。

④定义函数setFuncParams(params),用于接收得到的参数列表，将列表赋值给个对象。

⑤定义一个eat(food)函数作为用户对象,声明一个与依赖对象同名的参数并且注人进来,输出依赖对象的属性作为测试依据。

⑥定义一个注人器函数inject(func)模拟IoC容器，,将获取的依赖对象的参数列表传递给用户对象。

⑦调用inject(eat函数测试注人结果，如果依赖注人成功，在eat()函数中便可以使用food对象的值。

接下来通过代码来演示JavaScript实现依檄注人的过程，代码见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的参数列表(依赖列表)

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[];

};

//根据参数列表(依赖列表)填充参数(依赖项)

var setFuncParams= function (params)

for (var i in params) {

paramsLi J= registry[params[i]];

return params ;

};

//注人函数,此处用来模拟注人器的行为

function inject (func) {

var obj={};

/通过apply()函数调用func并且把参数列表传递func

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

return obj;

//定义一个函数,声明参数food,容器会根据这个名称在注册表中找到同名的对象，

//并且注人 eat

var eat= function (food)

//经过注人后,此处的food值为{cake:'蛋糕'}

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

}

//调用注人方法

< /script>

< /body>

< /html>

在上述代码中，第10~ 13行定义了一个注册表，注册表中包含两个对象food和furint第39行又定义了 eat()函数函数中注人对象food，注入成功后便可以在eat函数中使用food. cake的方式来获取cake的属性值:第15~-22 行定义了geFupParams函数用于获取注册表的参数，第24~29行定义了sefunParams()函数，用于将获取的参数列表，并将该存放在params对象中，第31~36行定义了注人器inject()函数，在该函数中，使用apply将获取的参教列表传递给注入器参数。最后调用注入器，将用户对象eat()函数作为参数，在程序运行时，eat()函数的参数food的值为(ake:蛋糕”)。

打开Chrome浏览器访问demo4-3.html,查看浏览器控制台，可以看到输出内容如图4-10所示。

JavaScript如何实现依赖注入.jpg