XDM，JS如何函数式编程？看这就够了！（六）

第六篇，咱们首先再次重申那句经典的话：web

若是要总体了解一我的的核心 JavaScript 技能，我最感兴趣的是他们会如何使用闭包以及如何充分利用异步。—— Jake Archibald编程

咱们前篇谈了不少关于【闭包】的理解了，因此你应该会知道，咱们如今将要谈的就是 ——【异步】。数组

点赞富三代，关注美一辈子！👍👍👍👍👍👍

再看异步

咱们为何以为“异步问题”复杂呢？promise

其中很重要的一个缘由是 —— 时间！时间将咱们对数据的操做、管理，变复杂了好几个量级！websocket

（须要特别提出并明确的是：异步和同步之间是能够相互转化的！ 咱们使用异步或者同步取决于 —— 如何使代码更加可读！）markdown

函数式编程给出了实现“代码更可读”的落地原则（已屡次回顾）：闭包

严格控制显示的输入输出；
封装高级函数，好比偏函数、柯里化实现参数的时域分离；
封装高级函数，好比函数组装，造成黑盒；
对其它基础方法进行封装，好比数组操做；
......

因此咱们能够期待，异步在函数式编程中的表现！app

减小时间状态

上代码：dom

var customerId = 42;
var customer;

lookupCustomer( customerId, function onCustomer(customerRecord){ // 经过查询用户来查询订单
    var orders = customer ? customer.orders : null;
    customer = customerRecord;
    if (orders) {
        customer.orders = orders;
    }
} );

lookupOrders( customerId, function onOrders(customerOrders){ // 直接查询订单
    if (!customer) {
        customer = {};
    }
    customer.orders = customerOrders;
} );
复制代码

onCustomer(..) 和 onOrders(..) 是两个【回调函数】^释义，二者执行的前后顺序并不能肯定，因此它是一个基于时间的复杂状态。异步

^{释义：回调函数其实就是一个参数，将这个函数做为参数传到另外一个函数里面，当那个函数执行完以后，再执行传进去的这个函数。}

怎样去肯定它们在时间上执行的前后关系呢？

一般来讲，咱们最早想到的是：把 lookupOrders(..) 写到 onCustomer(..) 里面，那咱们就能够确认 onOrders(..) 会在 onCustomer(..) 以后运行。

这样写，对吗？

不对！由于 onCustomer(..) 、onOrders(..) 这两个回调函数的关系更像是一种竞争关系（都是赋值 customer.orders），它们应该并行执行，而不是串行执行。

即：我无论大家谁先执行，谁先执行完，谁就赋值给 customer.orders！

那咱们的思路应该是：

用相应的 if-声明在各自的回调函数里来检查外部做用域的变量 customer。当各自的回调函数被执行，将会去检测 customer 的状态，从而肯定各自的执行顺序，若是 customer 在回调函数里还没被定义，那他就是先运行的，不然则是第二个运行的。

不过，这样让代码又变得更加难阅读！！函数内部赋值依赖于外部变量、甚至受外部回调函数的影响。

那究竟怎么办呢？

最终，咱们借用 JS promise 减小这个时间状态，将异步转成同步：

var customerId = 42;

var customerPromise = lookupCustomer( customerId );
var ordersPromise = lookupOrders( customerId );

customerPromise.then( function onCustomer(customer){
    ordersPromise.then( function onOrders(orders){
        customer.orders = orders;
    } );
} );
复制代码

两个 .then(..) 运行以前，lookupCustomer(..) 和 lookupOrders(..) 已被同步调用，知足并行执行，谁先结束，谁赋值给 customer.orders，因此咱们不须要知道谁先谁后！

在这样的实现下，再也不须要时间前后的概念！减小了时间状态！！代码的可读性更高了！！

惰性的数组

var a = [1,2,3]

var b = a.map( v => v * 2 );

b;            // [2,4,6]
复制代码

这是一个积极的数组，由于它们同步（即时）地操做着离散的即时值或值的列表/结构上的值。

什么意思？

a 映射到 b，再去修改 a ，b 不会收到影响。

var a = [];

var b = mapLazy( a, v => v * 2 );

a.push( 1 );

a[0];        // 1
b[0];        // 2

a.push( 2 );

a[1];        // 2
b[1];        // 4
复制代码

而这，是一个惰性的数组，mapLazy(..) 本质上 “监听” 了数组 a，只要一个新的值添加到数组的末端（push(..)），它都会运行映射函数 v => v * 2 并把改变后的值添加到数组 b 里。

什么意思？

a 映射到 b，再去修改 a ，b 也会修改。

那么为何第二种就是惰性的呢？

原来，后者存在异步的概念。

让咱们来想象这样一个数组，它不仅是简单地得到值，它仍是一个懒惰地接受和响应（也就是“反应”）值的数组，好比：

// 发布者:

var a = new LazyArray();

setInterval( function everySecond(){
    a.push( Math.random() );
}, 1000 );


// **************************
// 订阅者:

var b = a.map( function double(v){
    return v * 2;
} );

b.listen( function onValue(v){
    console.log( v );
} );
复制代码

设置“懒惰的数组” a 的过程是异步的！

b ，是 map 映射后的数组，但更重要的是，b 是反应性的，咱们对 b 加了一个相似监听器的东西。

咱们称前半部分为发布者，后半部分为订阅者。

你必定会疑问：定义这个懒惰的数组，有何做用？这里发布者、订阅者，又是几个意思？

这里直接给出解答：

正如 promise 从单个异步操做中抽离出咱们所担忧的时间状态，发布订阅模式也能从一系列的值或操做中抽离（分割）时间状态；

咱们分离【发布者】和【订阅者】的相关代码，让代码应该各司其职。这样的代码组织能够很大程度上提升代码的可读性和维护性。

这里再多小结一句：时间让异步更加复杂，函数式编程在异步下的运用就是减小或直接干掉时间状态。

想象下 a 还能够被绑定上一些其余的事件上，好比说用户的鼠标点击事件和键盘按键事件，服务端来的 websocket 消息等。

在这些状况下，a 不必关注本身的时间状态。

// 发布者:

var a = {
    onValue(v){
        b.onValue( v );
    }
};

setInterval( function everySecond(){
    a.onValue( Math.random() );
}, 1000 );


// **************************
// 订阅者:

var b = {
    map(v){
        return v * 2;
    },
    onValue(v){
        v = this.map( v );
        console.log( v );
    }
};
复制代码

这里，【时间】与【a、b】之间的关系是声明式的，不是命令式的。

咱们进一步，把 b = a.map(..) 替换成 b.onValue(v)，尽可能避免将 b 的逻辑夹杂在 a 中，让关注点更加分离！

上述的 LazyArray 又可叫作 observable！（固然，它不止用在 map 方法中）

如今已经有各类各样的 Observables 的库类，最出名的是 RxJS 和 Most。

以 RxJS 为例：

// 发布者:

var a = new Rx.Subject();

setInterval( function everySecond(){
    a.next( Math.random() );
}, 1000 );


// **************************
// 订阅者:

var b = a.map( function double(v){
    return v * 2;
} );

b.subscribe( function onValue(v){
    console.log( v );
} );
复制代码

不只如此，RxJS 还定义了超过 100 个能够在有新值添加时才触发的方法。就像数组同样。每一个 Observable 的方法都会返回一个新的 Observable，意味着他们是链式的。若是一个方法被调用，则它的返回值应该由输入的 Observable 去返回，而后触发到输出的 Observable里，不然抛弃。

好比：

var b =
    a
    .filter( v => v % 2 == 1 )        // 过滤掉偶数
    .distinctUntilChanged()            // 过滤连续相同的流
    .throttle( 100 )                // 函数节流（合并100毫秒内的流）
    .map( v = v * 2 );                // 变2倍

b.subscribe( function onValue(v){
    console.log( "Next:", v );
} );
复制代码

一般，subscribe(..) 方法都会在链式写法的最后被调用

更多关于：RxJS

阶段小结

本篇介绍了【异步】在函数式编程中的表现。

原则是：对于那些异步中有时态的操做，基础的函数式编程原理就是将它们变为无时态的应用。即减小时间状态！

就像 promise 建立了一个单一的将来值，咱们能够建立一个积极的列表的值来代替像惰性的observable（事件）流的值。

咱们介绍了 RxJS 库，后续咱们还会介绍更多优美的 JS 函数式编程库！

（俗话说的好，三方库选的好，下班都很早！！）

如今本瓜有点明白那句话了：看一门语言是否是函数式编程，取决于它的核心库是否是函数式编程。

也许咱们还不熟悉像 RxJS 这类库，但咱们慢慢就会愈来愈重视它们，愈来愈使用它们，愈来愈领会到它们！！

异步，以上。

预告：第七篇（系列完结篇） —— 实践 + 库推荐！

我是掘金安东尼，公众号【掘金安东尼】，输入暴露输出，技术洞见生活！！！