今天,我们要讲的是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;
  }
}

我们干了这些事:

  1. 将pure参数设为false
  2. 在成员函数transform中,执行fetch请求,将结果赋给this.fetchedValue = json,最后返回结果
  3. 如果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,而且没有提到面向对象编程。个人认为最新文档的观点较为准确!使用“有无状态“来区别函数式编程和面向对象编程不够准确!


教程源代码及目录

如果您觉得本博客教程帮到了您,就赏颗星吧!

https://github.com/lewis617/angular2-tutorial

angular2系列教程(六)两种pipe:函数式编程与面向对象编程的更多相关文章

  1. angular2系列教程(十)两种启动方法、两个路由服务、引用类型和单例模式的妙用

    今天我们要讲的是ng2的路由系统. 例子

  2. C#微信公众号开发系列教程六(被动回复与上传下载多媒体文件)

    微信公众号开发系列教程一(调试环境部署) 微信公众号开发系列教程一(调试环境部署续:vs远程调试) C#微信公众号开发系列教程二(新手接入指南) C#微信公众号开发系列教程三(消息体签名及加解密) C ...

  3. [转]Android Studio系列教程六--Gradle多渠道打包

    转自:http://www.stormzhang.com/devtools/2015/01/15/android-studio-tutorial6/ Android Studio系列教程六--Grad ...

  4. Android Studio系列教程六--Gradle多渠道打包

    Android Studio系列教程六--Gradle多渠道打包 2015 年 01 月 15 日 DevTools 本文为个人原创,欢迎转载,但请务必在明显位置注明出处!http://stormzh ...

  5. CRL快速开发框架系列教程六(分布式缓存解决方案)

    本系列目录 CRL快速开发框架系列教程一(Code First数据表不需再关心) CRL快速开发框架系列教程二(基于Lambda表达式查询) CRL快速开发框架系列教程三(更新数据) CRL快速开发框 ...

  6. angular2系列教程(一)hello world

    今天我们要讲的是angular2系列教程的第一篇,主要是学习angular2的运行,以及感受angular2的components以及模板语法. 例子 这个例子非常简单,是个双向数据绑定.我使用了官网 ...

  7. 黄聪:Microsoft Enterprise Library 5.0 系列教程(六) Security Application Block

    原文:黄聪:Microsoft Enterprise Library 5.0 系列教程(六) Security Application Block 开发人员经常编写需要安全功能的应用程序.这些应用程序 ...

  8. 创建对象的两种方法: new 和 面向对象(对象字面量)及对象属性访问方法

    创建对象的两种方法: new 和 面向对象(对象字面量)用 new 时:var o = new Object();o.name = "lin3615";alert(o.name); ...

  9. angular2系列教程(四)Attribute directives

    今天我们要讲的是ng2的Attribute directives.顾名思义,就是操作dom属性的指令.这算是指令的第二课了,因为上节课的components实质也是指令. 例子

随机推荐

  1. 关于C++默认初始化的总结——开个坑

    关于C++初始化总结的博客,其实以前在我的独立博客上写过相关的内容,可惜呀,没有续费,腾讯回收了我的空间, 到现在,关于C++初始化的内容,一直是我的心头病,现在准备开个坑,慢慢的总结进来吧. 1.关 ...

  2. Windows phone 8.1布局控件

    布局控件(4种  第一种) Grid:相当于 HTML 中的 Table 标签,但是注意 Table 更重要的是展示数据,   而 Grid 则是专门为布局所生 属性标记: Grid.RowDefin ...

  3. struts-json-plugin result中配置对象的序列化

    注意: 在使用strtus-json-plugin序列化对象属性,配置result标签下includeProperties属性时使用 对象名.*或则指定属性名的方式,不能光写对象属性名. 问题: ac ...

  4. C#模拟Http与Https请求框架实例

    using System.Text; using System.Net; using System.IO; using System.Text.RegularExpressions; using Sy ...

  5. 【译】Android 6.0 Changes (机翻加轻微人工校对)

    Android 6.0 Changes In this document Runtime Permissions Doze and App Standby Apache HTTP Client Rem ...

  6. ioS基础篇(十九)——UIResponder简析

    UIResponder类定义了对象相应和控制事件的接口,他是UIApplication.UIView的超类,这类的实例通常被称为应答对象. 一.Responder对象 在iOS系统中,能够响应并处理事 ...

  7. Entity Framework Code First 学习

    1.添加entityframework 项目-管理解决方案的 NuGet 程序包-联机-Entity Framework 2.code first Migration 工具->库程序包管理器-& ...

  8. 用VB实现点名程序

    用vb实现点名程序主要是随机变量的产生和数据的读取和存储以及计时器程序的设计,读取的文件命名为data.txt,书写格式为第一行为总人数下面的每行为一个人名,在应用时最好把data文件和程序文件放在一 ...

  9. Android笔记:C memory copy

    socket通讯问题之一: 在c中按字节发送数据  比如设备1状态(1字节)值(1字节)设备2状态(1字节)值(1字节)....这种格式拆分的问题 在c中可以利用struct的 memory copy ...

  10. Oracle VM VirtualBox 设置本机与虚拟机共享文件

    文章转载自http://wenku.baidu.com/link?url=5uZ1xWnGC55FGW2XUqzLVdttRcik2xCqwRKEdh6z-nZJ63UQn3j2750ES_q4Oro ...