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 相关文章推荐
JS支持带x身份证号码验证函数
Aug 10 Javascript
jquery 层次选择器siblings与nextAll的区别介绍
Aug 02 Javascript
JS实现日期加减的方法
Nov 29 Javascript
JavaScript基础语法、dom操作树及document对象
Dec 02 Javascript
Javascript中使用A标签获取当前目录的绝对路径方法
Mar 02 Javascript
老生常谈JavaScript中的this关键字
Oct 01 Javascript
js css3实现图片拖拽效果
Mar 04 Javascript
操作按钮悬浮固定在微信小程序底部的实现代码
Aug 02 Javascript
vue递归组件实战之简单树形控件实例代码
Aug 27 Javascript
搭建vscode+vue环境的详细教程
Aug 31 Javascript
JavaScript ES 模块的使用
Nov 12 Javascript
create-react-app开发常用配置教程
Jun 25 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
Can't create/write to file 'C:\WINDOWS\TEMP\...MYSQL报错解决方法
2011/06/30 PHP
使用php实现快钱支付功能(涉及到接口)
2013/07/01 PHP
使用ob系列函数实现PHP网站页面静态化
2014/08/13 PHP
PHP实现原生态图片上传封装类方法
2016/11/08 PHP
PHP中类的自动加载的方法
2017/03/17 PHP
JQuery循环滚动图片代码
2011/12/08 Javascript
js DOM 元素ID就是全局变量
2012/09/20 Javascript
js防止表单重复提交的两种方法
2013/09/30 Javascript
通过action传过来的值在option获取进行验证的方法
2013/11/14 Javascript
浅谈javascript六种数据类型以及特殊注意点
2013/12/20 Javascript
在javascript中执行任意html代码的方法示例解读
2013/12/25 Javascript
基于jQuery实现美观且实用的倒计时实例代码
2015/12/30 Javascript
Jquery实现的简单轮播效果【附实例】
2016/04/19 Javascript
vue.js初学入门教程(2)
2016/11/07 Javascript
用nodeJS搭建本地文件服务器的几种方法小结
2017/03/16 NodeJs
vuejs使用$emit和$on进行组件之间的传值的示例
2017/10/04 Javascript
Vue无限滑动周选择日期的组件的示例代码
2018/07/18 Javascript
详解js获取video任意时间的画面截图
2019/04/17 Javascript
Vue实现背景更换颜色操作
2020/07/17 Javascript
vue3.0 项目搭建和使用流程
2021/03/04 Vue.js
python切换hosts文件代码示例
2013/12/31 Python
python和pyqt实现360的CLable控件
2014/02/21 Python
深入讲解Java编程中类的生命周期
2016/02/05 Python
Python实现1-9数组形成的结果为100的所有运算式的示例
2017/11/03 Python
python处理两种分隔符的数据集方法
2018/12/12 Python
对python中的os.getpid()和os.fork()函数详解
2019/08/08 Python
Python全面分析系统的时域特性和频率域特性
2020/02/26 Python
html5唤起app的方法
2017/11/30 HTML / CSS
使用iframe+postMessage实现页面跨域通信的示例代码
2020/01/14 HTML / CSS
教师自荐书
2013/10/08 职场文书
人事科岗位职责范本
2014/03/02 职场文书
工程项目经理任命书
2014/06/05 职场文书
导师鉴定意见
2015/06/05 职场文书
名人传读书笔记
2015/06/26 职场文书
python spilt()分隔字符串的实现示例
2021/05/21 Python
Python道路车道线检测的实现
2021/06/27 Python