文档章节

Angular基础(八) Observable & RxJS

zhixin9001
 zhixin9001
发布于 2017/08/28 22:13
字数 689
阅读 52
收藏 0

 

 

 

对于一个应用来说,获取数据的方法可以有很多,比如:Ajax, Websockets, LocalStorage, Indexdb, Service Workers,但是如何整合多种数据源、如何避免BUG、如何提高可维护性、如何提升应用的速度,这些却又是需要解决的问题。MVC是经典的Web应用开发模式,但对于客户端应用却不太适合。针对这点又出现了一些其它的模式,比如MVW(Model-View-Whatever)双向绑定模式、Flux、Observables等。

Angular1采用双向绑定的方式,但到了Angular4,对于数据结构的选择就非常灵活了,可以根据应用的场景自行决定。

 

一、Observables and RxJS

Observables方式属于响应式编程(ReactiveProgramming),数据流是异步传输的,采用Observables方式需要导入RxJS库。接下来通过一个聊天应用的实现了解Observables和RxJS。

a) 聊天应用整体来说包含三部分,聊天列表、对话框、未读消息。相应地有三个Model、三个service。service维护数据流,数据流传输model,组件订阅数据流并渲染界面。

userModel包含is,name, avatarSrc三个属性;

threadModel包含的属性有id, lastMessage, name, avatarSrc;

messageModel包含的属性有 id, isRead, sentAt, anthor, text, thread.

b) UserService

创建的UsersService类需要标记为@Injectable,便于之后的注入。

import{ Subject, BehaviorSubject } from 'rxjs';

@Injectable()

exportclass UsersService {

  currentUser: Subject<User> = newBehaviorSubject<User>(null);

  public setCurrentUser(newUser: User): void {

    this.currentUser.next(newUser);

  }

}

currentUser是一个Subject 类型,接收了一个BehaviorSubject对象,Subject是可读可写的流,同时继承了Observable和Observer。一般来说消息发送到流后,如果没有被接收就会丢失,但可使用BehaviorSubject避免这个问题,BehaviorSubject会保存最后一次的值。

setCurrentUser()会通过Subject.next()将新的值送入流中。

 

c) MessageService

MessageService是这个应用的核心,所有的消息流都会经过这个Service。MessageService首先会包含三个“数据管理流”:newMessage发送新消息、messages发送最近消息的数组、update更新messages流。

update更新messages流时,采用操作流模式(Operation Stream Pattern)。

interfaceIMessagesOperation extends Function {

  (messages: Message[]): Message[];

}

exportclass MessagesService {

  updates: Subject<any> = newSubject<any>();

  constructor() {

    this.messages = this.updates

      .scan((messages: Message[],

             operation: IMessagesOperation)=> {

               return operation(messages);

             },

            initialMessages).

                 .publishReplay(1)

                 .refCount();

传入updates流中的是方法,这个方法的输入和输出都是message数组,为此定义接口IMessagesOperation,然后使用Subject.scan()。

流默认是不共享的,一次读取后流中的数据就会消失,但这个应用中不少地方需要多次读取流,比如最近消息,所以使用了publishReplay和refCount方法。publishReplay设置流可在多个订阅者间共享,并可设置对新加入的订阅者的滞后值。

 

 

学习资料:The Complete Book on Angular by Nate Murray, Felipe Coury, AriLerner , Carlos Taborda

 

© 著作权归作者所有

共有 人打赏支持
zhixin9001
粉丝 7
博文 97
码字总数 76864
作品 0
西安
私信 提问
angular--Observable总结

Observable的通俗理解 ---Observable在消息发布者和观察者Observer之间起到一个媒体中介的作用,Observer是真正需要接受信息的人。Observable的实例提供了一个订阅函数,subscribe()。当Obs...

IrisHuang
07/07
0
1
Angular 6正式版发布,都有哪些新功能

在Angular 5发布半年之后,Angular 6在昨天正式发布,那么在这个版本有哪些新功能呢?新版本重点关注工具链以及工具链在 Angular 中的运行速度问题。除此之外,这次更新还包括框架包(@angu...

code_xzh
05/05
0
0
Angular 6.0正式版发布,都有哪些新功能

点击关注异步图书,置顶公众号 每天与你分享IT好书 技术干货 职场知识 在Angular 5发布半年之后,Angular 6在昨天正式发布,那么在这个版本有哪些新功能呢?新版本重点关注工具链以及工具链在...

异步社区
05/08
0
0
记NG4 迁移到 NG6 的一次实践

记NG4 迁移到 NG6 的一次实践 node >= 8.9.0$ npm -vnpm >= 5.6.0 $ npm uninstall -g @angular/cli // 卸载旧版本cli。$ npm cache clean // 清除缓存,确保卸载干净// 安装当前最新版本cli......

Arabic男孩纸
今天
0
0
angular组件间的交流(2)-- viewChild 和 data service

我在上上篇文章中介绍了父子组件间通过 Input 和 Output 的交流方式。现在我会介绍组件间交流的其他两种方法,viewChild 和 data service。我将这篇文章分为两部分。首先看 viewChild 部分吧...

IrisHuang
07/30
0
0

没有更多内容

加载失败,请刷新页面

加载更多

nuc970 uboot nand-boot,kernel, filesystem 烧录位置

一 烧写到Nand Flash **1.1 **相关文件说明 l BSP版本:nuc970bsp-release-20150519.zip l NuWriter版本:2015/04/28-V01,nuvoTon Nu-Writer V1.0 l 烧写文件: u-boot-spl.bin:负责将u-b......

CookieDemo
52分钟前
1
0
python中sort和sorted函数小结

L.sort(cmp=None, key=None, reverse=False) sorted(iterable, cmp=None, key=None, reverse=False) 这样看,sorted函数只比sort函数多一个iterable参数,其余没什么不同,iterable是一个迭代......

上官夏洛特
今天
3
0
thinkphp 常用SQL执行语句总结

第一条:Db::tablera('vr_panomas')->where(['delete_time'=>0,'id'=>['in',$pids]])->field(['id'=>'id','post_thumb'=>'thumb','post_title'=>'title','post_tags'=>'tags','post_price'=>......

koothon
今天
5
0
支付宝返回状态resultStatus意思

上一篇集成支付宝的时候,会有一些支付宝返回的resultStatus,具体意思是: 9000 订单支付成功 8000 正在处理中 4000 订单支付失败 6001 用户中途取消 6002 网络连接出错 还有memo,意思就是...

RainOrz
今天
3
0
electron webview 页面加载事件顺序

1.did-start-loading 页面开始加载 2.load-commit 主页面文档加载 3.page-title-updated title 4.dom-ready 主页面 dom 加载完成 5.load-commit frame文档加载 6.did-frame-finish-load fram......

dubox
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部