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 這類庫，但咱們慢慢就會愈來愈重視它們，愈來愈使用它們，愈來愈領會到它們！！

異步，以上。

預告：第七篇（系列完結篇） —— 實踐 + 庫推薦！

我是掘金安東尼，公衆號【掘金安東尼】，輸入暴露輸出，技術洞見生活！！！