AngularJS应用开发思维之依赖注入3


Posted in Javascript onAugust 19, 2016

找不到的API?
AngularJS提供了一些功能的封装,但是当你试图通过全局对象angular去 访问这些功能时,却发现与以往遇到的库大不相同。

$http
比如,在jQuery中,我们知道它的API通过一个全局对象:$ 暴露出来,当你需要 进行ajax调用时,使用$.ajax()就可以了。这样的API很符合思维的预期。

AngularJS也暴露了一个全局对象:angular,也对ajax调用进行封装提供了一个 $http对象,但是,但是,当你试图沿用旧经验访问angular.$http时,发现不是 那么回事!

仔细地查阅$http的文档,也找不到一点点的线索,从哪里可以把这个$http拿到。

依赖注入/DI
事实上,AngularJS把所有的功能组件都以依赖注入的方式组织起来:

AngularJS应用开发思维之依赖注入3

在依赖注入的模式下,所有的组件必须通过容器才能相互访问,这导致了在AngularJS中, 你必须通过一个中介才能获得某个组件的实例对象:

var injector = angular.injector(['ng']);
injector.invoke(function($http){
//do sth. with $http
});

这个中介,就是依赖注入模式中的容器,在AngularJS中,被称为:注入器。

在→_→的示例中,我们可以看到,我们已经拿到了$http对象,它其实是一个函数。

注入器/injector
注入器是AngularJS框架实现和应用开发的关键,这是一个DI/IoC容器的实现。

AngularJS将功能分成了不同类型的组件分别实现,这些组件有一个统称 - 供给者/provider, 下图中列出了AngularJS几个常用的内置服务:

AngularJS应用开发思维之依赖注入3

AngularJS的组件之间不可以互相直接调用,一个组件必须通过注入器才 可以调用另一个组件。这样的好处是组件之间相互解耦,对象的整个生命周期的管理 甩给了注入器。

注入器实现了两个重要的功能:

集中存储所有provider的配方
配方其实就是:名称+类构造函数。AngularJS启动时,这些provider首先使用其配方在注入器 内注册。比如,http请求服务组件封装在$httpProvider类内,它通过'$http'这个名字在注入 器内注册。

按需提供功能组件的实例
其他组件,比如一个用户的控制器,如果需要使用http功能,使用'$http'这个名字 向注入器请求,就可以获得一个http服务实例了。

试着修改→_→的代码,查看下$compile服务到底是什么?

注册服务组件
从injector的角度看,组件就是一个功能提供者,因此被称为供给者/Provider。 在AngularJS中,provider以JavaScript类(构造函数)的形式封装。

AngularJS应用开发思维之依赖注入3

服务名称通常使用一个字符串标识,比如'$http'代表http调用服务、'$rootScope'代表根 作用域对象、'$compile'代表编译服务...

Provider类要求提供一个$get函数(类工厂),injector通过调用该函数, 就可以获得服务组件的实例。

名称和类函数的组合信息,被称为配方。injector中维护一个集中的配方库, 用来按需创建不同的组件。这个配方库,其实就是一个Hash对象,key就是服务名称,value 就是类定义。

在→_→的示例中,我们定义了一个简单的服务类,这个服务类的实例就是一个字符串:“hello,world!”。 我们使用'ezHello'作为其服务名在注入器里注册,并通过注入器将这个实例显示出来。

获得注入器对象
要使用AngularJS的功能,必须首先获取注入器。有两种方法取得注入器。

创建一个新的注入器
可以使用angular.injector()创建一个新的注入器:

angular.injector(modules, [strictDi]); 获取已经创建的注入器
如果AngularJS框架已经启动,那么可以使用DOM对象的injector()方法获 得已经创建的注入器:

var element = angular.element(dom_element);
var injector = element.injector();

通过注入器调用API
注入器有两个方法可供进行API调用:invoke()和get()。

invoke()
使用注入器的invoke()方法,可以直接调用一个用户自定义的函数体,并通过函数参数 注入所依赖的服务对象,这是AngularJS推荐和惯例的用法:

angular.injector(['ng'])
.invoke(function($http){
//do sth. with $http
}); get()

也可以使用注入器的get()方法,获得指定名称的服务实例:

var my$http = angular.injector(['ng']).get('$http');
//do sth. with my$http

→_→的示例这次使用了get()方法直接获取一个服务实例,感受一下!

注入的方式和原理
有两种方法告知注入器需要注入的服务对象:参数名注入和依赖数组注入。

参数名注入
AngularJS在执行invoke()函数时,将待注入函数定义转化为字符串,通过 正则表达式检查其参数表,从而发现并注入所所依赖的服务对象:

//myfunc通过参数表声明这个函数依赖于'$http'服务
var myfunc = function($http){
//do sth. with $http
};
injector.invoke(myfunc);//myfunc的定义将被转化为字符串进行参数名检查

这样有一个问题,就是当我们对JavaScript代码进行压缩处理时,$http可能会被 变更成其他名称,这将导致注入失败。

依赖数组注入
AngularJS采用依赖项数组的方法解决代码压缩混淆产生的问题。这时传入invoke()的 是一个数组,数组的最后一项是实际要执行的函数,其他项则指明需要向该函数注入 的服务名称。注入器将按照数组中的顺序,依次向函数注入依赖对象。

采用这种方法,待注入函数的参数表的名称就无关紧要了:

//myfunc依赖于'$http'和'$compile'服务
var myfunc = ['$http','$compile',function(p1,p2){
//do sth. with p1($http),p2($compile)
}];
injector.invoke(myfunc);

→_→的实例这次采用依赖数组的方法注入了ezHello服务实例,可以改改参数名称 看有没有影响结果?

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript:history.go()和History.back()的区别及应用
Nov 25 Javascript
js实现幻灯片播放图片示例代码
Nov 07 Javascript
深入剖析JavaScript中的枚举功能
Mar 06 Javascript
jQuery基于toggle实现click触发DIV的显示与隐藏问题分析
Jun 12 Javascript
jQuery Easyui使用(二)之可折叠面板动态加载无效果的解决方法
Aug 17 Javascript
js实现悬浮窗效果(支持拖动)
Mar 09 Javascript
解决jQuery ajax动态新增节点无法触发点击事件的问题
May 24 jQuery
前端主流框架vue学习笔记第一篇
Jul 26 Javascript
从setTimeout看js函数执行过程
Dec 19 Javascript
详解给Vue2路由导航钩子和axios拦截器做个封装
Apr 10 Javascript
关于RxJS Subject的学习笔记
Dec 05 Javascript
JS中比Switch...Case更优雅的多条件判断写法
Sep 05 Javascript
JS获取当前使用的浏览器名字以及版本号实现方法
Aug 19 #Javascript
js 获取当前web应用的上下文路径实现方法
Aug 19 #Javascript
AngularJS入门教程之路由与多视图详解
Aug 19 #Javascript
AngularJS入门教程之链接与图片模板详解
Aug 19 #Javascript
AngularJS之依赖注入模拟实现
Aug 19 #Javascript
AngularJS入门教程之XHR和依赖注入详解
Aug 18 #Javascript
JavaScript中函数声明与函数表达式的区别详解
Aug 18 #Javascript
You might like
操作Oracle的php类
2006/10/09 PHP
PHP中使用CURL伪造来路抓取页面或文件
2011/05/04 PHP
php实现按照权重随机排序数据的方法
2015/01/09 PHP
PHP 9 大缓存技术总结
2015/09/17 PHP
WordPress中重置文章循环的rewind_posts()函数讲解
2016/01/11 PHP
PHP实现仿百度文库,豆丁在线文档效果(word,excel,ppt转flash)
2016/03/10 PHP
JavaScript 学习笔记(六)
2009/12/31 Javascript
jQuery的运行机制和设计理念分析
2011/04/05 Javascript
解决jquery的datepicker的本地化以及Today问题
2012/05/23 Javascript
Knockout visible绑定使用方法
2013/11/15 Javascript
理解jQuery stop()方法
2014/11/21 Javascript
Node.js编程中客户端Session的使用详解
2015/06/23 Javascript
让html元素随浏览器的大小自适应垂直居中的实现方法
2016/10/12 Javascript
javascript 使用正则test( )第一次是 true,第二次是false
2017/02/22 Javascript
利用Plupload.js解决大文件上传问题, 带进度条和背景遮罩层
2017/03/15 Javascript
深入理解 JavaScript 中的 JSON
2017/04/06 Javascript
react-native使用react-navigation进行页面跳转导航的示例
2017/09/07 Javascript
基于 Vue 实现一个酷炫的 menu插件
2017/11/14 Javascript
详解Node.js模板引擎Jade入门
2018/01/19 Javascript
微信小程序新闻网站详情页实例代码
2020/01/10 Javascript
vue移动端的左右滑动事件详解
2020/06/17 Javascript
JavaScript快速调试的两个技巧
2020/11/04 Javascript
JavaScript 中的六种循环方法
2021/01/06 Javascript
python安装numpy&安装matplotlib& scipy的教程
2017/11/02 Python
浅谈pycharm下找不到sqlalchemy的问题
2018/12/03 Python
python print 格式化输出,动态指定长度的实现
2020/04/12 Python
解决python脚本中error: unrecognized arguments: True错误
2020/04/20 Python
使用HTML5的Notification API制作web通知的教程
2015/05/08 HTML / CSS
德国机场停车位比较和预订网站:Ich-parke-billiger
2018/01/08 全球购物
丝芙兰波兰:Sephora.pl
2018/03/25 全球购物
C++面试题目
2013/06/25 面试题
计算机专业学生的自我评价
2013/12/15 职场文书
幼儿园的门卫岗位职责
2014/04/10 职场文书
高中综合实践活动总结
2014/07/07 职场文书
改进作风怎么办发言材料
2014/08/17 职场文书
竞选班长演讲稿400字
2014/08/22 职场文书