JavaScript中实现依赖注入的思路分享


Posted in Javascript onJanuary 15, 2015

如今各个框架都在模块化,连前端的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();

控制台成功打印!
Javascript 相关文章推荐
js实现iframe动态调整高度的代码
Jan 06 Javascript
jQuery 获取对象 根据属性、内容匹配, 还有表单元素匹配
May 31 Javascript
js Form.elements[i]的使用实例
Nov 13 Javascript
javascript学习笔记(十三) js闭包介绍(转)
Jun 20 Javascript
javascript计算星座属相(十二生肖属相)示例代码
Jan 09 Javascript
js实现全国省份城市级联下拉菜单效果代码
Sep 07 Javascript
jQuery使用cookie与json简单实现购物车功能
Apr 15 Javascript
Bootstrap基本插件学习笔记之折叠(22)
Dec 08 Javascript
基于JavaScript实现自动更新倒计时效果
Dec 19 Javascript
Bootstrap源码解读按钮(5)
Dec 23 Javascript
canvas+gif.js打造自己的数字雨头像的示例代码
Oct 26 Javascript
react native 获取地理位置的方法示例
Aug 28 Javascript
jquery实现textarea输入框限制字数的方法
Jan 15 #Javascript
28个常用JavaScript方法集锦
Jan 14 #Javascript
jquery单选框radio绑定click事件实现方法
Jan 14 #Javascript
jquery移动节点实例
Jan 14 #Javascript
jquery获取checkbox的值并post提交
Jan 14 #Javascript
js打造数组转json函数
Jan 14 #Javascript
使用jquery 简单实现下拉菜单
Jan 14 #Javascript
You might like
php实现等比例不失真缩放上传图片的方法
2016/11/14 PHP
wordpress自定义标签云与随机获取标签的方法详解
2019/03/22 PHP
运用Windows XP附带的Msicuu.exe、Msizap.exe来彻底卸载顽固程序
2007/04/21 Javascript
javascript最常用与实用的创建类的代码
2010/08/12 Javascript
JQuery浮动DIV提示信息并自动隐藏的代码
2010/08/29 Javascript
跨浏览器通用、可重用的选项卡tab切换js代码
2011/09/20 Javascript
js控制不同的时间段显示不同的css样式的实例代码
2013/11/04 Javascript
javascript学习笔记(二)数组和对象部分
2014/09/30 Javascript
Node.js实现的简易网页抓取功能示例
2014/12/05 Javascript
jQuery中:button选择器用法实例
2015/01/04 Javascript
基于javascript实现样式清新图片轮播特效
2016/03/30 Javascript
jQuery之动画效果大全
2016/11/09 Javascript
使用JavaScript实现点击循环切换图片效果
2017/09/03 Javascript
javascript Function函数理解与实战
2017/12/01 Javascript
JavaScript基于数组实现的栈与队列操作示例
2018/12/22 Javascript
全面了解python字符串和字典
2016/07/07 Python
numpy中矩阵合并的实例
2018/06/15 Python
Python 数据库操作 SQLAlchemy的示例代码
2019/02/18 Python
python三大神器之fabric使用教程
2019/06/10 Python
详解Python中的正斜杠与反斜杠
2019/08/09 Python
pygame实现俄罗斯方块游戏(AI篇1)
2019/10/29 Python
Python-openCV读RGB通道图实例
2020/01/17 Python
Django 解决上传文件时,request.FILES为空的问题
2020/05/20 Python
Python如何安装第三方模块
2020/05/28 Python
Python爬虫爬取微博热搜保存为 Markdown 文件的源码
2021/02/22 Python
Django实现简单的分页功能
2021/02/22 Python
顶丰TOPPIK台湾官网:增发纤维假发,告别秃发困扰
2018/06/13 全球购物
关于礼仪的演讲稿
2014/01/04 职场文书
敬老院活动总结
2014/04/28 职场文书
减负增效提质方案
2014/05/23 职场文书
拔河比赛口号
2014/06/10 职场文书
交通运输局四风问题对照检查材料思想汇报
2014/10/09 职场文书
初中生散播谣言检讨书
2014/11/17 职场文书
个性与发展自我评价
2015/03/06 职场文书
个人维稳承诺书
2015/05/04 职场文书
2016读书月活动心得体会
2016/01/14 职场文书