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 相关文章推荐
网页打开自动最大化的js代码
Aug 22 Javascript
商城常用滚动的焦点图效果代码简单实用
Mar 28 Javascript
Javascript连接多个数组不用concat来解决
Mar 24 Javascript
JQuery 使用attr方法实现下拉列表选中
Oct 13 Javascript
在JavaScript中处理数组之reverse()方法的使用
Jun 09 Javascript
基于JS实现新闻列表无缝向上滚动实例代码
Jan 22 Javascript
深入理解React中es6创建组件this的方法
Aug 29 Javascript
BootStrap Datetimepicker 汉化的实现代码
Feb 10 Javascript
js实现首屏延迟加载实现方法 js实现多屏单张图片延迟加载效果
Jul 17 Javascript
js实现倒计时器自定义时间和暂停
Feb 25 Javascript
Vue项目引发的「过滤器」使用教程
Mar 12 Javascript
JS实现“全选”和"全不选"功能代码实例
Feb 06 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 动态添加记录
2009/03/10 PHP
php学习之function的用法
2012/07/14 PHP
php中删除、清空session的方式总结
2015/10/09 PHP
php对文件夹进行相关操作(遍历、计算大小)
2015/11/04 PHP
CI框架扩展系统核心类的方法分析
2016/05/23 PHP
PHP清除缓存的几种方法总结
2017/09/12 PHP
Thinkphp5.0 框架视图view的比较标签用法分析
2019/10/12 PHP
浅谈javascript 面向对象编程
2009/10/28 Javascript
JavaScript 内置对象属性及方法集合
2010/07/04 Javascript
jQuery创建插件的代码分析
2011/04/14 Javascript
node.js中的fs.readdirSync方法使用说明
2014/12/17 Javascript
调试JavaScript中正则表达式中遇到的问题
2015/01/27 Javascript
关于javascript中dataset的问题小结
2015/11/16 Javascript
跟我学习javascript解决异步编程异常方案
2015/11/23 Javascript
jquery+css实现侧边导航栏效果
2017/06/12 jQuery
JS原生带小白点轮播图实例讲解
2017/07/22 Javascript
JS中使用media实现响应式布局
2017/08/04 Javascript
详解使用element-ui table组件的筛选功能的一个小坑
2018/11/02 Javascript
vue.js的状态管理vuex中store的使用详解
2019/11/08 Javascript
python实现通过代理服务器访问远程url的方法
2015/04/29 Python
Python随机生成带特殊字符的密码
2016/03/02 Python
python 爬虫一键爬取 淘宝天猫宝贝页面主图颜色图和详情图的教程
2018/05/22 Python
python中强大的format函数实例详解
2018/12/05 Python
Python大数据之网络爬虫的post请求、get请求区别实例分析
2019/11/16 Python
Python3 实现减少可调用对象的参数个数
2019/12/20 Python
Python 日期的转换及计算的具体使用详解
2020/01/16 Python
django ListView的使用 ListView中获取url中的参数值方式
2020/03/27 Python
python爬虫利器之requests库的用法(超全面的爬取网页案例)
2020/12/17 Python
使用HTML5中的contentEditable来将多行文本自动增高
2016/03/01 HTML / CSS
俄罗斯玩具、儿童用品、儿童服装和鞋子网上商店:MyToys.ru
2019/10/14 全球购物
介绍一下JMS编程步骤
2015/09/22 面试题
Java中有几种类型的流?JDK为每种类型的流提供了一些抽象类以供继承,请说出他们分别是哪些类?
2012/05/30 面试题
活动总结模板
2014/05/09 职场文书
公司应聘自荐书
2014/06/14 职场文书
银行培训心得体会范文
2016/01/09 职场文书
JavaScript数组 几个常用方法总结
2021/11/11 Javascript