首页 > 代码库 > Javascript——依赖注入
Javascript——依赖注入
本人才学疏浅，本文只为抛砖引玉，欢迎各路大牛前来斧正，不胜感激！
如今各个框架都在模块化，连前端的javascript也不例外。每个模块负责一定的功能，模块与模块之间又有相互依赖，那么问题来了：javascript的依赖注入如何实现？（javascript的依赖注入，各大框架都有相应的实现，这里只学习实现思路）
如下需求：
假设已经有定义好的服务模块Key-Value集合，func为添加的新服务，参数列表为服务依赖项。
1 var services = { abc : 123, def : 456, ghi : 789 }; // 假设已定义好某些Service 2 function Service(abc, ghi){ 3 this.write = function(){ 4 console.log(abc); 5 console.log(ghi); 6 } 7 } 8 function Activitor(func){ 9 var obj;10 // 实现11 return obj;12 }
解决思路：
通过某种机制（反射？），取出该func定义的参数列表，并一一赋值。然后再通过某种机制（Activitor？），实例化该func。
解决方案：
一、获取func的参数列表：
如何获取参数列表呢？我首先想到的是反射机制。那javascript里面有没有反射呢？应该有吧，我目前只知道使用eval(str)函数，但貌似并没有获取参数列表的相关实现。再看func.arguments定义，此属性只在调用func并传递参数时才有效，也不能满足需求。
那能不能通过处理func.toString()后的字符串获取参数列表呢？
上手试试吧：
1 function getFuncParams(func) {2 var matches = func.toString().match(/^function\s*[^\(]*\(\s*([^\)]*)\)/m);3 if (matches && matches.length > 1)4 return matches[1].replace(/\s*/, ‘‘).split(‘,‘); 5 return [];6 };
至此获得func参数列表数组。
二、根据参数列表寻找依赖：
得到了参数列表，即得到了依赖列表，将依赖项作为参数传入也就很简单了。
1 var params = getFuncParams(func);2 for (var i in params) {3 params[i] = services[params[i]];4 }
三、传递依赖项参数并实例化：
我们知道，javascript里面有func.constructor有call(thisArg,[arg[,arg,[arg,[…]]]])和apply(thisArg,args…)两个函数，都可以实现实例化func操作。其中call函数第一个参数为this指针，剩余为参数列表，这个适合在已知func参数列表的情况下使用，不能满足我的需求。再看第二个apply函数，第一个参数也为this指针，第二个参数为参数数组，其在调用时会自动为func的参数列表一一赋值，正好满足我的需求。
代码大概如下：
function Activitor(func){ var obj = {}; func.apply(obj, params); return obj;}
至此我们能够创建该func的实例，并传递该func需要的参数。
四、打印测试一下吧：
完整代码：
1 var 2 // 假设已定义好某些Service 3 services = { abc: 123, def: 456, ghi: 789 }, 4 5 // 获取func的参数列表(依赖列表) 6 getFuncParams = function (func) { 7 var matches = func.toString().match(/^function\s*[^\(]*\(\s*([^\)]*)\)/m); 8 if (matches && matches.length > 1) 9 return matches[1].replace(/\s+/, ‘‘).split(‘,‘);10 return [];11 },12 13 // 根据参数列表(依赖列表)填充参数(依赖项)14 setFuncParams = function (params) {15 for (var i in params) {16 params[i] = services[params[i]];17 }18 return params;19 };20 21 // 激活器22 function Activitor(func) {23 var obj = {};24 func.apply(obj, setFuncParams(getFuncParams(func)));25 return obj;26 }27 28 // 定义新Service29 function Service(abc, ghi) {30 this.write = function () {31 console.log(abc);32 console.log(ghi);33 }34 }35 36 // 实例化Service并调用方法37 var service = Activitor(Service);38 service.write();
控制台成功打印！
Javascript——依赖注入