Angular搜索场景中使用rxjs的操作符处理思路


Posted in Javascript onMay 30, 2018

在有input输入框的搜索/过滤业务中,总会考虑如何减少发起请求频率,尽量使每次的请求都是有效的。节流和防抖是比较常见的做法,这类函数的实现方式也不难,不过终归还是需要自己封装。rxjs提供了各种操作符 , 可以很快捷高效的实现这些功能。

栗子

现在有一个查询场景,可以通过城市、类型、关键字来多维度过滤结果,如下图:

Angular搜索场景中使用rxjs的操作符处理思路

处理思路:

1、通过ngModel将select和input的值绑定到模型中的过滤条件对象

2、监听select输入框的change事件和input输入框的input事件来触发 发送过滤条件的函数

3、创建一个用于发送过滤条件的Subject,再通过操作符来进行防抖动、前后值的对比等处理,订阅此主体,有有效的过滤条件过来时才发送请求,拉取数据。 

值绑定和事件监听:

<select name="city" id="city" [(ngModel)] = "config.cityCode" (change)="filterList()">
   <option [value]="city.value" *ngFor="let city of citylist" >{{city.name}}</option>
  </select>
  <select name="type" id="type" [(ngModel)] = "config.areaType" (change)="filterList()">
   <option value="">全部</option>
   <option value="TRAFFIC">交通</option>
   <option value="TRAVEL">旅游</option>
  </select>
  <input type="text" class="search" id="search" 
    [(ngModel)] = "config.name" 
    (input)="filterList()"
    placeholder="请输入关键字">

这里为什么input不监听change事件呢? type=text类型的input在失焦的时候才会触发change事件,而input事件则只要value变化就会触发(这里没有考虑IE兼容性问题)

处理函数 :

// 用于传递配置项
 public $filter = new Subject<any>();
 // 过滤条件
 public config: FilterConfig = {
 cityCode : '',
 areaType : '',
 name : ''
 };
 ngOnInit() {
 // 监听过滤配置项
 this.$filter.pipe(
  debounceTime(500),
  distinctUntilChanged( (n: FilterConfig , o: FilterConfig): boolean => {
  return n.name === o.name &&
    n.cityCode === o.cityCode &&
    n.areaType === o.areaType;
  })
 ).subscribe( _config => {
  this.getRegionList(_config);
 });
 }
 filterList() {
 // 每次都要发送一个新的对象,否则distinctUntilChanged compare的时候会一直比较同一个对象的值
 this.$filter.next(Object.assign({}, this.config));
 }
 getRegionList (_config) {
 // 发送请求,更新区域数据
 console.log(_config);
 }

需要注意的是,$filter传递过滤条件的时候,一定要发送一个新的对象,否则 distinctUntilChanged 的 compare 函数由于比较的是同一个对象,会一直认为没有变化,导致不会继续传播。因为config对象的value都是string简单类型,所以可以直接用Object.assign,如果value值是对象类型的话,就需要自己撸个简单的深拷贝工具函数了

总结

主要的思路就是通过Subject来发送过滤条件,这样就可以使用rxjs的各种操作符,可以快捷很多。而在比较对象的时候需要自定义distinctUntilChanged 操作符的compare函数,这时需要注意不要传递同一个对象。

总结

以上所述是小编给大家介绍的Angular搜索场景中使用rxjs的操作符处理思路,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
鼠标经过的文本框textbox变色
May 21 Javascript
Javascript Global对象
Aug 13 Javascript
Javascript自定义排序 node运行 实例
Jun 05 Javascript
判断js中各种数据的类型方法之typeof与0bject.prototype.toString讲解
Nov 07 Javascript
JS获取各种宽度、高度的简单介绍
Dec 19 Javascript
JS实现超简单的仿QQ折叠菜单效果
Sep 21 Javascript
详解AngularJS Filter(过滤器)用法
Dec 28 Javascript
举例说明JavaScript中的实例对象与原型对象
Mar 11 Javascript
从零开始学习Node.js系列教程四:多页面实现数学运算的client端和server端示例
Apr 13 Javascript
JS实现页面打印(整体、局部)
Aug 18 Javascript
JavaScript实现全选取消效果
Dec 14 Javascript
JavaScript fetch接口案例解析
Aug 30 Javascript
微信小程序实现跑马灯效果完整代码(附效果图)
May 30 #Javascript
vue通过点击事件读取音频文件的方法
May 30 #Javascript
vue 表单输入格式化中文输入法异常问题
May 30 #Javascript
详解如何使用babel进行es6文件的编译
May 29 #Javascript
基于打包工具Webpack进行项目开发实例
May 29 #Javascript
JavaScript反射与依赖注入实例详解
May 29 #Javascript
使用webpack3.0配置webpack-dev-server教程
May 29 #Javascript
You might like
火影忍者:三大瞳力之一的白眼,为什么没有写轮眼那么出色?
2020/03/02 日漫
基于PHP与XML的PDF文档生成技术
2006/10/09 PHP
用PHP产生动态的影像图
2006/10/09 PHP
用php+mysql一个名片库程序
2006/10/09 PHP
php 按指定元素值去除数组元素的实现方法
2011/11/04 PHP
PHP中如何使用session实现保存用户登录信息
2015/10/20 PHP
php实现CSV文件导入和导出
2015/10/24 PHP
PHP设计模式之工厂方法设计模式实例分析
2018/04/25 PHP
PHP的微信支付接口使用方法讲解
2019/03/08 PHP
javascript 带有滚动条的表格,标题固定,带排序功能.
2009/11/13 Javascript
推荐10个超棒的jQuery工具提示插件
2011/10/11 Javascript
jQuery查询数据返回object和字符串影响原因是什么
2013/08/09 Javascript
举例简介AngularJS的内部语言环境
2015/06/17 Javascript
延时加载JavaScript代码提高速度
2015/12/27 Javascript
设计模式中的facade外观模式在JavaScript开发中的运用
2016/05/18 Javascript
一个简易的js图片轮播效果
2017/07/22 Javascript
ng-alain表单使用方式详解
2018/07/10 Javascript
微信小程序自定义导航教程(兼容各种手机)
2018/12/12 Javascript
详解vue路由篇(动态路由、路由嵌套)
2019/01/27 Javascript
小程序中canvas的drawImage方法参数使用详解
2019/07/04 Javascript
解决layui数据表格table的横向滚动条显示问题
2019/09/04 Javascript
Python脚本在Appium库上对移动应用实现自动化测试
2015/04/17 Python
python3实现UDP协议的服务器和客户端
2017/06/14 Python
Python安装第三方库攻略(pip和Anaconda)
2020/10/15 Python
法国春天百货官网:Printemps.com
2020/06/29 全球购物
Java中的异常处理机制的简单原理和应用
2013/04/27 面试题
《小熊住山洞》教学反思
2014/02/21 职场文书
精彩的演讲稿开头
2014/05/08 职场文书
出国英文推荐信
2014/05/10 职场文书
上课说话检讨书500字
2014/11/01 职场文书
2014个人年度工作总结范文
2014/12/24 职场文书
开除员工通知
2015/04/22 职场文书
2016幼儿教师自荐信范文
2016/01/28 职场文书
如何开发一个渐进式Web应用程序PWA
2021/05/10 Javascript
pytorch finetuning 自己的图片进行训练操作
2021/06/05 Python
解决Oracle数据库用户密码过期
2022/05/11 Oracle