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 相关文章推荐
三种检测iPhone/iPad设备方向的方法
Apr 23 Javascript
jQuery实现滚动切换的tab选项卡效果代码
Aug 26 Javascript
jQuery form插件的使用之处理server返回的JSON, XML,HTML数据
Jan 26 Javascript
node.js实现的装饰者模式示例
Sep 06 Javascript
Vue.js在数组中插入重复数据的实现代码
Nov 17 Javascript
react学习笔记之state以及setState的使用
Dec 07 Javascript
详解React-Router中Url参数改变页面不刷新的解决办法
May 08 Javascript
Vue+mui实现图片的本地缓存示例代码
May 24 Javascript
vue踩坑记-在项目中安装依赖模块npm install报错
Apr 02 Javascript
详解wepy开发小程序踩过的坑(小结)
May 22 Javascript
通过jQuery学习js类型判断的技巧
May 27 jQuery
vue 实现setInterval 创建和销毁实例
Jul 21 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
yii的CURD操作实例详解
2014/12/04 PHP
php输出指定时间以前时间格式的方法
2015/03/21 PHP
Yii框架中sphinx索引配置方法解析
2016/10/18 PHP
详解EventDispatcher事件分发组件
2016/12/25 PHP
PHP验证终端类型是否为手机的简单实例
2017/02/07 PHP
利用PHP如何统计Nginx日志的User Agent数据
2019/03/06 PHP
使用PHPUnit进行单元测试并生成代码覆盖率报告的方法
2019/03/08 PHP
Gambit vs ForZe BO3 第二场 2.13
2021/03/10 DOTA
Javascript代码混淆综合解决方案-Javascript在线混淆器
2006/12/18 Javascript
通过JS来判断页面控件是否获取焦点
2014/01/03 Javascript
解决bootstrap中modal遇到Esc键无法关闭页面
2015/03/09 Javascript
详解JavaScript中jQuery和Ajax以及JSONP的联合使用
2015/08/13 Javascript
bootstrap modal弹出框的垂直居中
2016/12/14 Javascript
js 博客内容进度插件详解
2017/02/19 Javascript
AngularJS中filter的使用实例详解
2017/08/25 Javascript
vue实现消息的无缝滚动效果的示例代码
2017/12/05 Javascript
官方推荐react-navigation的具体使用详解
2018/05/08 Javascript
js生成1到100的随机数最简单的实现方法
2020/02/07 Javascript
在Vuex中Mutations修改状态操作
2020/07/24 Javascript
JavaScript中EventBus实现对象之间通信
2020/10/18 Javascript
详解vite+ts快速搭建vue3项目以及介绍相关特性
2021/02/25 Vue.js
[01:03:37]Secret vs VGJ.S Supermajor小组赛C组 BO3 第二场 6.3
2018/06/04 DOTA
Python读写文件方法总结
2015/06/09 Python
Python实现高效求解素数代码实例
2015/06/30 Python
使用Python对SQLite数据库操作
2017/04/06 Python
解决pandas使用read_csv()读取文件遇到的问题
2018/06/15 Python
python实现泊松图像融合
2018/07/26 Python
pycharm新建一个python工程步骤
2019/07/16 Python
Django app配置多个数据库代码实例
2019/12/17 Python
澳大利亚领先的睡衣品牌:Peter Alexander
2016/08/16 全球购物
医学院校毕业生自荐信范文
2014/01/01 职场文书
高二地理教学反思
2014/01/24 职场文书
教师自我反思材料
2014/02/14 职场文书
优秀学生获奖感言
2014/02/15 职场文书
公司活动方案范文
2014/03/06 职场文书
2015年学校总务工作总结
2015/07/20 职场文书