JavaScript依赖注入实现思路：通过字符串解析获取函数参数

JavaScript依赖注入实现思路：通过字符串解析获取函数参数

当前前端框架普遍采用模块化设计，JavaScript亦不例外。各模块承担特定功能，且模块间存在相互依赖关系。因此，如何在JavaScript中实现依赖注入成为关键问题（注：各大框架已有相应实现，此处仅探讨其实现原理）。

具体需求如下：

假设已存在一个定义好的服务模块Key-Value集合，func为新增的服务函数，其参数列表代表该服务所依赖的项。

var services = { abc : 123, def : 456, ghi : 789 }; // 假设已定义好某些Service
function Service(abc, ghi){
this.write = function(){
console.log(abc);
console.log(ghi);
    }
}
function Activitor(func){
var obj;
// 实现
return obj;
}

通过某种机制（如反射？），提取func定义的参数列表并逐一赋值，随后通过特定机制（Activitor？）实例化该func。

解决方案：

获取函数参数列表

第一步，获取func的参数列表：

如何获取参数列表？首先考虑反射机制。JavaScript中是否存在反射？目前仅知eval(str)函数，但似乎无直接获取参数列表的实现。此外，func.arguments属性仅在调用func并传递参数时有效，无法满足需求。

能否通过处理func.toString()后的字符串来获取参数列表？

尝试实现如下：

function getFuncParams(func) {
var matches = func.toString().match(/^function\s*[^\(]*\(\s*([^\)]*)\)/m);
if (matches && matches.length > 1)
return matches[1].replace(/\s*/, '').split(',');
return [];
 };

至此获得func参数列表数组。

根据参数列表寻找依赖

第二步，根据参数列表寻找依赖：

得到参数列表即得到依赖列表，将依赖项作为参数传入便变得简单。

var params = getFuncParams(func);
for (var i in params) {
params[i] = services[params[i]];
 }

传递依赖项参数并实例化

已知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所需的参数。

第四步，打印测试一下：

完整代码：

var
// 假设已定义好某些Service
services = { abc: 123, def: 456, ghi: 789 },
// 获取func的参数列表(依赖列表)
 getFuncParams = function (func) {
 var matches = func.toString().match(/^function\s*[^\(]*\(\s*([^\)]*)\)/m);
 if (matches && matches.length > 1)
 return matches[1].replace(/\s+/, '').split(',');
 return [];
 },
// 根据参数列表(依赖列表)填充参数(依赖项)
 setFuncParams = function (params) {
 for (var i in params) {
 params[i] = services[params[i]];
 }
 return params;
 };
// 激活器
function Activitor(func) {
 var obj = {};
 func.apply(obj, setFuncParams(getFuncParams(func)));
 return obj;
}
// 定义新Service
function Service(abc, ghi) {
 this.write = function () {
 console.log(abc);
 console.log(ghi);
 }
}
// 实例化Service并调用方法
var service = Activitor(Service);
service.write();

控制台成功打印！