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();

控制台成功打印！

赞 (0)

相关推荐

  • 详解Angularjs中的依赖注入

    一个对象通常有三种方式可以获得对其依赖的控制权: 在内部创建依赖: 通过全局变量进行引用: 在需要的地方通过参数进行传递 依赖注入是通过第三种方式实现的.比如: function SomeClass(greeter) { this.greeter = greeter; } SomeClass.prototype.greetName = function(name) { this.greeter.greet(name); }; SomeClass能够在运行时访问到内部的greeter,但它并不关心

  • AngularJs动态加载模块和依赖注入详解

    废话不多说,进入正题... 首先我们看下文件结构: Angular-ocLazyLoad --- demo文件夹 Scripts --- 框架及插件文件夹 angular-1.4.7 --- angular 不解释 angular-ui-router --- uirouter 不解释 oclazyload --- ocLazyload 不解释 bootstrap --- bootstrap 不解释 angular-tree-control-master --- angular-tree-cont

  • 深入理解Javascript里的依赖注入

    迟早你需要用到其他开发人员的抽象成果--即你依靠别人的代码.我喜欢依赖自由(无依赖)的模块,但那是难以实现的.甚至你创建的那些漂亮的黑盒子组件也或多或少会依赖一些东西.这正是依赖注入大显身手的之处.现在有效地管理依赖的能力是绝对必要的.本文总结了我对问题探索和一些的解决方案. 一.目标设想我们有两个模块.第一个是负责Ajax请求服务(service),第二个是路由(router). 复制代码 代码如下: var service = function() {    return { name: '

  • Javascript技术栈中的四种依赖注入详解

    Javascript技术栈中的四种依赖注入详解

    作为面向对象编程中实现控制反转(Inversion of Control,下文称IoC)最常见的技术手段之一,依赖注入(Dependency Injection,下文称DI)可谓在OOP编程中大行其道经久不衰.比如在J2EE中,就有大名鼎鼎的执牛耳者Spring.Javascript社区中自然也不乏一些积极的尝试,广为人知的AngularJS很大程度上就是基于DI实现的.遗憾的是,作为一款缺少反射机制.不支持Annotation语法的动态语言,Javascript长期以来都没有属于自己的Spri

  • JavaScript中的依赖注入详解

    JavaScript中的依赖注入详解

    计算机编程的世界其实就是一个将简单的部分不断抽象,并将这些抽象组织起来的过程.JavaScript也不例外,在我们使用JavaScript编写应用时,我们是不是都会使用到别人编写的代码,例如一些著名的开源库或者框架.随着我们项目的增长,我们需要依赖的模块变得越来越多,这个时候,如何有效的组织这些模块就成了一个非常重要的问题.依赖注入解决的正是如何有效组织代码依赖模块的问题.你可能在一些框架或者库种听说过"依赖注入"这个词,比如说著名的前端框架AngularJS,依赖注入就是其中一个非常

  • 浅析Node.js中使用依赖注入的相关问题及解决方法

    最近,我转向使用依赖注入来帮助理解分离代码的简单途径,并有助测试.然而,Node.js中的模块依赖Node提供的系统API,这很难判断私有依赖被恰当的使用.一般的依赖注入很难在这种情况下使用,但现在不要放弃希望. requireCauses 问题 Node.js很容易依照需求导入依赖.它运行的很好,并且比AMD模式加载器例如RequireJS要简单.当我们模拟那些依赖的时候问题就来了.如果Node.js中模型的加载是受控的,我们怎么做才能控制让伪对象在测试期间被使用到?我们可以使用Node的vm

  • Javascript技术栈中的四种依赖注入小结

    作为面向对象编程中实现控制反转(Inversion of Control,下文称IoC)最常见的技术手段之一,依赖注入(Dependency Injection,下文称DI)可谓在OOP编程中大行其道经久不衰.比如在J2EE中,就有大名鼎鼎的执牛耳者Spring.Javascript社区中自然也不乏一些积极的尝试,广为人知的AngularJS很大程度上就是基于DI实现的.遗憾的是,作为一款缺少反射机制.不支持Annotation语法的动态语言,Javascript长期以来都没有属于自己的Spri

  • 如何用js 实现依赖注入的思想，后端框架思想搬到前端来

    如何用js 实现依赖注入的思想，后端框架思想搬到前端来

    大家在做些页面的时候,很多都是用ajax实现的,在显示的时候有很多表单提交的add或者update操作,显然这样很烦,突然想到了一个比较好的方法,下面给大家分享下如何用js 实现依赖注入的思想,后端框架思想搬到前端来. 应用场景: 前后端一一对应.表单内容保存.列表陈述等. 架构思路: 分发器.依赖注入等. 基本代码陈述: j.extend({ dispatcher: (function () { var _route = {}, // default module _module = { //

  • 详解AngularJS中的依赖注入机制

    详解AngularJS中的依赖注入机制

    依赖注入是一个在组件中给出的替代了硬的组件内的编码它们的依赖关系的软件设计模式.这减轻一个组成部分,从定位的依赖,依赖配置.这有助于使组件可重用,维护和测试. AngularJS提供了一个至高无上的依赖注入机制.它提供了一个可注入彼此依赖下列核心组件. 值 工厂 服务 提供者 常值 值 值是简单的JavaScript对象,它是用来将值传递过程中的配置相位控制器. //define a module var mainApp = angular.module("mainApp", []);

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

    如今各个框架都在模块化,连前端的javascript也不例外.每个模块负责一定的功能,模块与模块之间又有相互依赖,那么问题来了:javascript的依赖注入如何实现?(javascript的依赖注入,各大框架都有相应的实现,这里只学习实现思路) 如下需求: 假设已经有定义好的服务模块Key-Value集合,func为添加的新服务,参数列表为服务依赖项. 复制代码 代码如下: var services = { abc : 123, def : 456, ghi : 789 }; // 假设已定义

  • JavaScript反射与依赖注入实例详解

    本文实例讲述了JavaScript反射与依赖注入.分享给大家供大家参考,具体如下: 对于javascript中的反射的理解,一直都是认为,利用数组对回调函数进行保存,之后在适当的时刻利用call或是apply 方法,对回调进行调用即可,一般如下操作: 首先定义两个方法: var service = function() { return { name: 'Service' }; } var router = function() { return { name: 'Router' }; } 我们

  • JavaScript中Require调用js的实例分享

    在我最初开始写 JavaScript 函数时,通常是这样的: function fun1() { // some code here } function fun2() { // some other code here } ... 函数全写在全局环境中,项目很小时,通常不会有什么冲突问题. 但代码多了后,渐渐就发现,函数名称(英文词汇)有点不够用了.于是引入命名空间的概念,开始模块化代码. 命名空间下的函数 在命名空间下,我的代码这样写: var com = com || {}; com.zf

  • 理解Spring中的依赖注入和控制反转

    理解Spring中的依赖注入和控制反转

    学习过Spring框架的人一定都会听过Spring的IoC(控制反转) .DI(依赖注入)这两个概念,对于初学Spring的人来说,总觉得IoC .DI这两个概念是模糊不清的,是很难理解的,今天和大家分享网上的一些技术大牛们对Spring框架的IOC的理解以及谈谈我对Spring Ioc的理解. IoC是什么 Ioc-InversionofControl,即"控制反转",不是什么技术,而是一种设计思想.在Java开发中,Ioc意味着将你设计好的对象交给容器控制,而不是传统的在你的对象内

  • php中的依赖注入实例详解

    本文实例讲述了php中的依赖注入.分享给大家供大家参考,具体如下: 依赖注入是一种允许我们从硬编码的依赖中解耦出来,从而在运行时或者编译时能够修改的软件设计模式. 我到现在依然不大明白上面"依赖注入"的定义是什么-- 有兴趣可以参考下<PHP之道>上面对"依赖注入"的 解释. http://laravel-china.github.io/php-the-right-way/#dependency_injection 简而言之就是可以让我们在类的方法中更加

  • 详解ASP.NET Core 在 JSON 文件中配置依赖注入

    详解ASP.NET Core 在 JSON 文件中配置依赖注入

    前言 在上一篇文章中写了如何在MVC中配置全局路由前缀,今天给大家介绍一下如何在在 json 文件中配置依赖注入. 在以前的 ASP.NET 4+ (MVC,Web Api,Owin,SingalR等)时候,都是提供了专有的接口以供使用第三方的依赖注入组件,比如我们常用的会使用 Autofac.Untiy.String.Net 等,这些第三放依赖注入组件基本上都提供了一套配置注入或者配置生命周期的方式,除了直接配置到类里面之外,还提供了要么使用 xml 文件,要么使用 json 等,那么在新的

  • 深入理解Angular4中的依赖注入

    在Angular中使用依赖注入,可以帮助我们实现松耦合,可以说只有在组件中使用依赖注入才能真正的实现可重用的组件. 如果我们有个服务product.service.ts,其中export了一个ProductService类,类中有一个getProduct方法. 如果不使用依赖注入,假设我们需要在product组件中使用这个服务时就会new一个ProductService类,但如果这个组件被用到了另一个地方,需要的服务改变了,我们就不得不更改组件中的内容,这样的组件不能说是可复用的. 一.注入器

  • React 源码中的依赖注入方法

    React 源码中的依赖注入方法

    一.前言 依赖注入(Dependency Injection)这个概念的兴起已经有很长时间了,把这个概念融入到框架中达到出神入化境地的,非Spring莫属.然而在前端领域,似乎很少会提到这个概念,难道前端的代码就不需要解耦吗?前端的代码就没有依赖了?本文将以 React 的源码为例子,看看它是如何使用依赖注入这一设计模式的. 二.依赖注入的基本概念 在看代码之前,有必要先简单介绍一下依赖注入的基本概念.依赖注入和控制反转(Inversion of Control),这两个词经常一起出现.一句话表

  • 详解C#中的依赖注入和IoC容器

    详解C#中的依赖注入和IoC容器

    在本文中,我们将通过用C#重构一个非常简单的代码示例来解释依赖注入和IoC容器. 简介: 依赖注入和IoC乍一看可能相当复杂,但它们非常容易学习和理解. 在本文中,我们将通过在C#中重构一个非常简单的代码示例来解释依赖注入和IoC容器. 要求: 构建一个允许用户查看可用产品并按名称搜索产品的应用程序. 第一次尝试: 我们将从创建分层架构开始.使用分层架构有多个好处,但我们不会在本文中列出它们,因为我们关注的是依赖注入. 下面是应用程序的类图: 首先,我们将从创建一个Product类开始: pub

随机推荐