review of pipes.jade is done.
This commit is contained in:
parent
c16f003d51
commit
7f281c1063
|
@ -16,8 +16,7 @@ block includes
|
||||||
|
|
||||||
一旦取到数据,我们可以把它们原始值的`toString`结果直接推入视图中。
|
一旦取到数据,我们可以把它们原始值的`toString`结果直接推入视图中。
|
||||||
但这种做法很少能具备良好的用户体验。
|
但这种做法很少能具备良好的用户体验。
|
||||||
比如,几乎每个人都更喜欢简单的日期格式,例如<samp>1988-04-15</samp>,而不是服务端传过来的原始字符串格
|
比如,几乎每个人都更喜欢简单的日期格式,例如<samp>1988-04-15</samp>,而不是服务端传过来的原始字符串格式 —— <samp>Fri Apr 15 1988 00:00:00 GMT-0700 (Pacific Daylight Time)</samp>。
|
||||||
式 —— <samp>Fri Apr 15 1988 00:00:00 GMT-0700 (Pacific Daylight Time)</samp>。
|
|
||||||
|
|
||||||
Clearly some values benefit from a bit of massage. We soon discover that we
|
Clearly some values benefit from a bit of massage. We soon discover that we
|
||||||
desire many of the same transformations repeatedly, both within and across many applications.
|
desire many of the same transformations repeatedly, both within and across many applications.
|
||||||
|
@ -128,7 +127,7 @@ p.
|
||||||
That method toggles the component's `format` property between a short form
|
That method toggles the component's `format` property between a short form
|
||||||
(`'shortDate'`) and a longer form (`'fullDate'`).
|
(`'shortDate'`) and a longer form (`'fullDate'`).
|
||||||
|
|
||||||
我们还能把一个按钮添加到模板中,并把它的点击事件绑定到组件的`toggleFormat()`方法。
|
我们还能在模板中添加一个按钮,并把它的点击事件绑定到组件的`toggleFormat()`方法。
|
||||||
此方法会在短日期格式(`'shortDate'`)和长日期格式(`'fullDate'`)之间切换组件的`format`属性。
|
此方法会在短日期格式(`'shortDate'`)和长日期格式(`'fullDate'`)之间切换组件的`format`属性。
|
||||||
|
|
||||||
+makeExample('pipes/ts/app/hero-birthday2.component.ts', 'class', 'app/hero-birthday2.component.ts (class)')(format='.')
|
+makeExample('pipes/ts/app/hero-birthday2.component.ts', 'class', 'app/hero-birthday2.component.ts (class)')(format='.')
|
||||||
|
@ -233,7 +232,7 @@ figure.image-display
|
||||||
:marked
|
:marked
|
||||||
Now we need a component to demonstrate our pipe.
|
Now we need a component to demonstrate our pipe.
|
||||||
|
|
||||||
现在,我们需要一个组件来演示这个管道。
|
现在,我们需要一个组件来演示这个管道。
|
||||||
+makeExample('pipes/ts/app/power-booster.component.ts',null,'app/power-booster.component.ts')(format='.')
|
+makeExample('pipes/ts/app/power-booster.component.ts',null,'app/power-booster.component.ts')(format='.')
|
||||||
figure.image-display
|
figure.image-display
|
||||||
img(src='/resources/images/devguide/pipes/power-booster.png' alt="Power Booster")
|
img(src='/resources/images/devguide/pipes/power-booster.png' alt="Power Booster")
|
||||||
|
@ -268,7 +267,7 @@ p.
|
||||||
we can probe its behavior by changing the value and the optional exponent in the template.
|
we can probe its behavior by changing the value and the optional exponent in the template.
|
||||||
|
|
||||||
p.
|
p.
|
||||||
试试这个#[+liveExampleLink()],然后在模板中修改能量值和可选的放大指数,就能看懂它的行为方式。
|
试试这个#[+liveExampleLink('在线例子')],然后在模板中修改能量值和可选的放大指数,就能探测它行为方式。
|
||||||
|
|
||||||
:marked
|
:marked
|
||||||
## Power Boost Calculator (extra-credit)
|
## Power Boost Calculator (extra-credit)
|
||||||
|
@ -349,7 +348,7 @@ p.
|
||||||
Every hero we add is a flying hero but none of them are displayed.
|
Every hero we add is a flying hero but none of them are displayed.
|
||||||
|
|
||||||
p.
|
p.
|
||||||
如果我们现在就运行这个例子,我们会看到一些古怪的行为(在#[+liveExampleLink()]中试试)。
|
如果我们现在就运行这个例子,我们会看到一些古怪的行为(在#[+liveExampleLink('在线例子')]中试试)。
|
||||||
我们添加的每个英雄都会飞,但他们一个都没有显示出来。
|
我们添加的每个英雄都会飞,但他们一个都没有显示出来。
|
||||||
|
|
||||||
:marked
|
:marked
|
||||||
|
@ -383,8 +382,8 @@ p.
|
||||||
The *Flying Heroes* extends the
|
The *Flying Heroes* extends the
|
||||||
code with checkbox switches and additional displays to help us experience these effects.
|
code with checkbox switches and additional displays to help us experience these effects.
|
||||||
|
|
||||||
*如果我们**修改了**这个数组,不会执行任何管道,显示也没有更新。
|
如果我们**修改了**这个数组,没有管道被执行,也没有显示被更新。
|
||||||
如果我们**替换了**这个数组,管道就会被执行,显示也更新了。*
|
如果我们**替换了**这个数组,管道就会被执行,显示也更新了。
|
||||||
这个*飞行英雄*的例子用检查框和额外的显示内容扩展了原有代码,来帮我们体验这些效果。
|
这个*飞行英雄*的例子用检查框和额外的显示内容扩展了原有代码,来帮我们体验这些效果。
|
||||||
|
|
||||||
figure.image-display
|
figure.image-display
|
||||||
|
@ -463,7 +462,7 @@ block pure-change
|
||||||
pipe execution and a view update.
|
pipe execution and a view update.
|
||||||
|
|
||||||
这可能看起来是一种限制,但它保证了速度。
|
这可能看起来是一种限制,但它保证了速度。
|
||||||
对象引用的检查是非常快的(比递归的深检查要快得多),所以Angular可以快速的决定是否应该在执行管道和更新视图时跳过它。
|
对象引用的检查是非常快的(比递归的深检查要快得多),所以Angular可以快速的决定是否应该跳过管道执行和视图更新。
|
||||||
|
|
||||||
For this reason, we prefer a pure pipe if we can live with the change detection strategy.
|
For this reason, we prefer a pure pipe if we can live with the change detection strategy.
|
||||||
When we can't, we *may* turn to the impure pipe.
|
When we can't, we *may* turn to the impure pipe.
|
||||||
|
@ -536,7 +535,7 @@ p.
|
||||||
|
|
||||||
p.
|
p.
|
||||||
唯一的重大改动就是管道。
|
唯一的重大改动就是管道。
|
||||||
我们可以在#[+liveExampleLink()]中确认,当我们输入新的英雄甚至修改#[code heroes]数组时,这个#[i 会飞的英雄]的显示也跟着更新了。
|
我们可以在#[+liveExampleLink('在线例子')]中确认,当我们输入新的英雄甚至修改#[code heroes]数组时,这个#[i 会飞的英雄]的显示也跟着更新了。
|
||||||
|
|
||||||
- var _dollar = _docsFor === 'ts' ? '$' : '';
|
- var _dollar = _docsFor === 'ts' ? '$' : '';
|
||||||
h3#async-pipe The impure #[i AsyncPipe]
|
h3#async-pipe The impure #[i AsyncPipe]
|
||||||
|
@ -554,12 +553,12 @@ h3#async-pipe 非纯管道#[i AsyncPipe]
|
||||||
keeps delivering values from that `#{_Observable}` as they arrive.
|
keeps delivering values from that `#{_Observable}` as they arrive.
|
||||||
|
|
||||||
而且它是有状态的。
|
而且它是有状态的。
|
||||||
该管道维护着一个到所输入的`Observable`的订阅,并且持续从那个`Observable`中发出新到的值。
|
该管道维护着一个所输入的`Observable`的订阅,并且持续从那个`Observable`中发出新到的值。
|
||||||
|
|
||||||
In this next example, we bind an `#{_Observable}` of message strings
|
In this next example, we bind an `#{_Observable}` of message strings
|
||||||
(`message#{_dollar}`) to a view with the `async` pipe.
|
(`message#{_dollar}`) to a view with the `async` pipe.
|
||||||
|
|
||||||
在下个例子中,我们使用该`async`管道把一个消息字符串(`message#{_dollar}`)的`#{_Observable}`绑定到视图中。
|
在下面例子中,我们使用该`async`管道把一个消息字符串(`message#{_dollar}`)的`#{_Observable}`绑定到视图中。
|
||||||
|
|
||||||
+makeExample('pipes/ts/app/hero-async-message.component.ts', null, 'app/hero-async-message.component.ts')
|
+makeExample('pipes/ts/app/hero-async-message.component.ts', null, 'app/hero-async-message.component.ts')
|
||||||
|
|
||||||
|
@ -570,7 +569,7 @@ h3#async-pipe 非纯管道#[i AsyncPipe]
|
||||||
and the component doesn't have to unsubscribe when it is destroyed
|
and the component doesn't have to unsubscribe when it is destroyed
|
||||||
(a potent source of memory leaks).
|
(a potent source of memory leaks).
|
||||||
|
|
||||||
这个Async管道把样板数据存在了组件代码中。
|
这个Async管道节省了组件的样板代码。
|
||||||
组件不用订阅这个异步数据源,而且不用在被销毁时取消订阅(如果订阅了而忘了反订阅容易导致隐晦的内存泄露)。
|
组件不用订阅这个异步数据源,而且不用在被销毁时取消订阅(如果订阅了而忘了反订阅容易导致隐晦的内存泄露)。
|
||||||
|
|
||||||
### An impure caching pipe
|
### An impure caching pipe
|
||||||
|
@ -669,7 +668,7 @@ a(id="pure-pipe-pure-fn")
|
||||||
So is our `FlyingHeroesPipe`.
|
So is our `FlyingHeroesPipe`.
|
||||||
A few steps back we reviewed the `FlyingHeroesImpurePipe` — *an impure pipe with a pure function*.
|
A few steps back we reviewed the `FlyingHeroesImpurePipe` — *an impure pipe with a pure function*.
|
||||||
|
|
||||||
在本章中,我们见过的管道都是用纯函数实现的。
|
我们在本章前面见过的管道都是用纯函数实现的。
|
||||||
内建的`DatePipe`就是一个用纯函数实现的纯管道。
|
内建的`DatePipe`就是一个用纯函数实现的纯管道。
|
||||||
`ExponentialStrengthPipe`是如此,
|
`ExponentialStrengthPipe`是如此,
|
||||||
`FlyingHeroesComponent`也是如此。
|
`FlyingHeroesComponent`也是如此。
|
||||||
|
@ -677,7 +676,7 @@ a(id="pure-pipe-pure-fn")
|
||||||
|
|
||||||
But a *pure pipe* must always be implemented with a *pure function*. Failure to heed this warning will bring about many a console errors regarding expressions that have changed after they were checked.
|
But a *pure pipe* must always be implemented with a *pure function*. Failure to heed this warning will bring about many a console errors regarding expressions that have changed after they were checked.
|
||||||
|
|
||||||
但是一个*纯管道*必须总是用*纯函数*实现。忽略这个警告将导致失败 —— 会因为绑定表达式在“变更检测”完成之后又发生改变而带来一大堆控制台错误。
|
但是一个*纯管道*必须总是用*纯函数*实现。忽略这个警告将导致失败并带来一大堆这样的控制台错误:表达式在被检查后被变更。
|
||||||
|
|
||||||
.l-main-section
|
.l-main-section
|
||||||
:marked
|
:marked
|
||||||
|
@ -689,7 +688,7 @@ a(id="pure-pipe-pure-fn")
|
||||||
into our templates expressions to enrich the appeal and usability
|
into our templates expressions to enrich the appeal and usability
|
||||||
of our views.
|
of our views.
|
||||||
|
|
||||||
管道能很好的封装和共享通用的“值-显示”转换逻辑。我们可以像样式一样使用它们,把它们扔到模板表达式中,以提升视图的表现力和可用性。
|
管道能很好的封装和共享的通用“值-显示”转换逻辑。我们可以像样式一样使用它们,把它们扔到模板表达式中,以提升视图的表现力和可用性。
|
||||||
|
|
||||||
Explore Angular's inventory of built-in pipes in the [API Reference](../api/#!?apiFilter=pipe).
|
Explore Angular's inventory of built-in pipes in the [API Reference](../api/#!?apiFilter=pipe).
|
||||||
Try writing a custom pipe and perhaps contributing it to the community.
|
Try writing a custom pipe and perhaps contributing it to the community.
|
||||||
|
@ -707,7 +706,7 @@ a(id="no-filter-pipe")
|
||||||
Developers familiar with Angular 1 know these as `filter` and `orderBy`.
|
Developers familiar with Angular 1 know these as `filter` and `orderBy`.
|
||||||
There are no equivalents in Angular 2.
|
There are no equivalents in Angular 2.
|
||||||
|
|
||||||
Angular没有随身发布进行过滤或列表排序的管道。
|
Angular没有随身发布过滤或列表排序的管道。
|
||||||
熟悉Angular 1的开发人员应该知道`filter`和`orderBy`过滤器,但在Angular 2中它们没有等价物。
|
熟悉Angular 1的开发人员应该知道`filter`和`orderBy`过滤器,但在Angular 2中它们没有等价物。
|
||||||
|
|
||||||
This is not an oversight. Angular 2 is unlikely to offer such pipes because
|
This is not an oversight. Angular 2 is unlikely to offer such pipes because
|
||||||
|
@ -726,7 +725,7 @@ a(id="no-filter-pipe")
|
||||||
That charge is fair in the indirect sense that Angular 1 prepared this performance trap
|
That charge is fair in the indirect sense that Angular 1 prepared this performance trap
|
||||||
by offering `filter` and `orderBy` in the first place.
|
by offering `filter` and `orderBy` in the first place.
|
||||||
|
|
||||||
过滤,特别是排序是昂贵的操作。
|
过滤、 特别是排序是昂贵的操作。
|
||||||
当Angular每秒调用很多次这类管道函数时,即使是中等规模的列表都可能严重降低用户体验。
|
当Angular每秒调用很多次这类管道函数时,即使是中等规模的列表都可能严重降低用户体验。
|
||||||
在Angular 1程序中,`filter`和`orderBy`经常被误用,结果连累到Angular自身,人们抱怨说它太慢。
|
在Angular 1程序中,`filter`和`orderBy`经常被误用,结果连累到Angular自身,人们抱怨说它太慢。
|
||||||
从某种意义上,这也不冤:谁叫Angular 1把`filter`和`orderBy`作为首发队员呢?是它自己准备了这个性能陷阱。
|
从某种意义上,这也不冤:谁叫Angular 1把`filter`和`orderBy`作为首发队员呢?是它自己准备了这个性能陷阱。
|
||||||
|
|
Loading…
Reference in New Issue