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 相关文章推荐
Javascript实现关联数据(Linked Data)查询及注意细节
Feb 22 Javascript
Jquery+CSS3实现一款简洁大气带滑动效果的弹出层
May 15 Javascript
Jqgrid设置全选(选择)及获取选择行的值示例代码
Dec 28 Javascript
jquery实现对联广告的方法
Feb 05 Javascript
js实现跟随鼠标移动且带关闭功能的图片广告实例
Feb 26 Javascript
使用基于Node.js的构建工具Grunt来发布ASP.NET MVC项目
Feb 15 Javascript
基于javascript实现简单的抽奖系统
Apr 15 Javascript
JQuery Mobile 弹出式登录框的实现方法
May 28 Javascript
javascript 面向对象function详解及实例代码
Feb 28 Javascript
Angular.js实现动态加载组件详解
May 28 Javascript
微信小程序开发教程之增加mixin扩展
Aug 09 Javascript
JavaScript ES 模块的使用
Nov 12 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
PHP 检查扩展库或函数是否可用的代码
2010/04/06 PHP
PHP获取文件的MD5值并判断是否被修改的例子
2014/06/19 PHP
php采用curl模仿登录人人网发布动态的方法
2014/11/07 PHP
php解析url并得到url中的参数及获取url参数的四种方式
2015/10/26 PHP
PHP超低内存遍历目录文件和读取超大文件的方法
2019/05/01 PHP
thinkphp框架使用JWTtoken的方法详解
2019/10/10 PHP
javascript循环变量注册dom事件 之强大的闭包
2010/09/08 Javascript
JavaScript删除指定子元素代码实例
2015/01/13 Javascript
js+html5操作sqlite数据库的方法
2016/02/02 Javascript
实例解析jQuery中proxy()函数的用法
2016/05/24 Javascript
详解有关easyUI的拖动操作中droppable,draggable用法例子
2017/06/03 Javascript
微信小程序实现购物页面左右联动
2019/02/15 Javascript
浅谈Vue 自动化部署打包上线
2020/06/14 Javascript
vue 组件基础知识总结
2021/01/26 Vue.js
WebStorm无法正确识别Vue3组合式API的解决方案
2021/02/18 Vue.js
[02:29]完美世界高校联赛上海赛区回顾
2015/12/15 DOTA
[08:53]DOTA2-DPC中国联赛 正赛 PSG.LGD vs LBZS 选手采访
2021/03/11 DOTA
python处理xml文件的方法小结
2017/05/02 Python
Python计时相关操作详解【time,datetime】
2017/05/26 Python
Python实现的爬取网易动态评论操作示例
2018/06/06 Python
python学习--使用QQ邮箱发送邮件代码实例
2019/04/16 Python
Python通用函数实现数组计算的方法
2019/06/13 Python
Python中类似于jquery的pyquery库用法分析
2019/12/02 Python
python 实现从高分辨图像上抠取图像块
2020/01/02 Python
Python+Kepler.gl实现时间轮播地图过程解析
2020/07/20 Python
python Matplotlib数据可视化(2):详解三大容器对象与常用设置
2020/09/30 Python
莫斯科隐形眼镜网上商店:Linzi
2019/07/22 全球购物
后进生转化工作制度
2014/01/17 职场文书
国际商务专业求职信
2014/07/15 职场文书
倡议书范文大全
2015/04/28 职场文书
2015年企业员工工作总结范文
2015/05/21 职场文书
城南旧事观后感
2015/06/11 职场文书
关于幸福的感言
2015/08/03 职场文书
物资采购管理制度
2015/08/06 职场文书
golang在GRPC中设置client的超时时间
2021/04/27 Golang
python pandas 解析(读取、写入)CSV 文件的操作方法
2022/12/24 Python