深入理解Angular4订阅(Subscribe)与取消


Posted in Javascript onNovember 22, 2017

订阅(Subscribe)

写过js的都知道,subscribe在很多地方都能看到它的身影,并且起到了很重要的作用。侦听http请求的返回,页面间传递参数… …说起订阅,就不能不提Observable,说起Observable就不能不提Subscribable… …等等,扯太远了。回到正题,subscribe是Observable类下的一个函数。从Observable的中文名:”可观察的”就能看出,Observable的作用是可以起到类似监听的作用,但它的监听往往都是在跨页面中,举个栗子:

// 父页面
export class SupComponent {
  id: string;
  // 父组件构造器
  constructor(private router: Router) {
    // 设置id
    this.id = 'JvsBRBQHU2BthZQNYrBkVl0Z22zQQIkP';
  }
  // 进入详情页
  detail(id: string) {
    // 携带id跳转至详细页
    this.router.navigate(['sub', id]);
  }
}

// 子页面
export class SubComponent implements OnInit{
  // 子组件构造器
  constructor(private activated: ActivatedRoute) { }
  // 子组件初始化钩子
  ngOnInit(): void {
    // 订阅活动路由
    this.activated.params.subscribe(params => {
      console.info(params['id']);
    });
  }
}

以上描述了一个简单业务的代码:在列表页中点击一个元素项,然后跳转进入该元素的详细页,并在详细页中取到该元素的id。这时候,我们可以看到,订阅事件派上用场了。

取消订阅(Unsubscribe)

这时候我在想,JAVA里面为了内存溢出,建议我们读写文件的流要关闭,对象要置空,那订阅是否要取消呢?在官方文档上,我们看到一句话:

深入理解Angular4订阅(Subscribe)与取消

那就是说,组件的钩子会帮我们取消订阅,不需要我们取消。好吧,你说啥就是啥。这天(当然就是我写博客的今天),我遇到了一个简单的需求:用户在‘用户信息'页面点击‘修改资料'按钮跳转到修改资料的表单页。当然表单的初始信息就是用户未更改信息前的,这个没问题。然后呢,为了尽量少发无用的请求(没改动资料也允许用户提交),我就在DoCheck钩子里面判断,如果资料前后不相同就让按钮可以点击,上代码:

// 修改资料页面
export class ModifyUerInfo implements OnInit, DoCheck {
  // 用户实体
  user: User;
  // 表单组
  form: FormGroup;
  // 声明订阅对象
  subscript: Subscription;
  // 修改资料页构造器
  constructor(private builder: FormBuilder) {
    // 实例化用户实体
    this.user = new User();
    // 实例化订阅对象
    this.subscript = new Subscription();
  }
  // 修改资料页初始化钩子
  ngOnInit(): void {
    // 调用初始化表单函数
    this.initForm();
  }
  // 修改资料检测变动钩子
  ngDoCheck(): void {
    this.subscript = this.form.valueChanges.subscribe(data => {
      // 若表单无改动,data为null
      if (data == null) {
        // 这里要协同html进行不可点击操作,比较简单,就不贴代码了
        return;
      }
      // 让提交按钮可以点击
      console.info(data);
    })
  }
  // 初始化表单方法
  initForm() {  
    // 初始化表单
    this.form = this.builder.group({
      // 声明昵称填写项(假装这里有值)
      nickname: [this.user.username, Validators.required],
      // 声明年龄填写项(假装这里有值)
      age: [this.user.age, Validators.required]
    })
  }
}

好了,保存代码后,当我欢喜的去看控制台结果的时候:

深入理解Angular4订阅(Subscribe)与取消

每条红线,代表我改变了一次表单,请看图找规律~找你妹!

可以发现,更改n次表单时,会产生n+1条log,并且是n+1条更改后的表单信息。虽然官方说不需要取消订阅,但是如果在移动端快速产生那么多订阅对象,难免保证一定不会没有问题出现,并且作为有理想有追求的程序狗,是无法忍受这种不完美的情况出现的。

于是乎在回调函数中,加上了:

// 取消订阅
this.subscript.unsubscribe();

深入理解Angular4订阅(Subscribe)与取消

这时候,恢复理想状态,搞定收工!

说真的,规范的代码不仅仅可以让代码的可读性提高,让逻辑变得更清楚,让女神倾慕,让老板涨工资… …最重要的是可以让程序避免出可避免的错误,很多注意点还是要注意的。

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

Javascript 相关文章推荐
jQuery EasyUI API 中文文档 - ComboGrid 组合表格
Oct 13 Javascript
javaScript arguments 对象使用介绍
Oct 18 Javascript
Javascript之this关键字深入解析
Nov 12 Javascript
网站基于flash实现的Banner图切换效果代码
Oct 14 Javascript
javascript批量修改文件编码格式的方法
Jan 27 Javascript
详解JavaScript对W3C DOM模版的支持情况
Jun 16 Javascript
JavaScript正则表达式实例详解
Oct 16 Javascript
JS实现重新加载当前页面或者父页面的几种方法
Nov 30 Javascript
jquery ajaxfileuplod 上传文件 essyui laoding 效果【防止重复上传文件】
May 26 jQuery
详解Node.js一行命令上传本地文件到服务器
Apr 22 Javascript
使用layui的router来进行传参的实现方法
Sep 06 Javascript
解决Idea、WebStorm下使用Vue cli脚手架项目无法使用Webpack别名的问题
Oct 11 Javascript
利用vue + koa2 + mockjs模拟数据的方法教程
Nov 22 #Javascript
详解从零搭建 vue2 vue-router2 webpack3 工程
Nov 22 #Javascript
利用vue+elementUI实现部分引入组件的方法详解
Nov 22 #Javascript
通过一个简单的例子学会vuex与模块化
Nov 22 #Javascript
第一个Vue插件从封装到发布
Nov 22 #Javascript
详细分析单线程JS执行问题
Nov 22 #Javascript
jquery实现回车键触发事件(实例讲解)
Nov 21 #jQuery
You might like
Discuz!下Memcache缓存实现方法
2010/05/28 PHP
php中实现精确设置session过期时间的方法
2014/07/17 PHP
使用PHP生成图片的缩略图的方法
2015/08/18 PHP
PHP入门教程之面向对象基本概念实例分析
2016/09/11 PHP
可兼容php5与php7的cURL文件上传功能实例分析
2018/05/11 PHP
Laravel Eloquent分表方法并使用模型关联的实现
2019/11/25 PHP
基于jquery的获取mouse坐标插件的实现代码
2010/04/01 Javascript
自写简单JS判断是否已经弹出页面
2010/10/20 Javascript
JS对象与json字符串格式转换实例
2014/10/28 Javascript
JavaScript中的eval()函数使用介绍
2014/12/31 Javascript
js实现Select头像选择实时预览代码
2015/08/17 Javascript
node.js下LDAP查询实例分享
2015/09/30 Javascript
JavaScript中有关一个数组中最大值和最小值及它们的下表的输出的解决办法
2016/07/01 Javascript
学习Angular中作用域需要注意的坑
2016/08/17 Javascript
JavaScript中捕获/阻止捕获、冒泡/阻止冒泡方法
2016/12/07 Javascript
AngularJS 文件上传控件 ng-file-upload详解
2017/01/13 Javascript
Nodejs基于LRU算法实现的缓存处理操作示例
2017/03/17 NodeJs
node安装--linux下的快速安装教程
2017/03/21 Javascript
jquery仿京东商品放大浏览页面
2017/06/06 jQuery
详解关于element el-button使用$attrs的一个注意要点
2018/11/09 Javascript
element跨分页操作选择详解
2020/06/29 Javascript
详解JavaScript数据类型和判断方法
2020/09/04 Javascript
基于Vue3.0开发轻量级手机端弹框组件V3Popup的场景分析
2020/12/30 Vue.js
[01:43]倾听DOTA2英雄之声 魅惑魔女国服配音鉴赏
2013/06/06 DOTA
Python库urllib与urllib2主要区别分析
2014/07/13 Python
Python3编程实现获取阿里云ECS实例及监控的方法
2017/08/18 Python
Python smtplib实现发送邮件功能
2018/05/22 Python
python 反向输出字符串的方法
2018/07/16 Python
超30万乐谱下载:Musicnotes.com
2016/09/24 全球购物
NBA欧洲商店(西班牙):NBA Europe Store ES
2019/04/16 全球购物
俄罗斯童装网上商店:BebaKids
2020/06/06 全球购物
服务行业演讲稿
2014/09/02 职场文书
英语教师个人工作总结
2015/02/09 职场文书
感恩母亲节活动总结
2015/02/10 职场文书
Go 在 MongoDB 中常用查询与修改的操作
2021/05/07 Golang
使用jpa之动态插入与修改(重写save)
2021/11/23 Java/Android