1 分钟读完 JavaScript Async/Await Explained in 10 Minutes

以前我们使用 callback。

后来我们使用 Promise。

现在我们使用 Async/Await。

1、什么是 Async/Await？

Async - 定义异步函数(async function someName(){...})

• 自动把函数转换为 Promise
• 当调用异步函数时，函数返回值会被 resolve 处理
• 异步函数内部可以使用 await

Await - 暂停异步函数的执行 (var result = await someAsyncCall();)

• 当使用在 Promise 前面时，await 等待 Promise 完成，并返回 Promise 的结果
• await只能和 Promise 一起使用，不能和 callback 一起使用
• await 只能用在 async 函数中

2、Async/Await 是否会取代 Promise

不会。

• Async/Await 底层依然使用了 Promise。
• 多个异步函数同时执行时，需要借助 Promise.all

async function getABC() {
  let A = await getValueA(); // getValueA 花费 2 秒
  let B = await getValueB(); // getValueA 花费 4 秒
  let C = await getValueC(); // getValueA 花费 3 秒

  return A*B*C;
}

每次遇到 await 关键字时，Promise 都会停下在，一直到运行结束，所以总共花费是 2+4+3 = 9 秒。await 把异步变成了同步。

async function getABC() {
  // Promise.all() 允许同时执行所有的异步函数
  let results = await Promise.all([ getValueA, getValueB, getValueC ]); 

  return results.reduce((total,value) => total * value);
}

函数总耗时为 4 秒（getValueB 的耗时）。

3、Async/Await 的错误处理

在 Async/Await 语法中，我们可以使用 try/catch 进行错误处理。在 Promise 中的 .catch() 分支会进入 catch 语句。

阅读原文：JavaScript Async/Await Explained in 10 Minutes

讨论地址：10 分钟学会 JavaScript 的 Async/Await

如果你想参与讨论，请点击这里

• 原文地址：Functional-Light-JS

• 原文作者：Kyle Simpson－《You-Dont-Know-JS》作者

关于译者：这是一个流淌着沪江血液的纯粹工程：认真，是 HTML 最坚实的梁柱；分享，是 CSS 里最闪耀的一瞥；总结，是 JavaScript 中最严谨的逻辑。经过捶打磨练，成就了本书的中文版。本书包含了函数式编程之精髓，希望可以帮助大家在学习函数式编程的道路上走的更顺畅。比心。

译者团队（排名不分先后）：阿希、blueken、brucecham、cfanlife、dail、kyoko-df、l3ve、lilins、LittlePineapple、MatildaJin、冬青、pobusama、Cherry、萝卜、vavd317、vivaxy、萌萌、zhouyao

JavaScript 轻量级函数式编程

附录 A：Transducing

Transducing 是我们这本书要讲到的更为高级的技术。它继承了第 8 章数组操作的许多思想。

我不会把 Transducing 严格的称为“轻量级函数式编程”，它更像是一个顶级的技巧。我把这个技术留到附录来讲意味着你现在很可能并不需要关心它，当你确保你已经非常熟悉整本书的主要内容，你可以再回头看看这一章节。

说实话，即使我已经教过 transducing 很多次了，在写这一章的时候，我仍然需要花很多脑力去理清楚这个技术。所以，如果你看这一章看的很疑惑也没必要感到沮丧。把这一章加个书签，等你觉得你差不多能理解时再回头看看。

Transducing 就是通过减少来转换。

我知道这听起来很令人费解。但是让我们来看看它有多强大。实际上，我认为这是你掌握了轻量级函数式编程后可以做的最好的例证之一。

和这本书的其他部分一样，我的方法是先解释为什么使用这个技术，然后如何使用，最后归结为简单的这个技术到底是什么样的。这通常会有多学很多东西，但是我觉得用这种方式你会更深入的理解它。

首先，为什么

让我们从扩展我们在第 3 章中介绍的例子开始，测试单词是否足够短和/或足够长：

function isLongEnough(str) {
    return str.length >= 5;
}

function isShortEnough(str) {
    return str.length <= 10;
}

在第 3 章中，我们使用这些断言函数来测试一个单词。然后在第 8 章中，我们学习了如何使用像 filter(..) 这样的数组操作来重复这些测试。例如:

var words = [ "You", "have", "written", "something", "very", "interesting" ];

words
.filter( isLongEnough )
.filter( isShortEnough );
// ["written","something"]

这个例子可能并不明显，但是这种分开操作相同数组的方式具有一些不理想的地方。当我们处理一个值比较少的数组时一切都还好。但是如果数组中有很多值，每个 filter(..) 分别处理数组的每个值会比我们预期的慢一点。

当我们的数组是异步/懒惰（也称为 observables）的，随着时间的推移响应事件处理（见第 10 章），会出现类似的性能问题。在这种情况下，一次事件只有一个值，因此使用两个单独的 filter(..) 函数处理这些值并不是什么大不了的事情。

但是，不太明显的是每个 filter(..) 方法都会产生一个单独的 observable 值。从一个 observable 值中抽出一个值的开销真的可以加起来（译者注：详情请看第 10 章的“积极的 vs 惰性的”这一节）。这是真实存在的，因为在这些情况下，处理数千或数百万的值并不罕见; 所以，即使是这么小的成本也会很快累加起来。

另一个缺点是可读性，特别是当我们需要对多个数组（或 observable）重复相同的操作时。例如:

zip(
    list1.filter( isLongEnough ).filter( isShortEnough ),
    list2.filter( isLongEnough ).filter( isShortEnough ),
    list3.filter( isLongEnough ).filter( isShortEnough )
)

显得很重复，对不对？

如果我们可以将 isLongEnough(..) 断言与 isShortEnough(..) 断言组合在一起是不是会更好一点呢（可读性和性能）？你可以手动执行：

function isCorrectLength(str) {
    return isLongEnough( str ) && isShortEnough( str );
}

但这不是函数式编程的方式！

在第 8 章中，我们讨论了融合 —— 组合相邻映射函数。回忆一下：

words
.map(
    pipe( removeInvalidChars, upper, elide )
);

不幸的是，组合相邻断言函数并不像组合相邻映射函数那样容易。为什么呢？想想断言函数长什么“样子” —— 一种描述输入和输出的学术方式。它接收一个单一的参数，返回一个 true 或 false。

如果你试着用 isshortenough(islongenough(str))，这是行不通的。因为 islongenough(..) 会返回 true 或者 false ，而不是返回 isshortenough(..) 所要的字符串类型的值。这可真倒霉。

试图组合两个相邻的 reducer 函数同样是行不通的。reducer 函数接收两个值作为输入，并返回单个组合值。reducer 函数的单一返回值也不能作为参数传到另一个需要两个输入的 reducer 函数中。

此外，reduce(..) 辅助函数可以接收一个可选的 initialValue 输入。有时可以省略，但有时候它又必须被传入。这就让组合更复杂了，因为一个 reduce(..) 可能需要一个 initialValue，而另一个 reduce(..) 可能需要另一个 initialValue。所以我们怎么可能只用某种组合的 reducer 来实现 reduce(..) 呢。

考虑像这样的链：

words
.map( strUppercase )
.filter( isLongEnough )
.filter( isShortEnough )
.reduce( strConcat, "" );
// "WRITTENSOMETHING"

你能想出一个组合能够包含 map(strUppercase)， filter(isLongEnough)，filter(isShortEnough)， reduce(strConcat) 所有这些操作吗？每种操作的行为是不同的，所以不能直接组合在一起。我们需要把它们修改下让它们组合在一起。

希望这些例子说明了为什么简单的组合不能胜任这项任务。我们需要一个更强大的技术，而 transducing 就是这个技术。

如何，下一步

让我们谈谈我们该如何得到一个能组合映射，断言和/或 reducers 的框架。

别太紧张：你不必经历编程过程中所有的探索步骤。一旦你理解了 transducing 能解决的问题，你就可以直接使用函数式编程库中的 transduce(..) 工具继续你应用程序的剩余部分！

让我们开始探索吧。

把 Map/Filter 表示为 Reduce

我们要做的第一件事情就是将我们的 filter(..) 和 map(..)调用变为 reduce(..) 调用。回想一下我们在第 8 章是怎么做的：

function strUppercase(str) { return str.toUpperCase(); }
function strConcat(str1,str2) { return str1 + str2; }

function strUppercaseReducer(list,str) {
    list.push( strUppercase( str ) );
    return list;
}

function isLongEnoughReducer(list,str) {
    if (isLongEnough( str )) list.push( str );
    return list;
}

function isShortEnoughReducer(list,str) {
    if (isShortEnough( str )) list.push( str );
    return list;
}

words
.reduce( strUppercaseReducer, [] )
.reduce( isLongEnoughReducer, [] )
.reduce( isShortEnough, [] )
.reduce( strConcat, "" );
// "WRITTENSOMETHING"

这是一个不错的改进。我们现在有四个相邻的 reduce(..) 调用，而不是三种不同方法的混合。然而，我们仍然不能 compose(..) 这四个 reducer，因为它们接受两个参数而不是一个参数。

在 8 章，我们偷了点懒使用了数组的 push 方法而不是 concat(..) 方法返回一个新数组，导致有副作用。现在让我们更正式一点：

function strUppercaseReducer(list,str) {
    return list.concat( [strUppercase( str )] );
}

function isLongEnoughReducer(list,str) {
    if (isLongEnough( str )) return list.concat( [str] );
    return list;
}

function isShortEnoughReducer(list,str) {
    if (isShortEnough( str )) return list.concat( [str] );
    return list;
}

在后面我们会来头看看这里是否需要 concat(..)。

参数化 Reducers

除了使用不同的断言函数之外，两个 filter reducers 几乎相同。让我们把这些 reducers 参数化得到一个可以定义任何 filter-reducer 的工具函数：

function filterReducer(predicateFn) {
    return function reducer(list,val){
        if (predicateFn( val )) return list.concat( [val] );
        return list;
    };
}

var isLongEnoughReducer = filterReducer( isLongEnough );
var isShortEnoughReducer = filterReducer( isShortEnough );

同样的，我们把 mapperFn(..) 也参数化来生成 map-reducer 函数：

function mapReducer(mapperFn) {
    return function reducer(list,val){
        return list.concat( [mapperFn( val )] );
    };
}

var strToUppercaseReducer = mapReducer( strUppercase );

我们的调用链看起来是一样的：

words
.reduce( strUppercaseReducer, [] )
.reduce( isLongEnoughReducer, [] )
.reduce( isShortEnough, [] )
.reduce( strConcat, "" );

提取共用组合逻辑

仔细观察上面的 mapReducer(..) 和 filterReducer(..) 函数。你发现共享功能了吗？

这部分：

return list.concat( .. );

// 或者
return list;

让我们为这个通用逻辑定义一个辅助函数。但是我们叫它什么呢？

function WHATSITCALLED(list,val) {
    return list.concat( [val] );
}

WHATSITCALLED(..) 函数做了些什么呢，它接收两个参数（一个数组和另一个值），将值 concat 到数组的末尾返回一个新的数组。所以这个 WHATSITCALLED(..) 名字不合适，我们可以叫它 listCombination(..) ：

function listCombination(list,val) {
    return list.concat( [val] );
}

我们现在用 listCombination(..) 来重新定义我们的 reducer 辅助函数：

function mapReducer(mapperFn) {
    return function reducer(list,val){
        return listCombination( list, mapperFn( val ) );
    };
}

function filterReducer(predicateFn) {
    return function reducer(list,val){
        if (predicateFn( val )) return listCombination( list, val );
        return list;
    };
}

我们的调用链看起来还是一样的（这里就不重复写了）。

参数化组合

我们的 listCombination(..) 小工具只是组合两个值的一种方式。让我们将它的用途参数化，以使我们的 reducers 更加通用：

function mapReducer(mapperFn,combinationFn) {
    return function reducer(list,val){
        return combinationFn( list, mapperFn( val ) );
    };
}

function filterReducer(predicateFn,combinationFn) {
    return function reducer(list,val){
        if (predicateFn( val )) return combinationFn( list, val );
        return list;
    };
}

使用这种形式的辅助函数：

var strToUppercaseReducer = mapReducer( strUppercase, listCombination );
var isLongEnoughReducer = filterReducer( isLongEnough, listCombination );
var isShortEnoughReducer = filterReducer( isShortEnough, listCombination );

将这些实用函数定义为接收两个参数而不是一个参数不太方便组合，因此我们使用我们的 curry(..) （柯里化）方法：

var curriedMapReducer = curry( function mapReducer(mapperFn,combinationFn){
    return function reducer(list,val){
        return combinationFn( list, mapperFn( val ) );
    };
} );

var curriedFilterReducer = curry( function filterReducer(predicateFn,combinationFn){
    return function reducer(list,val){
        if (predicateFn( val )) return combinationFn( list, val );
        return list;
    };
} );

var strToUppercaseReducer =
    curriedMapReducer( strUppercase )( listCombination );
var isLongEnoughReducer =
    curriedFilterReducer( isLongEnough )( listCombination );
var isShortEnoughReducer =
    curriedFilterReducer( isShortEnough )( listCombination );

这看起来有点冗长而且可能不是很有用。

但这实际上是我们进行下一步推导的必要条件。请记住，我们的最终目标是能够 compose(..) 这些 reducers。我们快要完成了。

　附录 A：Transducing（下）－－－－ 四天后更新

** 【上一章】[翻译连载 | 第 11 章：融会贯通 －《JavaScript轻量级函数式编程》 |《你不知道的JS》姊妹篇
](https://juejin.im/post/5a0cf1... **

iKcamp原创新书《移动Web前端高效开发实战》已在亚马逊、京东、当当开售。

iKcamp官网：https://www.ikcamp.com
访问官网更快阅读全部免费分享课程：
《iKcamp出品｜全网最新｜微信小程序｜基于最新版1.0开发者工具之初中级培训教程分享》
《iKcamp出品｜基于Koa2搭建Node.js实战项目教程》
包含：文章、视频、源代码

• 原文地址：Functional-Light-JS

• 原文作者：Kyle Simpson－《You-Dont-Know-JS》作者

关于译者：这是一个流淌着沪江血液的纯粹工程：认真，是 HTML 最坚实的梁柱；分享，是 CSS 里最闪耀的一瞥；总结，是 JavaScript 中最严谨的逻辑。经过捶打磨练，成就了本书的中文版。本书包含了函数式编程之精髓，希望可以帮助大家在学习函数式编程的道路上走的更顺畅。比心。

译者团队（排名不分先后）：阿希、blueken、brucecham、cfanlife、dail、kyoko-df、l3ve、lilins、LittlePineapple、MatildaJin、冬青、pobusama、Cherry、萝卜、vavd317、vivaxy、萌萌、zhouyao

JavaScript 轻量级函数式编程

附录 A：Transducing

Transducing 是我们这本书要讲到的更为高级的技术。它继承了第 8 章数组操作的许多思想。

我不会把 Transducing 严格的称为“轻量级函数式编程”，它更像是一个顶级的技巧。我把这个技术留到附录来讲意味着你现在很可能并不需要关心它，当你确保你已经非常熟悉整本书的主要内容，你可以再回头看看这一章节。

说实话，即使我已经教过 transducing 很多次了，在写这一章的时候，我仍然需要花很多脑力去理清楚这个技术。所以，如果你看这一章看的很疑惑也没必要感到沮丧。把这一章加个书签，等你觉得你差不多能理解时再回头看看。

Transducing 就是通过减少来转换。

我知道这听起来很令人费解。但是让我们来看看它有多强大。实际上，我认为这是你掌握了轻量级函数式编程后可以做的最好的例证之一。

和这本书的其他部分一样，我的方法是先解释为什么使用这个技术，然后如何使用，最后归结为简单的这个技术到底是什么样的。这通常会有多学很多东西，但是我觉得用这种方式你会更深入的理解它。

首先，为什么

让我们从扩展我们在第 3 章中介绍的例子开始，测试单词是否足够短和/或足够长：

function isLongEnough(str) {
    return str.length >= 5;
}

function isShortEnough(str) {
    return str.length <= 10;
}

在第 3 章中，我们使用这些断言函数来测试一个单词。然后在第 8 章中，我们学习了如何使用像 filter(..) 这样的数组操作来重复这些测试。例如:

var words = [ "You", "have", "written", "something", "very", "interesting" ];

words
.filter( isLongEnough )
.filter( isShortEnough );
// ["written","something"]

这个例子可能并不明显，但是这种分开操作相同数组的方式具有一些不理想的地方。当我们处理一个值比较少的数组时一切都还好。但是如果数组中有很多值，每个 filter(..) 分别处理数组的每个值会比我们预期的慢一点。

当我们的数组是异步/懒惰（也称为 observables）的，随着时间的推移响应事件处理（见第 10 章），会出现类似的性能问题。在这种情况下，一次事件只有一个值，因此使用两个单独的 filter(..) 函数处理这些值并不是什么大不了的事情。

但是，不太明显的是每个 filter(..) 方法都会产生一个单独的 observable 值。从一个 observable 值中抽出一个值的开销真的可以加起来（译者注：详情请看第 10 章的“积极的 vs 惰性的”这一节）。这是真实存在的，因为在这些情况下，处理数千或数百万的值并不罕见; 所以，即使是这么小的成本也会很快累加起来。

另一个缺点是可读性，特别是当我们需要对多个数组（或 observable）重复相同的操作时。例如:

zip(
    list1.filter( isLongEnough ).filter( isShortEnough ),
    list2.filter( isLongEnough ).filter( isShortEnough ),
    list3.filter( isLongEnough ).filter( isShortEnough )
)

显得很重复，对不对？

如果我们可以将 isLongEnough(..) 断言与 isShortEnough(..) 断言组合在一起是不是会更好一点呢（可读性和性能）？你可以手动执行：

function isCorrectLength(str) {
    return isLongEnough( str ) && isShortEnough( str );
}

但这不是函数式编程的方式！

在第 8 章中，我们讨论了融合 —— 组合相邻映射函数。回忆一下：

words
.map(
    pipe( removeInvalidChars, upper, elide )
);

不幸的是，组合相邻断言函数并不像组合相邻映射函数那样容易。为什么呢？想想断言函数长什么“样子” —— 一种描述输入和输出的学术方式。它接收一个单一的参数，返回一个 true 或 false。

如果你试着用 isshortenough(islongenough(str))，这是行不通的。因为 islongenough(..) 会返回 true 或者 false ，而不是返回 isshortenough(..) 所要的字符串类型的值。这可真倒霉。

试图组合两个相邻的 reducer 函数同样是行不通的。reducer 函数接收两个值作为输入，并返回单个组合值。reducer 函数的单一返回值也不能作为参数传到另一个需要两个输入的 reducer 函数中。

此外，reduce(..) 辅助函数可以接收一个可选的 initialValue 输入。有时可以省略，但有时候它又必须被传入。这就让组合更复杂了，因为一个 reduce(..) 可能需要一个 initialValue，而另一个 reduce(..) 可能需要另一个 initialValue。所以我们怎么可能只用某种组合的 reducer 来实现 reduce(..) 呢。

考虑像这样的链：

words
.map( strUppercase )
.filter( isLongEnough )
.filter( isShortEnough )
.reduce( strConcat, "" );
// "WRITTENSOMETHING"

你能想出一个组合能够包含 map(strUppercase)， filter(isLongEnough)，filter(isShortEnough)， reduce(strConcat) 所有这些操作吗？每种操作的行为是不同的，所以不能直接组合在一起。我们需要把它们修改下让它们组合在一起。

希望这些例子说明了为什么简单的组合不能胜任这项任务。我们需要一个更强大的技术，而 transducing 就是这个技术。

如何，下一步

让我们谈谈我们该如何得到一个能组合映射，断言和/或 reducers 的框架。

别太紧张：你不必经历编程过程中所有的探索步骤。一旦你理解了 transducing 能解决的问题，你就可以直接使用函数式编程库中的 transduce(..) 工具继续你应用程序的剩余部分！

让我们开始探索吧。

把 Map/Filter 表示为 Reduce

我们要做的第一件事情就是将我们的 filter(..) 和 map(..)调用变为 reduce(..) 调用。回想一下我们在第 8 章是怎么做的：

function strUppercase(str) { return str.toUpperCase(); }
function strConcat(str1,str2) { return str1 + str2; }

function strUppercaseReducer(list,str) {
    list.push( strUppercase( str ) );
    return list;
}

function isLongEnoughReducer(list,str) {
    if (isLongEnough( str )) list.push( str );
    return list;
}

function isShortEnoughReducer(list,str) {
    if (isShortEnough( str )) list.push( str );
    return list;
}

words
.reduce( strUppercaseReducer, [] )
.reduce( isLongEnoughReducer, [] )
.reduce( isShortEnough, [] )
.reduce( strConcat, "" );
// "WRITTENSOMETHING"

这是一个不错的改进。我们现在有四个相邻的 reduce(..) 调用，而不是三种不同方法的混合。然而，我们仍然不能 compose(..) 这四个 reducer，因为它们接受两个参数而不是一个参数。

在 8 章，我们偷了点懒使用了数组的 push 方法而不是 concat(..) 方法返回一个新数组，导致有副作用。现在让我们更正式一点：

function strUppercaseReducer(list,str) {
    return list.concat( [strUppercase( str )] );
}

function isLongEnoughReducer(list,str) {
    if (isLongEnough( str )) return list.concat( [str] );
    return list;
}

function isShortEnoughReducer(list,str) {
    if (isShortEnough( str )) return list.concat( [str] );
    return list;
}

在后面我们会来头看看这里是否需要 concat(..)。

参数化 Reducers

除了使用不同的断言函数之外，两个 filter reducers 几乎相同。让我们把这些 reducers 参数化得到一个可以定义任何 filter-reducer 的工具函数：

function filterReducer(predicateFn) {
    return function reducer(list,val){
        if (predicateFn( val )) return list.concat( [val] );
        return list;
    };
}

var isLongEnoughReducer = filterReducer( isLongEnough );
var isShortEnoughReducer = filterReducer( isShortEnough );

同样的，我们把 mapperFn(..) 也参数化来生成 map-reducer 函数：

function mapReducer(mapperFn) {
    return function reducer(list,val){
        return list.concat( [mapperFn( val )] );
    };
}

var strToUppercaseReducer = mapReducer( strUppercase );

我们的调用链看起来是一样的：

words
.reduce( strUppercaseReducer, [] )
.reduce( isLongEnoughReducer, [] )
.reduce( isShortEnough, [] )
.reduce( strConcat, "" );

提取共用组合逻辑

仔细观察上面的 mapReducer(..) 和 filterReducer(..) 函数。你发现共享功能了吗？

这部分：

return list.concat( .. );

// 或者
return list;

让我们为这个通用逻辑定义一个辅助函数。但是我们叫它什么呢？

function WHATSITCALLED(list,val) {
    return list.concat( [val] );
}

WHATSITCALLED(..) 函数做了些什么呢，它接收两个参数（一个数组和另一个值），将值 concat 到数组的末尾返回一个新的数组。所以这个 WHATSITCALLED(..) 名字不合适，我们可以叫它 listCombination(..) ：

function listCombination(list,val) {
    return list.concat( [val] );
}

我们现在用 listCombination(..) 来重新定义我们的 reducer 辅助函数：

function mapReducer(mapperFn) {
    return function reducer(list,val){
        return listCombination( list, mapperFn( val ) );
    };
}

function filterReducer(predicateFn) {
    return function reducer(list,val){
        if (predicateFn( val )) return listCombination( list, val );
        return list;
    };
}

我们的调用链看起来还是一样的（这里就不重复写了）。

参数化组合

我们的 listCombination(..) 小工具只是组合两个值的一种方式。让我们将它的用途参数化，以使我们的 reducers 更加通用：

function mapReducer(mapperFn,combinationFn) {
    return function reducer(list,val){
        return combinationFn( list, mapperFn( val ) );
    };
}

function filterReducer(predicateFn,combinationFn) {
    return function reducer(list,val){
        if (predicateFn( val )) return combinationFn( list, val );
        return list;
    };
}

使用这种形式的辅助函数：

var strToUppercaseReducer = mapReducer( strUppercase, listCombination );
var isLongEnoughReducer = filterReducer( isLongEnough, listCombination );
var isShortEnoughReducer = filterReducer( isShortEnough, listCombination );

将这些实用函数定义为接收两个参数而不是一个参数不太方便组合，因此我们使用我们的 curry(..) （柯里化）方法：

var curriedMapReducer = curry( function mapReducer(mapperFn,combinationFn){
    return function reducer(list,val){
        return combinationFn( list, mapperFn( val ) );
    };
} );

var curriedFilterReducer = curry( function filterReducer(predicateFn,combinationFn){
    return function reducer(list,val){
        if (predicateFn( val )) return combinationFn( list, val );
        return list;
    };
} );

var strToUppercaseReducer =
    curriedMapReducer( strUppercase )( listCombination );
var isLongEnoughReducer =
    curriedFilterReducer( isLongEnough )( listCombination );
var isShortEnoughReducer =
    curriedFilterReducer( isShortEnough )( listCombination );

这看起来有点冗长而且可能不是很有用。

但这实际上是我们进行下一步推导的必要条件。请记住，我们的最终目标是能够 compose(..) 这些 reducers。我们快要完成了。

　附录 A：Transducing（下）－－－－ 四天后更新

** 【上一章】[翻译连载 | 第 11 章：融会贯通 －《JavaScript轻量级函数式编程》 |《你不知道的JS》姊妹篇
](https://juejin.im/post/5a0cf1... **

iKcamp原创新书《移动Web前端高效开发实战》已在亚马逊、京东、当当开售。

iKcamp官网：https://www.ikcamp.com
访问官网更快阅读全部免费分享课程：
《iKcamp出品｜全网最新｜微信小程序｜基于最新版1.0开发者工具之初中级培训教程分享》
《iKcamp出品｜基于Koa2搭建Node.js实战项目教程》
包含：文章、视频、源代码

写在前面

整个2018年都被工作支配，文章自17年就断更了，每次看到有消息提示过往的文章被收藏，或者有人点赞，都不胜唏嘘。不过，凡事要始终保持积极的心态，现在回归为时未晚。最近有项目要做一镜到底，那就稍作研究吧。

一镜到底是什么？

百度百科-一镜到底
一镜到底，是指拍摄中没有cut情况，运用一定技巧将作品一次性拍摄完成。

那么运用到H5上面，是怎样的表现？网上案例也有很多，这里推荐数英的一篇文章，应用尽有：

一镜到底H5大合集：一口气看尽一个H5的套路

主要表现形式为以下几类：

• 画中画（例如：网易-《娱乐画传》）
• 时空穿梭（例如：天猫-《穿越时空的邀请函》）
• 滚动动画（例如：网易-《爱的形状》）
• 视频（这个好像没什么好说的...跟本文无关）

体验方式主要有：

• 按住
• 滑动

技术需求分析

如上图的《爱的形状》，用户滑动屏幕，方块滚动，并且用户能控制播放进度；期间方块上面的纹理一直在变化，意味着动画一直在播放。

提取要点，要实现一个一镜到底H5，通常会有以下技术需求：

1. 绘制画面：这里我们一般选用基于canvas的库，性能会更好，也方便实现效果。
2. 添加动画：其中包括过渡、帧动画，因此需要一个动画库。
3. 进度控制：要实现通过用户操作，来控制整个H5的前进、后退、暂停等，我们会需要进度控制相关的库。
4. 用户操作：一镜到底的H5一般都需要用户操作以“播放”，按住或滑动，按住比较简单，用原生事件实现就好，滑动相对复杂一点，涉及阻尼运动，因此需要一个滑动相关的库。

有了需求，我们就可以相应去找解决方案了。绘图有用3D的threejs的，动画有人用anime.js，各有所好，能实现需求就行。

最终针对以上需求，我选用了AlloyTouch、TimelineMax、Pixi.js、TweenMax这几个库来实现通用的一镜到底。各个框架的优点这里就不赘述了，想了解详情的可以自行搜索，几乎都有中文资料，也很容易使用。

实现步骤要点

1. 用Pixi创建场景，加入到想要加入的DOM容器当中。
2. 用Pixi.loader加载精灵图。
3. 将精灵图、背景及文本等元素绘制出来。
4. 用TimelineMax创建一个总的Timeline，初始设置paused为true，可以设定整条Timeline的长度为1。
5. 用TweenMax创建好过渡动画，然后将TweenMax加入到Timeline中，duration比如是占10%的话，就设定为0.1，从滚动到30%开始播放动画的话，delay就设置为0.3。
6. 用AlloyTouch创建滚动监听，并设置好滚动高度，例如1000。
7. 监听AlloyTouch的change事件，用当前滚动值 / 滚动高度 得到当前页面的进度。
8. 调用总Timeline的seek方法，寻找到当前页面进度的地方，可以简单理解成拨动视频播放器的进度条滑块。
9. 至此就可以通过用户滑动操作，控制页面元素的动画播放、后退了。

你可能会问那怎样实现上面说的几种类型的一镜到底？实际上，几种类型的不同只是动画变换方式不一样而已。

• 画中画（缩放同时平移）
• 时空穿梭（以中心缩放）
• 滚动动画（平移为主，期间播放其他动画）

示例项目

简单写了个demo，如果感兴趣的朋友可以拉下来自己把玩一下。

点此查看仓库

点此查看demo

（注：项目中素材来源于网络，仅供交流学习使用，切勿商用！）

展望

这里只实现了一个一镜到底H5的主要效果部分，距离完成还有很多工作：

• 微信分享设置及引导
• 添加一个加载界面
• 添加音乐音效（用过howler，感觉不错）
• 可能需要的生成海报（html2canvas，生成海报easy job）
• ...

结语

这次没有用太多篇幅铺开来讲细节，主要是运用几个库组合来实现，而实际操作上还有很多地方要注意的，例如帧动画的实现，滑动的速度控制，滑到顶部、底部的处理等等。实际应用上还要继续打磨，毕竟一个漂亮的H5，是要花很多精力去构思，去优化体验的。

最后也希望能认识到更多在H5领域有研究的小伙伴，可以互相交流，甚至一起工作！

email: vincent@shikehuyu.com