财神道app下载最新版本-财神到购彩大厅(彩世界)

热门关键词: 财神道app下载最新版本,财神到购彩大厅

深深通晓Javascript里的依附注入

JavaScript中的依赖注入详解,javascript注入详解

计算机编程的世界其实就是一个将简单的部分不断抽象,并将这些抽象组织起来的过程。JavaScript也不例外,在我们使用JavaScript编写应用时,我们是不是都会使用到别人编写的代码,例如一些著名的开源库或者框架。随着我们项目的增长,我们需要依赖的模块变得越来越多,这个时候,如何有效的组织这些模块就成了一个非常重要的问题。依赖注入解决的正是如何有效组织代码依赖模块的问题。你可能在一些框架或者库种听说过“依赖注入”这个词,比如说著名的前端框架AngularJS,依赖注入就是其中一个非常重要的特性。但是,依赖注入根本就不是什么新鲜玩意,它在其他的编程语言例如PHP中已经存在已久。同时,依赖注入也没有想象种那样复杂。在本文中,我们将一起来学习JavaScript中的依赖注入的概念,深入浅出的讲解如何编写“依赖注入风格”的代码。

图片 1

目标设定

假设我们现在拥有两个模块。第一个模块的作用是发送Ajax请求,而第二个模块的作用则是用作路由。
复制代码 代码如下:
var service = function() {
    return { name: 'Service' };
}
var router = function() {
    return { name: 'Router' };
}

这时,我们编写了一个函数,它需要使用上面提到的两个模块:
复制代码 代码如下:
var doSomething = function(other) {
    var s = service();
    var r = router();
};

在这里,为了让我们的代码变得有趣一些,这个参数需要多接收几个参数。当然,我们完全可以使用上面的代码,但是无论从哪个方面来看上面的代码都略显得不那么灵活。要是我们需要使用的模块名称变为ServiceXML或者ServiceJSON该怎么办?或者说如果我们基于测试的目的想要去使用一些假的模块改怎么办。这时,我们不能仅仅去编辑函数本身。因此我们需要做的第一件事情就是将依赖的模块作为参数传递给函数,代码如下所示:
复制代码 代码如下:
var doSomething = function(service, router, other) {
    var s = service();
    var r = router();
};

在上面的代码中,我们完全传递了我们所需要的模块。但是这又带来了一个新的问题。假设我们在代码的哥哥部分都调用了doSomething方法。这时,如果我们需要第三个依赖项该怎么办。这个时候,去编辑所有的函数调用代码并不是一个明智的方法。因此,我们需要一段代码来帮助我们做这件事情。这就是依赖注入器试图去解决的问题。现在我们可以来定下我们的目标了:

1.我们应该能够去注册依赖项
2.依赖注入器应该接收一个函数,然后返回一个能够获取所需资源的函数
3.代码不应该复杂,而应该简单友好
4.依赖注入器应该保持传递的函数作用域
5.传递的函数应该能够接收自定义的参数,而不仅仅是被描述的依赖项

requirejs/AMD方法

或许你已经听说过了大名鼎鼎的requirejs,它是一个能够很好的解决依赖注入问题的库:
复制代码 代码如下:
define(['service', 'router'], function(service, router) {      
    // ...
});

requirejs的思想是首先我们应该去描述所需要的模块,然后编写你自己的函数。其中,参数的顺序很重要。假设我们需要编写一个叫做injector的模块,它能够实现类似的语法。
复制代码 代码如下:
var doSomething = injector.resolve(['service', 'router'], function(service, router, other) {
    expect(service().name).to.be('Service');
    expect(router().name).to.be('Router');
    expect(other).to.be('Other');
});
doSomething("Other");

在继续往下之前,需要说明的一点是在doSomething的函数体中我们使用了expect.js这个断言库来确保代码的正确性。这里有一点类似TDD(测试驱动开发)的思想。

现在我们正式开始编写我们的injector模块。首先它应该是一个单体,以便它能够在我们应用的各个部分都拥有同样的功能。
复制代码 代码如下:
var injector = {
    dependencies: {},
    register: function(key, value) {
        this.dependencies[key] = value;
    },
    resolve: function(deps, func, scope) {

    }
}

这个对象非常的简单,其中只包含两个函数以及一个用于存储目的的变量。我们需要做的事情是检查deps数组,然后在dependencies变量种寻找答案。剩余的部分,则是使用.apply方法去调用我们传递的func变量:
复制代码 代码如下:
resolve: function(deps, func, scope) {
    var args = [];
    for(var i=0; i<deps.length, d=deps[i]; i ) {
        if(this.dependencies[d]) {
            args.push(this.dependencies[d]);
        } else {
            throw new Error('Can't resolve ' d);
        }
    }
    return function() {
        func.apply(scope || {}, args.concat(Array.prototype.slice.call(arguments, 0)));
    }       
}

如果你需要指定一个作用域,上面的代码也能够正常的运行。

在上面的代码中,Array.prototype.slice.call(arguments, 0)的作用是将arguments变量转换为一个真正的数组。到目前为止,我们的代码可以完美的通过测试。但是这里的问题是我们必须要将需要的模块写两次,而且不能够随意排列顺序。额外的参数总是排在所有的依赖项之后。

反射(reflection)方法

根据维基百科中的解释,反射(reflection)指的是程序可以在运行过程中,一个对象可以修改自己的结构和行为。在JavaScript中,简单来说就是阅读一个对象的源码并且分析源码的能力。还是回到我们的doSomething方法,如果你调用doSomething.toString()方法,你可以获得下面的字符串:
复制代码 代码如下:
"function (service, router, other) {
    var s = service();
    var r = router();
}"

这样一来,只要使用这个方法,我们就可以轻松的获取到我们想要的参数,以及更重要的一点就是他们的名字。这也是AngularJS实现依赖注入所使用的方法。在AngularJS的代码中,我们可以看到下面的正则表达式:
复制代码 代码如下:
/^functions*[^(]*(s*([^)]*))/m

我们可以将resolve方法修改成如下所示的代码:

复制代码 代码如下:
resolve: function() {
    var func, deps, scope, args = [], self = this;
    func = arguments[0];
    deps = func.toString().match(/^functions*[^(]*(s*([^)]*))/m)[1].replace(/ /g, '').split(',');
    scope = arguments[1] || {};
    return function() {
        var a = Array.prototype.slice.call(arguments, 0);
        for(var i=0; i<deps.length; i ) {
            var d = deps[i];
            args.push(self.dependencies[d] && d != '' ? self.dependencies[d] : a.shift());
        }
        func.apply(scope || {}, args);
    }       
}

我们使用上面的正则表达式去匹配我们定义的函数,我们可以获取到下面的结果:
复制代码 代码如下:
["function (service, router, other)", "service, router, other"]

此时,我们只需要第二项。但是一旦我们去除了多余的空格并以,来切分字符串以后,我们就得到了deps数组。下面的代码就是我们进行修改的部分:
复制代码 代码如下:
var a = Array.prototype.slice.call(arguments, 0);
...
args.push(self.dependencies[d] && d != '' ? self.dependencies[d] : a.shift());

在上面的代码中,我们遍历了依赖项目,如果其中有缺失的项目,如果依赖项目中有缺失的部分,我们就从arguments对象中获取。如果一个数组是空数组,那么使用shift方法将只会返回undefined,而不会抛出一个错误。到目前为止,新版本的injector看起来如下所示:
复制代码 代码如下:
var doSomething = injector.resolve(function(service, other, router) {
    expect(service().name).to.be('Service');
    expect(router().name).to.be('Router');
    expect(other).to.be('Other');
});
doSomething("Other");

在上面的代码中,我们可以随意混淆依赖项的顺序。

但是,没有什么是完美的。反射方法的依赖注入存在一个非常严重的问题。当代码简化时,会发生错误。这是因为在代码简化的过程中,参数的名称发生了变化,这将导致依赖项无法解析。例如:
复制代码 代码如下:
var doSomething=function(e,t,n){var r=e();var i=t()}

因此我们需要下面的解决方案,就像AngularJS中那样:
复制代码 代码如下:
var doSomething = injector.resolve(['service', 'router', function(service, router) {

}]);

这和最一开始看到的AMD的解决方案很类似,于是我们可以将上面两种方法整合起来,最终代码如下所示:
复制代码 代码如下:
var injector = {
    dependencies: {},
    register: function(key, value) {
        this.dependencies[key] = value;
    },
    resolve: function() {
        var func, deps, scope, args = [], self = this;
        if(typeof arguments[0] === 'string') {
            func = arguments[1];
            deps = arguments[0].replace(/ /g, '').split(',');
            scope = arguments[2] || {};
        } else {
            func = arguments[0];
            deps = func.toString().match(/^functions*[^(]*(s*([^)]*))/m)[1].replace(/ /g, '').split(',');
            scope = arguments[1] || {};
        }
        return function() {
            var a = Array.prototype.slice.call(arguments, 0);
            for(var i=0; i<deps.length; i ) {
                var d = deps[i];
                args.push(self.dependencies[d] && d != '' ? self.dependencies[d] : a.shift());
            }
            func.apply(scope || {}, args);
        }       
    }
}

这一个版本的resolve方法可以接受两个或者三个参数。下面是一段测试代码:
复制代码 代码如下:
var doSomething = injector.resolve('router,,service', function(a, b, c) {
    expect(a().name).to.be('Router');
    expect(b).to.be('Other');
    expect(c().name).to.be('Service');
});
doSomething("Other");

你可能注意到了两个逗号之间什么都没有,这并不是错误。这个空缺是留给Other这个参数的。这就是我们控制参数顺序的方法。

结语

在上面的内容中,我们介绍了几种JavaScript中依赖注入的方法,希望本文能够帮助你开始使用依赖注入这个技巧,并且写出依赖注入风格的代码。

计算机编程的世界其实就是一个将简单的部分不断抽象,并将这些抽象组织起来的过程。Jav...

五、直接注入Scope
有时我会用到第三个注入变量,它涉及到操作函数的作用域(换句话说,就是this对象)。所以,很多时候不需要使用这个变量。

    dependencies: {},

然而,这种做法并不完美,这就是反射类型注射一个非常大的问题。压缩会破坏我们的逻辑,因为它改变参数的名字,我们将无法保持正确的映射关系。例如,doSometing()压缩后可能看起来像这样:

 

resolve: function() {
    var func, deps, scope, args = [], self = this;
    func = arguments[0];
    deps = func.toString().match(/^functions*[^(]*(s*([^)]*))/m)[1].replace(/ /g, '').split(',');
    scope = arguments[1] || {};
    return function() {
        var a = Array.prototype.slice.call(arguments, 0);
        for(var i=0; i<deps.length; i ) {
            var d = deps[i];
            args.push(self.dependencies[d] && d != '' ? self.dependencies[d] : a.shift());
        }
        func.apply(scope || {}, args);
    }       
}

resolve: function(deps, func, scope) {

var injector = {
    dependencies: {},
    register: function(key, value) {
        this.dependencies[key] = value;
    },
    resolve: function() {
        var func, deps, scope, args = [], self = this;
        if(typeof arguments[0] === 'string') {
            func = arguments[1];
            deps = arguments[0].replace(/ /g, '').split(',');
            scope = arguments[2] || {};
        } else {
            func = arguments[0];
            deps = func.toString().match(/^functions*[^(]*(s*([^)]*))/m)[1].replace(/ /g, '').split(',');
            scope = arguments[1] || {};
        }
        return function() {
            var a = Array.prototype.slice.call(arguments, 0);
            for(var i=0; i<deps.length; i ) {
                var d = deps[i];
                args.push(self.dependencies[d] && d != '' ? self.dependencies[d] : a.shift());
            }
            func.apply(scope || {}, args);
        }       
    }
}

        return function() {

四、反射方法
根据维基百科的定义反射是指一个程序在运行时检查和修改一个对象的结构和行为的能力。简单的说,在JavaScript的上下文里,这具体指读取和分析的对象或函数的源代码。让我们完成文章开头提到的doSomething函数。如果你在控制台输出doSomething.tostring()。你将得到如下的字符串:

    // ...

我们有另一个函数需要用到这两个模块。

    resolve: function(deps, func, scope) {

为使看起来更有趣,这函数接受一个参数。当然,我们完全可以使用上面的代码,但这显然不够灵活。如果我们想使用ServiceXML或ServiceJSON呢,或者如果我们需要一些测试模块呢。我们不能仅靠编辑函数体来解决问题。首先,我们可以通过函数的参数来解决依赖性。即:

            deps = func.toString().match(/^functions*[^(]*(s*([^)]*))/m)[1].replace(/ /g, '').split(',');

复制代码 代码如下:

这是一个非常简单的对象,有两个方法,一个用来存储的属性。我们要做的是检查deps数组并在dependencies变量中搜索答案。剩下的只是调用.apply方法并传递之前的func方法的参数。

你可能注意到在第一个参数后面有两个逗号——注意这不是笔误。空值实际上代表“Other”参数(占位符)。这显示了我们是如何控制参数顺序的。

 

复制代码 代码如下:

我们循环遍历dependencies数组,如果发现缺失项则尝试从arguments对象中获取。谢天谢地,当数组为空时,shift方法只是返回undefined,而不是抛出一个错误(这得益于web的思想)。新版的injector 能像下面这样使用:

我们执行正则表达式的结果如下:

 

复制代码 代码如下:

    }        

复制代码 代码如下:

 

复制代码 代码如下:

            }

我们循环遍历dependencies数组,如果发现缺失项则尝试从arguments对象中获取。谢天谢地,当数组为空时,shift方法只是返回undefined,而不是抛出一个错误(这得益于web的思想)。新版的injector 能像下面这样使用:

            args.push(self.dependencies[d] && d != '' ? self.dependencies[d] : a.shift());

var doSomething = injector.resolve(['service', 'router'], function(service, router, other) {
    expect(service().name).to.be('Service');
    expect(router().name).to.be('Router');
    expect(other).to.be('Other');
});

var doSomething = injector.resolve(function(service, other, router) {

...

}

我们应该能够注册依赖关系
1.注入应该接受一个函数,并返回一个我们需要的函数
2.我们不能写太多东西——我们需要精简漂亮的语法
3.注入应该保持被传递函数的作用域
4.被传递的函数应该能够接受自定义参数,而不仅仅是依赖描述
5.堪称完美的清单,下面 让我们实现它。
三、RequireJS / AMD的方法
你可能对RequireJS早有耳闻,它是解决依赖注入不错的选择。

复制代码

doSomething("Other");
再继续之前我应该解释清楚doSomething函数体内容,我使用expect.js (断言方面的库)仅是为了保证我写的代码的行为和我期望的是一样的,体现一点点TDD(测试驱动开发)方法。
下面开始我们的injector模块,这是非常棒的一个单例模式,所以它能在我们程序的不同部分工作的很好。

我们有另一个函数需要用到这两个模块。

var a = Array.prototype.slice.call(arguments, 0);
...
args.push(self.dependencies[d] && d != '' ? self.dependencies[d] : a.shift());

resolve: function() {

复制代码 代码如下:

var doSomething=function(e,t,n){var r=e();var i=t()}

var service = function() {
    return { name: 'Service' };
}
var router = function() {
    return { name: 'Router' };
}

注入应该接受一个函数,并返回一个我们需要的函数

迟早你需要用到其他开发人员的抽象成果——即你依靠别人的代码。我喜欢依赖自由(无依赖)的模块,但那是难以实现的。甚至你创建的那些漂亮的黑盒子组件也或多或少会依赖一些东西。这正是依赖注入大显身手的之处。现在有效地管理依赖的能力是绝对必要的。本文总结了我对问题探索和一些的解决方案。

        var a = Array.prototype.slice.call(arguments, 0);

复制代码 代码如下:

}

我们通过传递额外的参数来实现我们想要的功能,然而,这会带来新的问题。想象如果我们的doSomething 方法散落在我们的代码中。如果我们需要更改依赖条件,我们不可能更改所有调用函数的文件。

 

/^functions*[^(]*(s*([^)]*))/m

 

看起来,我们只需要第二项。一旦我们清楚空格并分割字符串就得到deps数组。只有一个大的改变:

            var a = Array.prototype.slice.call(arguments, 0);

复制代码 代码如下:

        var func, deps, scope, args = [], self = this;

我们所做的一切其实就是将依赖添加到作用域。这样做的好处是,开发人员不用再写依赖性参数;它们已经是函数作用域的一部分。

            deps = arguments[0].replace(/ /g, '').split(',');

六、结束语
其实我们大部分人都用过依赖注入,只是我们没有意识到。即使你不知道这个术语,你可能在你的代码里用到它百万次了。希望这篇文章能加深你对它的了解。

    }

复制代码 代码如下:

    }

一、目标
设想我们有两个模块。第一个是负责Ajax请求服务(service),第二个是路由(router)。

        } else {

define(['service', 'router'], function(service, router) {      
    // ...
});

    func = arguments[0];

复制代码 代码如下:

下面开始我们的injector模块,这是非常棒的一个单例模式,所以它能在我们程序的不同部分工作的很好。

复制代码 代码如下:

args.push(self.dependencies[d] && d != '' ? self.dependencies[d] : a.shift());

resolve访客接受两或三个参数,如果有两个参数它实际上和文章前面写的一样。然而,如果有三个参数,它会将第一个参数转换并填充deps数组,下面是一个测试例子:

    return function() {

复制代码 代码如下:

        return function() {

复制代码 代码如下:

复制代码

var doSomething = function(service, router, other) {
    var s = service();
    var r = router();
};

 

复制代码 代码如下:

    expect(c().name).to.be('Service');

复制代码 代码如下:

 

我们可以像下面这样修改resolve 的代码:

复制代码

复制代码 代码如下:

通过此方法返回的字符串给我们遍历参数的能力,更重要的是,能够获取他们的名字。这其实是Angular 实现它的依赖注入的方法。我偷了一点懒,直接截取Angular代码中获取参数的正则表达式。

var doSomething=function(e,t,n){var r=e();var i=t()}
Angular团队提出的解决方案看起来像:

});

"function (service, router, other) {
    var s = service();
    var r = router();
}"

 

这是一个非常简单的对象,有两个方法,一个用来存储的属性。我们要做的是检查deps数组并在dependencies变量中搜索答案。剩下的只是调用.apply方法并传递之前的func方法的参数。

}

scope是可选的,Array.prototype.slice.call(arguments, 0)是必须的,用来将arguments变量转换为真正的数组。到目前为止还不错。我们的测试通过了。这种实现的问题是,我们需要写所需部件两次,并且我们不能混淆他们的顺序。附加的自定义参数总是位于依赖之后。

var doSomething = injector.resolve(['service', 'router'], function(other) {

resolve: function(deps, func, scope) {
    var args = [];
    for(var i=0; i<deps.length, d=deps[i]; i ) {
        if(this.dependencies[d]) {
            args.push(this.dependencies[d]);
        } else {
            throw new Error('Can't resolve ' d);
        }
    }
    return function() {
        func.apply(scope || {}, args.concat(Array.prototype.slice.call(arguments, 0)));
    }       
}

/^functions*[^(]*(s*([^)]*))/m

var doSomething = injector.resolve(['service', 'router'], function(other) {
    expect(this.service().name).to.be('Service');
    expect(this.router().name).to.be('Router');
    expect(other).to.be('Other');
});
doSomething("Other");

            }

var injector = {
    dependencies: {},
    register: function(key, value) {
        this.dependencies[key] = value;
    },
    resolve: function(deps, func, scope) {
        var args = [];
        scope = scope || {};
        for(var i=0; i<deps.length, d=deps[i]; i ) {
            if(this.dependencies[d]) {
                scope[d] = this.dependencies[d];
            } else {
                throw new Error('Can't resolve ' d);
            }
        }
        return function() {
            func.apply(scope || {}, Array.prototype.slice.call(arguments, 0));
        }       
    }
}

var doSomething = injector.resolve(['service', 'router', function(service, router) {

通过此方法返回的字符串给我们遍历参数的能力,更重要的是,能够获取他们的名字。这其实是Angular 实现它的依赖注入的方法。我偷了一点懒,直接截取Angular代码中获取参数的正则表达式。

    var r = router();

复制代码 代码如下:

    var s = service();

这看起来很像我们开始时的解决方案。我没能找到一个更好的解决方案,所以决定结合这两种方法。下面是injector的最终版本。

我们应该能够注册依赖关系

复制代码 代码如下:

 

}]);

我们执行正则表达式的结果如下:

var doSomething = injector.resolve(['service', 'router', function(service, router) {

        }

不必重写依赖并且他们的顺序可以打乱。它仍然有效,我们成功复制了Angular的魔法。

    var r = router();

var injector = {
    dependencies: {},
    register: function(key, value) {
        this.dependencies[key] = value;
    },
    resolve: function(deps, func, scope) {

复制代码

我们需要一个能帮我们搞定这些的工具。这就是依赖注入尝试解决的问题。让我们写下一些我们的依赖注入解决办法应该达到的目标:

    expect(router().name).to.be('Router');

这种想法是先描述需要的依赖,然后再写你的函数。这里参数的顺序很重要。如上所说,让我们写一个叫做injector的模块,能接受相同的语法。

    }

var doSomething = injector.resolve('router,,service', function(a, b, c) {
    expect(a().name).to.be('Router');
    expect(b).to.be('Other');
    expect(c().name).to.be('Service');
});
doSomething("Other");

    expect(this.service().name).to.be('Service');

    }
}

我们可以像下面这样修改resolve 的代码:

var doSomething = function(other) {
    var s = service();
    var r = router();
};

 

["function (service, router, other)", "service, router, other"]

 

var doSomething = injector.resolve(function(service, other, router) {
    expect(service().name).to.be('Service');
    expect(router().name).to.be('Router');
    expect(other).to.be('Other');
});
doSomething("Other");

var doSomething = function(service, router, other) {

            func.apply(scope || {}, Array.prototype.slice.call(arguments, 0));

 

复制代码

});

        func.apply(scope || {}, args);

});

        func.apply(scope || {}, args.concat(Array.prototype.slice.call(arguments, 0)));

        }

 

    }

    expect(a().name).to.be('Router');

RequireJS / AMD的方法

复制代码

为使看起来更有趣,这函数接受一个参数。当然,我们完全可以使用上面的代码,但这显然不够灵活。如果我们想使用ServiceXML或ServiceJSON呢,或者如果我们需要一些测试模块呢。我们不能仅靠编辑函数体来解决问题。首先,我们可以通过函数的参数来解决依赖性。即:

 

            func = arguments[0];

        }        

    expect(service().name).to.be('Service');

            func = arguments[1];

 

            func.apply(scope || {}, args);

 

var doSomething = injector.resolve(['service', 'router'], function(service, router, other) {

在这篇文章中提到的例子都可以在这里找到。

复制代码

        this.dependencies[key] = value;

    var func, deps, scope, args = [], self = this;

    return function() {

 

反射方法

    },

                scope[d] = this.dependencies[d];

我喜欢引用这句话,“程序是对复杂性的管理”。计算机世界是一个巨大的抽象建筑群。我们简单的包装一些东西然后发布新工具,周而复始。现在思考下,你所使用的语言包括的一些内建的抽象函数或是低级操作符。这在JavaScript里是一样的。

scope是可选的,Array.prototype.slice.call(arguments, 0)是必须的,用来将arguments变量转换为真正的数组。到目前为止还不错。我们的测试通过了。这种实现的问题是,我们需要写所需部件两次,并且我们不能混淆他们的顺序。附加的自定义参数总是位于依赖之后。

    var s = service();

我们不能写太多东西——我们需要精简漂亮的语法

define(['service', 'router'], function(service, router) {       

            } else {

    dependencies: {},

有时我会用到第三个注入变量,它涉及到操作函数的作用域(换句话说,就是this对象)。所以,很多时候不需要使用这个变量。

        } else {

    resolve: function() {

var injector = {

 

 

                args.push(self.dependencies[d] && d != '' ? self.dependencies[d] : a.shift());

再继续之前我应该解释清楚doSomething函数体内容,我使用expect.js (断言方面的库)仅是为了保证我写的代码的行为和我期望的是一样的,体现一点点TDD(测试驱动咖开发)方法。

设想我们有两个模块。第一个是负责Ajax请求服务(service),第二个是路由(router)。

目标

这种想法是先描述需要的依赖,然后再写你的函数。这里参数的顺序很重要。如上所说,让我们写一个叫做injector的模块,能接受相同的语法。

我们通过传递额外的参数来实现我们想要的功能,然而,这会带来新的问题。想象如果我们的doSomething 方法散落在我们的代码中。如果我们需要更改依赖条件,我们不可能更改所有调用函数的文件。

    return { name: 'Router' };

}

        }

var router = function() {

}

});

...

        }

    var r = router();

 

 

    var args = [];

        this.dependencies[key] = value;

深深通晓Javascript里的依附注入。复制代码

}"

你可能对RequireJS早有耳闻,它是解决依赖注入不错的选择。

迟早你需要用到其他开发人员的抽象成果——即你依靠别人的代码。我喜欢依赖自由(无依赖)的模块,但那是难以实现的。甚至你创建的那些漂亮的黑盒子组件也或多或少会依赖一些东西。这正是依赖注入大显身手的之处。现在有效地管理依赖的能力是绝对必要的。本文总结了我对问题探索和一些的解决方案。

    expect(router().name).to.be('Router');

["function (service, router, other)", "service, router, other"]

    resolve: function(deps, func, scope) {

    expect(other).to.be('Other');

这看起来很像我们开始时的解决方案。我没能找到一个更好的解决方案,所以决定结合这两种方法。下面是injector的最终版本。

var doSomething = function(other) {

            for(var i=0; i<deps.length; i ) {

复制代码

doSomething("Other");

    for(var i=0; i<deps.length, d=deps[i]; i ) {

}

    expect(service().name).to.be('Service');

});

        var args = [];

    expect(other).to.be('Other');

Angular团队提出的解决方案看起来像:

doSomething("Other");

 

    },

            scope = arguments[2] || {};

var a = Array.prototype.slice.call(arguments, 0);

var doSomething = injector.resolve('router,,service', function(a, b, c) {

            if(this.dependencies[d]) {

    expect(b).to.be('Other');

                var d = deps[i];

resolve访客接受两或三个参数,如果有两个参数它实际上和文章前面写的一样。然而,如果有三个参数,它会将第一个参数转换并填充deps数组,下面是一个测试例子:

我们需要一个能帮我们搞定这些的工具。这就是依赖注入尝试解决的问题。让我们写下一些我们的依赖注入解决办法应该达到的目标:

var injector = {

根据维基百科的定义反射是指一个程序在运行时检查和修改一个对象的结构和行为的能力。简单的说,在JavaScript的上下文里,这具体指读取和分析的对象或函数的源代码。让我们完成文章开头提到的doSomething函数。如果你早控制台输出doSomething.tostring()日志。你将得到如下的字符串:

不必重写依赖并且他们的顺序可以打乱。它仍然有效,我们成功复制了Angular的魔法。

            throw new Error('Can't resolve ' d);

堪称完美的清单,下面 让我们实现它。

        if(typeof arguments[0] === 'string') {

var service = function() {

 

 

    register: function(key, value) {

    deps = func.toString().match(/^functions*[^(]*(深深通晓Javascript里的依附注入。s*([^)]*))/m)[1].replace(/ /g, '').split(',');

复制代码

    return { name: 'Service' };

                throw new Error('Can't resolve ' d);

    register: function(key, value) {

然而,这种做法并不完美,这就是反射类型注射一个非常大的问题。压缩会破坏我们的逻辑,因为它改变参数的名字,我们将无法保持正确的映射关系。例如,doSometing()压缩后可能看起来像这样:

doSomething("Other");

    }        

其实我们大部分人都用过依赖注入,只是我们没有意识到。即使你不知道这个术语,你可能在你的代码里用到它百万次了。希望这篇文章能加深你对它的了解。

        for(var i=0; i<deps.length; i ) {

        }        

        this.dependencies[key] = value;

    expect(other).to.be('Other');

    scope = arguments[1] || {};

    expect(this.router().name).to.be('Router');

看起来,我们只需要第二项。一旦我们清楚空格并分割字符串就得到deps数组。只有一个大的改变:

    dependencies: {},

}

 

被传递的函数应该能够接受自定义参数,而不仅仅是依赖描述

 

 

            args.push(this.dependencies[d]);

    register: function(key, value) {

            var d = deps[i];

var injector = {

你可能注意到在第一个参数后面有两个逗号——注意这不是笔误。空值实际上代表“Other”参数(占位符)。这显示了我们是如何控制参数顺序的。

        if(this.dependencies[d]) {

 

...

    },

我们所做的一切其实就是将依赖添加到作用域。这样做的好处是,开发人员不用再写依赖性参数;它们已经是函数作用域的一部分。

 

    var s = service();

};

 

        scope = scope || {};

结束语

 

doSomething("Other");

 

 

            scope = arguments[1] || {};

};

"function (service, router, other) {

注入应该保持被传递函数的作用域

直接注入Scope

 

 

}]);

        for(var i=0; i<deps.length, d=deps[i]; i ) {

本文由财神道app下载最新版本发布于web前端,转载请注明出处:深深通晓Javascript里的依附注入