深入理解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 相关文章推荐
javaScript 数值型和字符串型之间的转换
Jul 25 Javascript
javascript的onchange事件与jQuery的change()方法比较
Sep 28 Javascript
Function.prototype.call.apply结合用法分析示例
Jul 03 Javascript
jQuery中contents()方法用法实例
Jan 08 Javascript
javascript设计模式之对象工厂函数与构造函数详解
Jul 30 Javascript
轻松掌握JavaScript单例模式
Aug 25 Javascript
RequireJS 依赖关系的实例(推荐)
Jan 21 Javascript
详解利用jsx写vue组件的方法示例
Jul 17 Javascript
Node.js系列之连接DB的方法(3)
Aug 30 Javascript
简述Vue中容易被忽视的知识点
Dec 09 Javascript
JavaScript享元模式原理与用法实例详解
Mar 09 Javascript
vue中选中多个选项并且改变选中的样式的实例代码
Sep 16 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
双料怀旧--SHARP GF515的维护、修理和简单调试
2021/03/02 无线电
Apache2 httpd.conf 中文版
2006/12/06 PHP
轻松修复Discuz!数据库
2008/05/03 PHP
php 文章采集正则代码
2009/12/28 PHP
php计算给定时间之前的函数用法实例
2015/04/03 PHP
Redis构建分布式锁
2017/03/28 PHP
JavaScript入门教程(1) 什么是JS
2009/01/31 Javascript
javascript 时间比较实现代码
2009/10/28 Javascript
15 个 JavaScript Web UI 库
2010/05/19 Javascript
location.href 在IE6中不跳转的解决方法与推荐使用代码
2010/07/08 Javascript
输入自动提示搜索提示功能的使用说明:sugggestion.txt
2013/09/02 Javascript
jquery mobile的触控点击事件会多次触发问题的解决方法
2014/05/08 Javascript
jquery实现点击变换导航样式的方法
2015/08/31 Javascript
React如何避免重渲染
2018/04/10 Javascript
VeeValidate在vue项目里表单校验应用案例
2018/05/09 Javascript
浅析JS中回调函数及用法
2018/07/25 Javascript
详解Next.js页面渲染的优化方案
2019/01/27 Javascript
详解微信小程序之一键复制到剪切板
2019/04/24 Javascript
微信小程序swiper禁止用户手动滑动代码实例
2019/08/23 Javascript
js前端如何写一个精确的倒计时代码
2019/10/25 Javascript
基于vue和bootstrap实现简单留言板功能
2020/05/30 Javascript
Javascript实现打鼓效果
2021/01/29 Javascript
跟老齐学Python之有容乃大的list(3)
2014/09/15 Python
python设置值及NaN值处理方法
2018/07/03 Python
Python列表切片操作实例总结
2019/02/19 Python
pycharm中显示CSS提示的知识点总结
2019/07/29 Python
Python plt 利用subplot 实现在一张画布同时画多张图
2021/02/26 Python
去加拿大的旅行和假期:Canadian Affair
2016/10/25 全球购物
瑞典廉价机票预订网站:Seat24
2018/06/19 全球购物
安全的后院和健身蹦床:JumpSport
2019/07/15 全球购物
如何整合JQuery和Prototype
2014/01/31 面试题
魅力教师事迹材料
2014/01/10 职场文书
自我鉴定 电子商务专业
2014/01/30 职场文书
文案策划求职信
2014/04/14 职场文书
《中国机长》观后感:敬畏生命,敬畏职责
2019/11/12 职场文书
Python中os模块的简单使用及重命名操作
2021/04/17 Python