angular2系列教程(六)两种pipe:函数式编程与面向对象编程
来源:互联网 发布:笔记本电脑必要软件 编辑:程序博客网 时间:2024/05/22 15:53
今天,我们要讲的是angualr2的pipe这个知识点。
例子
这个例子包含两个pipe,一个是stateful,一个是stateless,是直接复制官方的例子(最新的官网文档已经将其改为了pure和impure,并移除了面向对象的比喻,个人认为较为准确,请以最新的官网文档为参考!)。
源代码
stateless pipe
pipe就是ng1中的filter。先看看内建pipe吧:
currency
date
uppercase
json
limitTo
lowercase
async
decimal
percent
无需编写直接用!今天说了太多“直接用”哈哈!
pipe分为两种,一种是stateful,一种是stateless。我们先说stateless,stateless就是使用纯函数,不记住任何数据,也不会带来任何副作用。DatePipe就是stateless,我们再写个计算次方的pipe吧:
app/stateless/exponential-strength.pipe.ts
import {Pipe, PipeTransform} from 'angular2/core';/* * Raise the value exponentially * Takes an exponent argument that defaults to 1. * Usage: * value | exponentialStrength:exponent * Example: * {{ 2 | exponentialStrength:10}} * formats to: 1024*/@Pipe({name: 'exponentialStrength'})export class ExponentialStrengthPipe implements PipeTransform { transform(value: number, args: string[]) : any { return Math.pow(value, parseInt(args[0] || '1', 10)); }}
很简单,计算某个值的某次方,{{ 2 | exponentialStrength:10}}就是2的10次方。
写个模板测试下:
app/stateless/power-booster.component.ts
import {Component} from 'angular2/core';import {ExponentialStrengthPipe} from './exponential-strength.pipe';@Component({ selector: 'power-booster', template: ` <h2>Power Booster</h2> <p> Super power boost: {{2 | exponentialStrength: 10}} </p> `, pipes: [ExponentialStrengthPipe]})export class PowerBooster { }
注入pipes: [ExponentialStrengthPipe],然后直接用!
stateful pipe
先看一个stateful pipe的例子吧:
app/stateful/fetch-json.pipe.ts
declare var fetch;import {Pipe, PipeTransform} from 'angular2/core';@Pipe({ name: 'fetch', pure: false})export class FetchJsonPipe implements PipeTransform { private fetchedValue: any; private fetchPromise: Promise<any>; transform(value: string, args: string[]): any { if (!this.fetchPromise) { this.fetchPromise = fetch(value) .then((result: any) => result.json()) .then((json: any) => this.fetchedValue = json); } return this.fetchedValue; }}
我们干了这些事:
- 将pure参数设为false
- 在成员函数transform中,执行fetch请求,将结果赋给this.fetchedValue = json,最后返回结果
- 如果this.fetchPromise这个成员变量已经被定义过,则直接返回成员变量fetchedValue
写个模板测试下:
app/stateful/hero-list.component.ts
import {Component} from 'angular2/core';import {FetchJsonPipe} from './fetch-json.pipe';@Component({ selector: 'hero-list', template: ` <h4>Heroes from JSON File</h4> <div *ngFor="#hero of ('/assets/heroes.json' | fetch) "> {{hero.name}} </div> <p>Heroes as JSON: {{'/assets/heroes.json' | fetch | json}} </p> `, pipes: [FetchJsonPipe]})export class HeroListComponent { /* I've got nothing to do ;-) */}
'/assets/heroes.json'是我自己编写的json文件,放在了assets里面,因为这是webpack的静态文件地址。
结果:
特性解读
Stateful pipes are conceptually similar to classes in object-oriented programming. They can manage the data they transform. A pipe that creates an HTTP request, stores the response and displays the output, is a stateful pipe.
这是官方对statefule pipe的描述。说是能够创建http请求,存储响应,显示输出的pipe就是stateful pipe。那么stateless pipe不能做这些事吗?我好奇的在stateless pipe中尝试做http请求:
declare var fetch;import {Pipe, PipeTransform} from 'angular2/core';@Pipe({ name: 'fetch'})export class FetchJsonPipe implements PipeTransform { transform(value: string, args: string[]): any { fetch(value) .then((result: any) => result.json()) .then((json: any) => json); }}
结果什么都输出不了!说明当我们需要使用http的时候,或者处理异步的时候,需要使用stateful pipe。这两个pipe的区别也正是“函数式编程”和“面向对象”的区别——有无状态。在最新的官网文档中,已经把这两个pipe改为了pure和impure,而且没有提到面向对象编程。个人认为最新文档的观点较为准确!使用“有无状态“来区别函数式编程和面向对象编程不够准确!
- angular2系列教程(六)两种pipe:函数式编程与面向对象编程
- C++面向对象编程入门:构造函数与析构函数(六)
- 函数式编程与面向对象编程的比较
- 第八课 面向对象编程 (六)
- javascript面向对象编程(六)
- C++面向对象编程(六) 继承
- Reactor事件驱动的两种设计实现:面向对象 VS 函数式编程
- Reactor事件驱动的两种设计实现:面向对象 VS 函数式编程
- 面向对象编程和函数式编程
- 函数式编程vs面向对象编程
- 面向对象编程 vs 函数式编程
- 函数式编程,面向对象编程
- C++函数式编程(四)面向对象编程
- 面向对象编程---函数
- C++面向对象编程<六>:Big Three,三个特殊函数
- Angular2教程(六)
- 函数式编程与面向对象的宗派之争
- 慕课网学习Python进阶教程,包括(函数式编程、模块、面向对象编程、类的继承、定制类)
- CSDN日报20170417 ——《程序员最好有 社保》
- Matlab卷积编码器维特比译码-通信专业课程设计
- Codeforces Round #409Div.2D. Volatile Kite(计算几何)
- 用HTML写一首诗并配上图片,需要满足诗的格式
- fread读入优化,寻找速度极限
- angular2系列教程(六)两种pipe:函数式编程与面向对象编程
- 并查集!!
- 常用的五大排序
- 如何用postman控制ODL设置端口的QoS, 并下发流表到交换机做限速配置
- Linux 下显示黑客帝国的矩阵效果
- 有关按键的专利
- angular2系列教程(五)Structural directives、再谈组件生命周期
- leetcode#99 Recover Binary Search Tree
- 数据源