【NG】Pipes #40
Description
Why
应用中常常需要把 数据作为输入 -- 经过转换 -- 给出期望的输出。例如 日期要显示成用户友好的格式。
这种转换可能多个地方都要。如果这种转换可以像CSS一样 声明在 HTML 模板中，就会变得很方便。
通过 Angular Pipes 就可以 把这个转换逻辑 声明在 HTML 模板中。
Pipes and change detection
无管道时， Angular 采用昂贵的 变更检测来查找绑定值得更改。
有纯管道时，Angular会采用更简单更快速的变更检测算法。
Pure and Impure Pipes
Pure Pipes
- Angular 只有在它检测到输入值发生了纯变更时才会执行纯管道。
- 纯变更是指对原始类型值(String、Number、Boolean、Symbol)的更改， 或者对对象引用(Date、Array、Function、Object)的更改。
- 纯管道必须使用纯函数
Impure Pipes （pure: false)
Angular 会在每个组件的变更检测周期中执行非纯管道。 非纯管道可能会被非常频繁的调用。
Angular为何不提供内置 FilterPipe 和 OrderByPipe
- Why： 因为这两个管道必须得是impure pipes， 每次变更检测周期都会执行，性能很差。
- Solution： 应该放在组件内部实现或者改写为一个过滤/排序的服务注入到组件中，从而能够控制执行频率，解决性能问题。
vcPlugin 项目中的应用
- FileSizePipe // ['B', 'KB', 'MB', 'GB', 'TB', 'PB']
- ElapsedTimePipe // s, h, d...
- KbLinkPipe
- FormatStringPipe