From 7f281c10630c581136a257ba12bec8813039566c Mon Sep 17 00:00:00 2001 From: "Zhimin YE (Rex)" Date: Mon, 6 Jun 2016 13:30:45 +0100 Subject: [PATCH] review of pipes.jade is done. --- public/docs/ts/latest/guide/pipes.jade | 35 +++++++++++++------------- 1 file changed, 17 insertions(+), 18 deletions(-) diff --git a/public/docs/ts/latest/guide/pipes.jade b/public/docs/ts/latest/guide/pipes.jade index b59dc08ee3..6f4cb5cf8b 100644 --- a/public/docs/ts/latest/guide/pipes.jade +++ b/public/docs/ts/latest/guide/pipes.jade @@ -16,8 +16,7 @@ block includes 一旦取到数据，我们可以把它们原始值的`toString`结果直接推入视图中。 但这种做法很少能具备良好的用户体验。 - 比如，几乎每个人都更喜欢简单的日期格式，例如1988-04-15，而不是服务端传过来的原始字符串格 - 式 —— Fri Apr 15 1988 00:00:00 GMT-0700 (Pacific Daylight Time)。 + 比如，几乎每个人都更喜欢简单的日期格式，例如1988-04-15，而不是服务端传过来的原始字符串格式 —— Fri Apr 15 1988 00:00:00 GMT-0700 (Pacific Daylight Time)。 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. @@ -128,7 +127,7 @@ p. That method toggles the component's `format` property between a short form (`'shortDate'`) and a longer form (`'fullDate'`). - 我们还能把一个按钮添加到模板中，并把它的点击事件绑定到组件的`toggleFormat()`方法。 + 我们还能在模板中添加一个按钮，并把它的点击事件绑定到组件的`toggleFormat()`方法。 此方法会在短日期格式(`'shortDate'`)和长日期格式(`'fullDate'`)之间切换组件的`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 Now we need a component to demonstrate our pipe. -现在，我们需要一个组件来演示这个管道。 + 现在，我们需要一个组件来演示这个管道。 +makeExample('pipes/ts/app/power-booster.component.ts',null,'app/power-booster.component.ts')(format='.') figure.image-display 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. p. - 试试这个#[+liveExampleLink()]，然后在模板中修改能量值和可选的放大指数，就能看懂它的行为方式。 + 试试这个#[+liveExampleLink('在线例子')]，然后在模板中修改能量值和可选的放大指数，就能探测它行为方式。 :marked ## Power Boost Calculator (extra-credit) @@ -349,7 +348,7 @@ p. Every hero we add is a flying hero but none of them are displayed. p. - 如果我们现在就运行这个例子，我们会看到一些古怪的行为（在#[+liveExampleLink()]中试试）。 + 如果我们现在就运行这个例子，我们会看到一些古怪的行为（在#[+liveExampleLink('在线例子')]中试试）。 我们添加的每个英雄都会飞，但他们一个都没有显示出来。 :marked @@ -383,8 +382,8 @@ p. The *Flying Heroes* extends the code with checkbox switches and additional displays to help us experience these effects. - *如果我们**修改了**这个数组，不会执行任何管道，显示也没有更新。 - 如果我们**替换了**这个数组，管道就会被执行，显示也更新了。* + 如果我们**修改了**这个数组，没有管道被执行，也没有显示被更新。 + 如果我们**替换了**这个数组，管道就会被执行，显示也更新了。 这个*飞行英雄*的例子用检查框和额外的显示内容扩展了原有代码，来帮我们体验这些效果。 figure.image-display @@ -463,7 +462,7 @@ block pure-change 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. When we can't, we *may* turn to the impure pipe. @@ -536,7 +535,7 @@ p. p. 唯一的重大改动就是管道。 - 我们可以在#[+liveExampleLink()]中确认，当我们输入新的英雄甚至修改#[code heroes]数组时，这个#[i 会飞的英雄]的显示也跟着更新了。 + 我们可以在#[+liveExampleLink('在线例子')]中确认，当我们输入新的英雄甚至修改#[code heroes]数组时，这个#[i 会飞的英雄]的显示也跟着更新了。 - var _dollar = _docsFor === 'ts' ? '$' : ''; 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. 而且它是有状态的。 - 该管道维护着一个到所输入的`Observable`的订阅，并且持续从那个`Observable`中发出新到的值。 + 该管道维护着一个所输入的`Observable`的订阅，并且持续从那个`Observable`中发出新到的值。 In this next example, we bind an `#{_Observable}` of message strings (`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') @@ -570,7 +569,7 @@ h3#async-pipe 非纯管道#[i AsyncPipe] and the component doesn't have to unsubscribe when it is destroyed (a potent source of memory leaks). - 这个Async管道把样板数据存在了组件代码中。 + 这个Async管道节省了组件的样板代码。 组件不用订阅这个异步数据源，而且不用在被销毁时取消订阅（如果订阅了而忘了反订阅容易导致隐晦的内存泄露）。 ### An impure caching pipe @@ -669,7 +668,7 @@ a(id="pure-pipe-pure-fn") So is our `FlyingHeroesPipe`. A few steps back we reviewed the `FlyingHeroesImpurePipe` — *an impure pipe with a pure function*. - 在本章中，我们见过的管道都是用纯函数实现的。 + 我们在本章前面见过的管道都是用纯函数实现的。 内建的`DatePipe`就是一个用纯函数实现的纯管道。 `ExponentialStrengthPipe`是如此， `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. - 但是一个*纯管道*必须总是用*纯函数*实现。忽略这个警告将导致失败 —— 会因为绑定表达式在“变更检测”完成之后又发生改变而带来一大堆控制台错误。 + 但是一个*纯管道*必须总是用*纯函数*实现。忽略这个警告将导致失败并带来一大堆这样的控制台错误：表达式在被检查后被变更。 .l-main-section :marked @@ -689,7 +688,7 @@ a(id="pure-pipe-pure-fn") into our templates expressions to enrich the appeal and usability of our views. - 管道能很好的封装和共享通用的“值-显示”转换逻辑。我们可以像样式一样使用它们，把它们扔到模板表达式中，以提升视图的表现力和可用性。 + 管道能很好的封装和共享的通用“值-显示”转换逻辑。我们可以像样式一样使用它们，把它们扔到模板表达式中，以提升视图的表现力和可用性。 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. @@ -707,7 +706,7 @@ a(id="no-filter-pipe") Developers familiar with Angular 1 know these as `filter` and `orderBy`. There are no equivalents in Angular 2. - Angular没有随身发布进行过滤或列表排序的管道。 + Angular没有随身发布过滤或列表排序的管道。 熟悉Angular 1的开发人员应该知道`filter`和`orderBy`过滤器，但在Angular 2中它们没有等价物。 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 by offering `filter` and `orderBy` in the first place. - 过滤，特别是排序是昂贵的操作。 + 过滤、 特别是排序是昂贵的操作。 当Angular每秒调用很多次这类管道函数时，即使是中等规模的列表都可能严重降低用户体验。 在Angular 1程序中，`filter`和`orderBy`经常被误用，结果连累到Angular自身，人们抱怨说它太慢。 从某种意义上，这也不冤：谁叫Angular 1把`filter`和`orderBy`作为首发队员呢？是它自己准备了这个性能陷阱。