深入理解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 相关文章推荐
用js实现上传图片前的预览(TX的面试题)
Aug 14 Javascript
jQuery动态添加的元素绑定事件处理函数代码
Aug 02 Javascript
jquery中animate动画积累的解决方法
Oct 05 Javascript
javascript将url中的参数加密解密代码
Nov 17 Javascript
JS中三目运算符和if else的区别分析与示例
Nov 21 Javascript
javascript实现日期时间动态显示示例代码
Sep 08 Javascript
基于javascript实现漂亮的页面过渡动画效果附源码下载
Oct 26 Javascript
详解Webwork中Action 调用的方法
Feb 02 Javascript
浅谈Angular的$q, defer, promise
Dec 20 Javascript
ES6新特性一: let和const命令详解
Apr 20 Javascript
weui框架实现上传、预览和删除图片功能代码
Aug 24 Javascript
Vue CLI3中使用compass normalize的方法
May 30 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
php addslashes和mysql_real_escape_string
2010/01/24 PHP
php初始化对象和析构函数的简单实例
2014/03/11 PHP
Yii中表单用法实例详解
2016/01/05 PHP
详解PHP安装mysql.so扩展的方法
2016/12/31 PHP
php图像验证码生成代码
2017/06/08 PHP
javascript编程起步(第五课)
2007/02/27 Javascript
Javascript & DHTML 实例编程(教程)基础知识
2007/06/02 Javascript
jquery 图片 上一张 下一张 链接效果(续篇)
2010/04/20 Javascript
JavaScript全局函数使用简单说明
2011/03/11 Javascript
映彩衣的js随笔(js图片切换效果)
2011/07/31 Javascript
JS中for循序中延迟加载动态效果的具体实现
2013/08/18 Javascript
js中settimeout方法加参数
2014/02/28 Javascript
JavaScript中的setUTCDate()方法使用详解
2015/06/11 Javascript
浅谈javascript中的constructor
2016/06/08 Javascript
Javascript中的迭代、归并方法详解
2016/06/14 Javascript
AngularJS自定义控件实例详解
2016/12/13 Javascript
详解JavaScript中js对象与JSON格式字符串的相互转换
2017/02/14 Javascript
从零开始学习Node.js系列教程四:多页面实现数学运算的client端和server端示例
2017/04/13 Javascript
解决bootstrap中使用modal加载kindeditor时弹出层文本框不能输入的问题
2017/06/05 Javascript
详解Node.js利用node-git-server快速搭建git服务器
2017/09/27 Javascript
vue组件父与子通信详解(一)
2017/11/07 Javascript
vue2.0 资源文件assets和static的区别详解
2018/04/08 Javascript
用element的upload组件实现多图片上传和压缩的示例代码
2019/02/12 Javascript
[37:37]DAC2018 4.4 淘汰赛 Optic vs Mineski 第二场
2018/04/05 DOTA
约瑟夫问题的Python和C++求解方法
2015/08/20 Python
python获取指定时间差的时间实例详解
2017/04/11 Python
对Python中plt的画图函数详解
2018/11/07 Python
Python 支付整合开发包的实现
2019/01/23 Python
Flask-WTF表单的使用方法
2019/07/12 Python
在pytorch 中计算精度、回归率、F1 score等指标的实例
2020/01/18 Python
Python接口测试数据库封装实现原理
2020/05/09 Python
HTML5 canvas基本绘图之图形变换
2016/06/27 HTML / CSS
goodhealth官方海外旗舰店:新西兰国民营养师
2017/12/15 全球购物
如何利用XMLHTTP检测URL及探测服务器信息
2013/11/10 面试题
行政前台岗位职责
2013/12/04 职场文书
师德师风培训感言
2015/08/03 职场文书