AngularJs Dependency Injection（DI，依赖注入）

站长资源 2024/11/30 佚名

2 0 1

一、Dependency Injection（依赖注入）

　　依赖注入（DI）是一个软件设计模式，处理代码如何得到它所依赖的资源。

　　关于DI更深层次的讨论，可以参观Dependency Injection（http://en.wikipedia.org/wiki/Dependency_injection），Inversion of Control（http://martinfowler.com/articles/injection.html），也可以参观软件设计模式的书。

　　1. DI in a nutshell（简说DI）

　　object或者function，只能够通过以下三种方式获取他们依赖的资源：

　　　　1) 可以通过new运算符创建依赖的资源。

　　　　2) 可以通过全局变量查找依赖的资源。

　　　　3) 可以通过参数传入依赖的资源。

　　1、2两种方式，并不是最佳的，因为它们对依赖关系进行hard code，这使得修改依赖关系时，不是不可能，但会变得比较复杂。这对于测试来说尤其是个问题，通常在独立测试时，希望能够提供模拟的依赖资源。

　　第3种方法相对来说最可行，因为它去除了从组件（component）中定位依赖的责任。依赖仅仅交给组件就可以了。

function SomeClass(greeter) {
   this.greeter = greeter
}

SomeClass.prototype.doSomething = function(name) {
   this.greeter.greet(name);
}

　　上面的例子，SomeClass不用关心定位greeter这个依赖，它仅仅在运行时传递greeter。

　　这样是比较合适的，但它将获取依赖资源的责任交给了负责构建SomeClass的代码那里。

　　为了管理创建依赖的责任，每一个angular应用都有一个injector（http://code.angularjs.org/1.0.2/docs/api/angular.injector）。injector是一个服务定位器，负责定位并创建依赖的资源。

　　请求依赖，解决了hard code的问题，但它意味着injector需要贯穿整个应用。传递injector，会破坏Law of Demeter（http://baike.baidu.com/view/823220.htm）。为了纠正这个问题，我们将依赖查找的责任转给injector。

　　上面说了那么多，看看下面经我修改过的例子，合并了原文的两个例子，分别在angular内、外使用inject：

<!DOCTYPE HTML>
<html lang="zh-cn" ng-app="MainApp">
<head>
  <meta charset="UTF-8">
  <title>injector</title>
</head>
<body>
<div ng-controller="MyController">
  <button ng-click="sayHello()">Say Hello</button>
</div>
<script src="/UploadFiles/2021-04-02/angular-1.0.1.js">

　注意，因为有ng-controller，初始化了MyController，它可以满足MyController的所有依赖需要，让MyController无须知道injector的存在。这是一个最好的结果。应用代码简单地请求它所需要的依赖而不需要处理injector。这样设置，不会打破Law of Demeter。
二、Dependency Annotation（依赖注释，说明依赖的方式）
　　injector如何知道什么服务需要被注入呢？
　　应用开发者需要提供被injector用作解决依赖关系的注释信息。所有angular已有的API函数，都引用了injector，每一个文档中提及的API都是这样。下面是用服务名称信息注释我们的代码的三个等同的方法。
　　1. Inferring Dependencies（隐含依赖）
　　这是获取依赖资源的最简单的方式，但需要假定function的参数名称与依赖资源的名称一致。


function MyController($scope, greeter) {
   ...
}



　　函数的injector，可以通过检查函数定义并提取函数名称，猜测需要注入的service的名称（functionName.toString()，RegExp）。在上面的例子中，$scope和greeter是两个需要被注入到函数的服务（名称也一致）。


　　虽然这样做很简单，但这方法在javascript混淆压缩后就行不通了，因为参数名称会被改变。这让这个方式只能对pretotyping（产品可用性原型模拟测试法，http://www.pretotyping.org/，http://tech.qq.com/a/20120217/000320.htm）和demo应用有作用。
　　2. $inject Annotation（$inject注释）
　　为了允许脚本压缩器重命名函数的方法后，仍然能够注入正确的服务，函数必须通过$inject属性来注释依赖。$inject属性是一个需要注入的服务的名称的数组。




var MyController = function(renamed$scope, renamedGreeter) {

   ...

}
//这里依赖的东东，如果不在当前的module中，它还是不认识的。
//需要在当前module中先依赖对应的module。跟之前的例子差不多。但我不知道这是不是正确的方法。
MyController.$inject = ['$scope', 'greeter'];




　　需要小心的是，$inject的顺序需要与函数声明的参数顺序保持一致。


　　这个注释方法，对于controller声明来说是有用的，因为它与函数一起指定注释信息。
　　3. inline Annotation（行内注释）
　　有时候，不方便使用$inject注释的方式，例如注释directive的时候。
　　例如：


someModule.factory('greeter', function($window) {

  ...;

});




　　因为需要临时变量（防止压缩后不能使用），所以代码会膨胀为：




var greeterFactory = function(renamed$window) {
  ...;
};
greeterFactory.$inject = ['$window'];
someModule.factory('greeter', greeterFactory);



　　由于这样（代码膨胀），angular还提供了第三种注释风格：


someModule.factory('greeter', ['$window', function(renamed$window) {
   ...;
}]);



　　记住，所有注释风格都是等价的，可以被用在支持injection的angular中的任何地方。


三、Where can I user DI？
　　DI遍及整个angular。它通常使用在controller和factory方法中。
　　1. DI in controllers
　　controller是负责（描述）应用行为的类。建议的controller声明方法是：




var MyController = function(dep1, dep2) {
   ...
}
MyController.$inject = ['dep1', 'dep2'];
MyController.prototype.aMethod = function() {
   ...
}



　　2. Factory methods


　　factory方法是负责创建大多数angular对象。例如directive、service、filter。factory方法注册在module中，建议的factory声明方法是：


angualar.module('myModule', []).
  config(['depProvider', function(depProvider){
  　　...
  }]).
  factory('serviceId', ['depService', function(depService) {
  　　...
  }]).
  directive('directiveName', ['depService', function(depService) {
  　　...
  }]).
  filter('filterName', ['depService', function(depService) {
  　　...
  }]).
  run(['depService', function(depService) {
  　　...
}]);



      以上就是对AngularJS Dependency Injection 的资料整理后续继续补充，谢谢大家对本站的支持！

AngularJs,Dependency,Injection,依赖注入,AngularJs,依赖注入

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

评论“AngularJs Dependency Injection（DI，依赖注入）”

暂无评论...

www.wwsws.com 伏龙阁资源网

39,976影音资源

44,792技术资源

21,817软件资源

651,128站长资源

RTX 5090要首发性能要翻倍！三星展示GDDR7显存

三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。

首次推出的GDDR7内存模块密度为16GB，每个模块容量为2GB。其速度预设为32 Gbps（PAM3），但也可以降至28 Gbps，以提高产量和初始阶段的整体性能和成本效益。
据三星表示，GDDR7内存的能效将提高20%，同时工作电压仅为1.1V，低于标准的1.2V。通过采用更新的封装材料和优化的电路设计，使得在高速运行时的发热量降低，GDDR7的热阻比GDDR6降低了70%。

更新日志

2024年11月30日

AngularJs Dependency Injection（DI，依赖注入）

浅谈js中StringBuffer类的实现方法及使用

js实现String.Fomat的实例代码

评论“AngularJs Dependency Injection（DI，依赖注入）”

RTX 5090要首发性能要翻倍！三星展示GDDR7显存

更新日志

友情链接

AngularJs Dependency Injection（DI，依赖注入）

浅谈js中StringBuffer类的实现方法及使用

js实现String.Fomat的实例代码

评论“AngularJs Dependency Injection（DI，依赖注入）”

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

更新日志

友情链接

RTX 5090要首发性能要翻倍！三星展示GDDR7显存