Angular 一个有关编程风格的问题

2020-03-06 17:50:33 +08:00
 Zhuzhuchenyan

最近组织组内程序员们向 Angular 迁移,有个编程风格的问题想咨询一下大家。

鉴于 Angular 大力推行 Rxjs 库的函数式思想比较有趣,同时又由于大家对这个范式的想法不同,写组件的时候浮现出很多不同的写法,例如下面这个小 Demo

一个简单组件有一个布尔值用来控制一个内容是否显示,两个按钮用来控制这个布尔值是真是假

//component.ts
... //跳过类内其他的定义
stat: bool = false;

onActiveButtonClicked():void {
	this.stat = true;
}

onDeActiveButtonClicked():void {
    this.stat = false
}
... //跳过类内其他的定义

//component.html
<button (click)="onActiveButtonClicked()">Active</button>
<button (click)="onDeActiveButtonClicked()">Deactive</button>
<p *ngIf="stat">Active</p>

以上代码是程序员 A 贡献的,这个程序员呢原来是做 iOS 客户端开发的,熟练掌握 MVC 设计模式,根据习惯写出了以上代码,完美运行(那是当然的)他坚持只使用 rxjs 处理数据,而不是这种一眼就能看出来的情况

还有一种写法如下,

//component.ts
...
dispatchAction: Subject<boolean> = new Subject<boolean>();
shouldActive :Observable<boolean> = this.dispatchAction.pipe(
    startWith(false)
)
...
//component.html
<button (click)="dispatchAction.next(true)">Active</button>
<button (click)="dispatchAction.next(false)">Deactive</button>

<p *ngIf="shouldActive | async">Active</p>

这段代码是由我们刻苦学习的实习生贡献的,熟练运用 rxjs 给 Angular 赋能

就事论事的话,我们暂且不考虑复杂的业务会给“MVC 程序员”(当然了我们现在是 MVVM )带来多大的思想负担导致他变成“Massive View Controller 程序员”,也不考虑复杂的业务会让实习生写出

combinelatest(blablabal).pipe(bla(), merge(bkaba.pipe(nbikad)),switchmap(blablabal => forkjoin(blablalala)))

这种给 code review 带来无穷麻烦的代码,以上两种写法各位偏向于哪一种呢?

一个动态 DEMO 放在 stackblitz 上

https://stackblitz.com/edit/angular-kssmku?embed=1&file=src/app/app.component.html

在此先谢谢大家

朱朱

2077 次点击
所在节点    前端开发
22 条回复
Zhuzhuchenyan
2020-03-07 05:55:23 +08:00
@crysislinux 好的受教了,看来还是需要辨识出 rxjs 的典型场景。
coloz
2020-03-07 21:11:04 +08:00
状态管理 BehaviorSubject

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/650480

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX