使用Angular与TypeScript构建Electron应用(六)
这一小节我们只做几件小事,它们在项目整体中显得微不足道。特别是new-feed中,我们并没有设计出完善的业务逻辑,现在我们甚至可以结束教程,但我希望能够借助这几个项目中细节实现来传达整体的构建思想与编程思维方式,如果你认为学习它有些困难,可以跳过这些方法转而使用一些不太优雅的解决方案。 news-feed如今还不能正确的浏览文章,至少缺少返回列表与列表翻页。Angular中它们有很多完全不同的解决方案,你需要争对不同场景选择合理的实现方式,下文里我们尝试几种不同的方案来解决这些问题。 实现返回按钮组件方式文章在详情浏览时需要一个返回至列表页的按钮,它仅仅只做路由上的回退,换言之,这个按钮无需接受任何的参数,也不会受环境变化影响。返回按钮始终是一个固定的功能组件,我们先使用组件的方式完成它:
import {Component,OnInit} from '@angular/core' import {Location} from '@angular/common' @Component({ selector: 'app-back',templateUrl: './back.component.html',styleUrls: ['./back.component.scss'] }) export class BackComponent implements OnInit { constructor ( private location: Location ){} goBack ():void{ this.location.back() } ngOnInit (){ } } 现在back组件已经能够正常工作,但还需要注意一个小问题,在快速点击按钮时可能触发多次的
指令方式
简单的说,你仅仅只需要做一些逻辑/属性上的改变而模板不会多次复用时,你需要尽量避免组件,转而使用属性型指令,这是Angular与React的不同之处。 开始创建back指令: import {Directive,HostListener} from '@angular/core' import {Location} from '@angular/common' @Directive({ selector: '[routeBack]' }) export class BackDirective { constructor ( private location: Location ){ } @HostListener('click') goBack (){ this.location.back() } }
<div routeBack>返回</div> 这是一个不错的开始,让我们体会到Angular的不同寻常之处,现在开始编写相对复杂一些的加载列表按钮。 实现加载列表使用变量控制在类似于计数器、时间控制、购物车等等业务逻辑之处,你都可以通过暂存一个变量来解决数量的缓存与显示,所有的操作逻辑被看作Action,用来触发缓存的变化。它们实现起来非常简单,特别是只需要加载更多的单一翻页功能时:
这里的Pagination接口非常简陋,但实际业务中肯定远远不止这些。翻页需要考虑到一共有多少页码数量,在最后一页时需要对下一页或加载更多隐藏,返回上一页时也需要请求接口,由于列表使用的服务是公共的 通过可观察对象在使用rxjs之前,有一点值得我们关注:在实现翻页功能时,我们需要订阅的并非是来自于翻页按钮的事件,而使基于页码本身的Observable。页面中可能有多个位置会触发翻页函数,但操作的始终只是随着时间推进而变化的单个值。即便是在未来,我们需要关注也只是一个稍稍复杂的对象而已。 private pagination:Subject<number> = new Subject<number>() private paginationSub: Subscription this.paginationSub = this.pagination .filter(page => page > 0) .switchMap(page => this.listService.getList(page)) .subscribe( list => this.list.push(...list),err => Observable.of<any>([]) )
在未来业务逻辑变化的更复杂时,我们可以为这些列表筛选与排序产生的值创建多个可观察对象,再使用 this.paginationSub = Observable.combineLatest( this.pagination,this.sort,this.filter,// ... ) 无论逻辑怎样复杂,我们始终仅仅只维护这些可观察对象,在合理的时间为它们发射新的值即可。理所应当的,任何过滤,验证操作都可以使用rxjs的操作符完成,甚至你可以自己创建一些操作符来过滤、合并这些流。相比于前一种实现方式,rxjs使代码具备了高度可读性与可扩展性,这是难能可贵的。 不知道你是否注意到,这段代码还存在一个问题,如果我们需要对 private pagination: BehaviorSubject<number> = new BehaviorSubject<number>(1) // ... loadMore (nextNumber: number):void{ this.pagination.next(this.pagination.getValue() + nextNumber) } 对于排序、筛选或其他任何逻辑都是相同的,未来我们永远只把注意力放在可观察对象上,通过少量的高可读性的代码来解决逻辑问题。对于刚刚解除Angular或Rxjs的开发者来说,这需要一些学习时间,可参考 github记录理解这一节。在下一小节中,我将会默认大家已经掌握这些技能,开始着手完成剩余的用户模块。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |