angular 服务的单例模式(依赖注入模式下)详解


Posted in Javascript onOctober 22, 2018

angular官方文档单例服务的说明

单例模式就不要说了,懂点设计模式的都懂得,真有不明白的自行百度。

(解释下angular的命名,angular就是angular2+,angular1叫angularjs,至于angular2,3,4,5,6只是angular的版本,通称angular,希望小伙伴不要叫错了)

单例模式如何在angular的服务中使用呢,angular的官方文档中有这么一段话:

单例服务

服务在每个注入器的范围内是单例的。 在任何一个注入器中,最多只会有同一个服务的一个实例。

这里只有一个根注入器,而 UserService 就是在该注入器中注册的。 所以,在整个应用中只能有一个 UserService 实例,每个要求注入 UserService 的类都会得到这个服务实例。

不过,Angular DI 是一个 多级注入系统,这意味着各级注入器都可以创建它们自己的服务实例。 Angular 总会创建多级注入器。

笼统,并不知道依赖注入服务单例模式怎么用,要想弄明白很简单,简单的写个例子实验一下就可以了,下面我会给大家说一下我的实验总结,帮助小伙伴节约一些这种乏味的探索时间。

实验样例代码

服务代码

import { Injectable } from '@angular/core';

@Injectable(
 //{providedIn: 'root'}
)
export class SingletonServiveTestService {
 private _name = "primaryName";
 constructor() { }
 setName (name){
  this._name = name;
 }
 getName(){
  return this._name;
 }
}

小伙伴可能会说了,这TM怎么会是单例模式。小伙伴不要激动,我也是这么想的,怎么TM怎么会是单例。不过在angular的依赖注入中,有几种写法确实会使这种代码以单例模式的方式运行。

解释下{providedIn: 'root'},一开始认为只要传入这个对象,让服务以root的方式提供给子module,子组件,然后这个服务就是单例的,后台发现,这个对象和单例没有半毛钱关系,它只是app.module中引入服务的另一种写法,除了这个用处,没有别的用处,所以下文中我们就不说添加和不添加{providedIn: 'root'}的情况了

注入代码

注入分为Module.providers和Component.providers两种;实验的module是实现懒加载的。

上面代码的测试结果(module都是懒加载的)

这三个结果已经代表各种情况了,如果小伙伴还想知道其他一些情况的下的结果,小伙伴可以自己动手写个例子,或者给我留言

  • 在app.module.providers或者app.component.providers中依赖面进去这个服务,在子component和子module中的component中的构造函数中国呢注入进去这个服务,这个服务的表现特征是 单例 的。
  • 在懒加载的子module.providers 中依赖进去这个服务,在这个module下面的component中的构造函数中注入进去这个服务,这个服务表现特征是 单例 的。
  • 在component.providers中依赖进去这个服务,然后在component的构造函数中依赖注入进去这个服务,这个服务表现特征是 非单例 的.

单例不都通过静态属性来实现的吗?

我认为单例就是实现属性方法的保持一个实例,而angular中想用到单例多是实现一些数据整个项目通用,按照设计模式上讲上面和下面的代码都不是标准的单例模式的写法,但是在实际使用中确实是达到了单例模式的目的,上吗的有angular的官方文档做背书,所以我就写了上吗那种在angular中可以是单例模式,至于下面这中我就叫静态属性单一模式,ts静态属性被编译成正常的js,就是构造函数上的属性而已,概念高大上,原理矮小low。

import { Injectable } from '@angular/core';

@Injectable()
export class SingletonServiveTestService {
 private static _name = "primaryName";

 constructor() { }
 setName (name){
  SingletonServiveTestService._name = name;
 }
 getName(){
  return SingletonServiveTestService._name;
 }
}

这个实验着在各种情况下都能表现 单例 特征

这种方法万金油,单例就用这中不久ok了,小伙伴写代码要考究,莫要粗放。结合上面代码代码的单例实现根据具体使用场景来选择用那种方式。

真正严格的用单例模式的话是用不上angular服务的依赖注入的这套机制的。至于要不要使用单例抛掉依赖注入,看业务场景了。

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

Javascript 相关文章推荐
使用Grunt.js管理你项目的应用说明
Apr 24 Javascript
jQuery.Validate验证库的使用介绍
Apr 26 Javascript
Javascript 鼠标移动上去小三角形滑块缓慢跟随效果
Apr 26 Javascript
jQuery实现类似淘宝购物车全选状态示例
Jun 26 Javascript
固定网页背景图同时保持图片比例的思路代码
Aug 15 Javascript
jQuery实现鼠标划过添加和删除class的方法
Jun 26 Javascript
javascript HTML+CSS实现经典橙色导航菜单
Feb 16 Javascript
关于JS中的apply,call,bind的深入解析
Apr 05 Javascript
基于JavaScript实现自定义滚动条
Jan 25 Javascript
JavaScript转换数据库DateTime字段类型方法
Jun 27 Javascript
JS实现获取word文档内容并输出显示到html页面示例
Jun 23 Javascript
vue-cli2与vue-cli3在一台电脑共存的实现方法
Sep 25 Javascript
vue 配置多页面应用的示例代码
Oct 22 #Javascript
微信小程序引用iconfont图标的方法
Oct 22 #Javascript
详解微信小程序与内嵌网页交互实现支付功能
Oct 22 #Javascript
js异步上传多张图片插件的使用方法
Oct 22 #Javascript
js实现动态添加上传文件页面
Oct 22 #Javascript
Javascript 实现 Excel 导入生成图表功能
Oct 22 #Javascript
js实现动态增加文件域表单功能
Oct 22 #Javascript
You might like
《PHP编程最快明白》第七讲:php图片验证码与缩略图
2010/11/01 PHP
微信公众平台开发实现2048游戏的方法
2015/04/15 PHP
php采集神器cURL使用方法详解
2016/02/19 PHP
PHP PDOStatement::getColumnMeta讲解
2019/02/01 PHP
thinkphp5.1框架中容器(Container)和门面(Facade)的实现方法分析
2019/08/05 PHP
多浏览器支持的右下角浮动窗口
2010/04/01 Javascript
jquery实现在页面加载的时自动为日期插件添加当前日期
2014/08/20 Javascript
Javascript常用小技巧汇总
2015/06/24 Javascript
js实现的奥运倒计时时钟效果代码
2015/12/09 Javascript
jQuery中的insertBefore(),insertAfter(),after(),before()区别介绍
2016/09/01 Javascript
Angular.js跨controller实现参数传递的两种方法
2017/02/20 Javascript
js实现分页功能
2017/05/24 Javascript
Popup弹出框添加数据实现方法
2017/10/27 Javascript
AngularJS实现controller控制器间共享数据的方法示例
2017/10/30 Javascript
基于Two.js实现星球环绕动画效果的示例
2017/11/06 Javascript
微信小程序自定义导航栏
2018/12/31 Javascript
微信小程序 调用微信授权窗口相关问题解决
2019/07/25 Javascript
详解vue 命名视图
2019/08/14 Javascript
浅谈python和C语言混编的几种方式(推荐)
2017/09/27 Python
用Python分析3天破10亿的《我不是药神》到底神在哪?
2018/07/12 Python
深入flask之异步非堵塞实现代码示例
2018/07/31 Python
tensorflow实现加载mnist数据集
2018/09/08 Python
详解用python自制微信机器人,定时发送天气预报
2019/03/25 Python
Python程序暂停的正常处理方法
2019/11/07 Python
如何基于Python批量下载音乐
2019/11/11 Python
python jenkins 打包构建代码的示例代码
2019/11/29 Python
python 实现视频 图像帧提取
2019/12/10 Python
Django模板获取field的verbose_name实例
2020/05/19 Python
突袭HTML5之Javascript API扩展5—其他扩展(应用缓存/服务端消息/桌面通知)
2013/01/31 HTML / CSS
澳大利亚在线家具、灯饰和家居装饰店:LivingStyles
2018/11/20 全球购物
美国最好的钓鱼、狩猎和划船装备商店:Bass Pro Shops
2018/12/02 全球购物
JSP和EJB可以共享HttpSession么?EJB里面可以改变session里面的内容
2013/06/05 面试题
Java程序开发中如何应用线程
2016/03/03 面试题
2014年公务员个人工作总结
2014/11/22 职场文书
毕业生对母校寄语
2015/02/26 职场文书
城南旧事电影观后感
2015/06/16 职场文书