开发心得1：数据转换之管道

需求：要求做个表格，表格里有一列的数据要带单位，怎么做？

错误做法：遍历列表的每一项，然后对这一列的值做修改，将需要的单位拼接进去，然后再将最后的结果给表格展示；

正确操作：表格数据不变，利用“管道”，动态的将每个数据展示到界面上即可；

• 此处展示的是 Angular 框架的管道

import { PipeTransform, Pipe } from '@angular/core';

/**
* 为数据添加单位
*/
@Pipe({name: 'unitPercent'})
export class unitPercentPipe implements PipeTransform {
    transform(data, args: number, unit: string): any {
        return `data ${unit}`;
    }
}

• 以下是如何使用 unitPercentPipe 来实现添加单位的效果

<!-- 请在html里，写法如下（示例重点说明管道用法）：-->
<!-- 这里的 data = [ 12, 20, 43, 4, 100 ] -->
<table>
	<tr *ngFor="let item of data">
        <td>{{item | unitPercent:'%' }}</td>
	</tr>
</table>

理由：

1. 上面的错误做法首先效率低下，展示到界面上之前就遍历了一次数据
2. 错误做法修改了原数据，不利于扩展，如果来新需求例如：①对表格的这里列再做计算呢，此时拼接了单位，是不是还得给他再转回数字类型？②根据表格做一个统计图，要求表格的数据和统计图联动，此时，拼接了单位，是不是还得再转回数字类型？
3. 错误做法非常的不灵活，对于简单的业务还算可以，但如果是国际化单位换算呢，网站要根据不同国家地域，展示适用于当地的数据怎么办，代码里写多个ifelse吗？
4. 使用管道，不会修改原来的数据，对之后的需求扩展非常友好
5. 使用管道，代码结构清晰条理，思路明确，利于后续扩展开发。
6. 使用管道，没有多余的遍历，执行效率高。