JavaScript依赖注入的实现思路
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(/^functions*[^(]*(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(/^functions*[^(]*(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();
控制台成功打印!
- uva----11729 Commando war (突击战争)
- uva-----11292 The Dragon of Loowater
- golang简单位运算示例
- 学编程,学单词.....在学习中积累自己的单词(不断更新__ing)
- 初学java之事件响应(结合接口来设置在同一个界面上!)
- 初学java之触发响应事件举例子
- 初学java之(盒子分布)
- java(课程设计之记事本界面部分代码公布)
- HDUOJ---1236 排名(浙大考研题)
- HDUOJ----1234 开门人和关门人(浙江大学考研题)
- HDUOJ----2571(命运)(简单动态规划)
- 初学java之面板布局的控制
- 初学java之常用组件
- go语言数组的拷贝
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 剑指Offer LeetCode 面试题56 - II. 数组中数字出现的次数 II
- 站在软件工程的角度重新思考面向对象(含高清图谱)
- 剑指Offer LeetCode 面试题57. 和为s的两个数字
- 白嫖Layui树型可折叠,可自定义,可搜索表格的实例
- 剑指Offer LeetCode 面试题53 - II. 0~n-1中缺失的数字
- 聊聊dubbo-go的DubboPackage
- 剑指Offer LeetCode 面试题53 - I. 在排序数组中查找数字 I
- Java虚拟机运行时数据区精华总结
- 剑指Offer LeetCode 面试题50. 第一个只出现一次的字符
- 剑指Offer LeetCode 面试题40. 最小的k个数
- 剑指Offer LeetCode 面试题39. 数组中出现次数超过一半的数字
- 解决Ajax发送DELETE请求时后台无法接收到参数的问题(Restful风格)
- 解决layui的table数据重载reload where参数会保留上次条件的问题
- 终于弄懂了Layui表格重载数据
- 剑指Offer LeetCode 面试题21. 调整数组顺序使奇数位于偶数前面