原文：Writing flat & declarative code
作者：Peeke Kuepers

-- 給你的代碼增加一點(diǎn)點(diǎn)函數(shù)式編程的特性

最近我對(duì)函數(shù)式編程非常感興趣。這個(gè)概念讓我著迷：應(yīng)用數(shù)學(xué)來(lái)增強(qiáng)抽象性和強(qiáng)制純粹性，以避免副作用，并實(shí)現(xiàn)代碼的良好可復(fù)用性。同時(shí)，函數(shù)式編程非常復(fù)雜。

函數(shù)式編程有一個(gè)非常陡峭的學(xué)習(xí)曲線，因?yàn)樗鼇?lái)源于數(shù)學(xué)中的范疇論。接觸不久之后，就將遇到諸如組合（composition）、恒等（identity），函子（functor）、單子（monad），以及逆變（contravariant）等術(shù)語(yǔ)。我根本不太了解這些概念，可能這也是我從來(lái)沒有在實(shí)踐中運(yùn)用函數(shù)式編程的原因。

我開始思考：在常規(guī)的命令式編程和完全的函數(shù)式編程之間是否可能會(huì)有一些中間形式？既允許在代碼庫(kù)引入函數(shù)式編程的一些很好的特性，同時(shí)暫時(shí)保留已有的舊代碼。

對(duì)我而言，函數(shù)式編程最大的作用就是強(qiáng)制你編寫聲明性代碼：代碼描述你做什么，而不是在描述如何做。這樣就可以輕松了解特定代碼塊的功能，而無(wú)需了解其真正的運(yùn)行原理。事實(shí)證明，編寫聲明式代碼是函數(shù)式編程中最簡(jiǎn)單的部分之一。

循環(huán)

...一個(gè)循環(huán)就是一個(gè)命令式控制結(jié)構(gòu)，難以重用，并且難以插入到其他操作中。此外，它還得不斷變化代碼來(lái)響應(yīng)新的迭代需求。

-- Luis Atencio

所以，讓我們先看一下循環(huán)，循環(huán)是命令式編程的一個(gè)很好的例子。循環(huán)涉及很多語(yǔ)法，都是描述它們的行為是如何工作，而不是它們?cè)谧鍪裁础＠?，看看這段代碼：

function helloworld(arr) {
    for (let i = 1; i < arr.length; i++) {
        arr[i] *= 2
        if (arr[i] % 2 === 0) {
            doSomething(arr[i])
        }
    }
}

這段代碼在做什么呢？它將數(shù)組內(nèi)除第一個(gè)數(shù)字 （let i = 1）的其他所有數(shù)字乘以 2，如果是偶數(shù)的話（if (arr % 2 === 0)），就進(jìn)行某些操作。在此過(guò)程中，原始數(shù)組的值會(huì)被改變。但這通常是不必要的，因?yàn)閿?shù)組可能還會(huì)在代碼庫(kù)中的其他地方用到，所以剛才所做的改變可能會(huì)導(dǎo)致意外的結(jié)果。

但最主要的原因是，這段代碼看起來(lái)很難一目了然。它是命令式的，for 循環(huán)告訴我們?nèi)绾伪闅v數(shù)組，在里面，使用一個(gè) if 語(yǔ)句有條件地調(diào)用一個(gè)函數(shù)。

我們可以通過(guò)使用數(shù)組方法以聲明式的方式重寫這段代碼。數(shù)組方法直接表達(dá)所做的事，比較常見的方法包括：forEach，map，filter，reduce 和 slice。

結(jié)果就像下面這樣：

function helloworld(arr) {
    const evenNumbers = n => n % 2 === 0

    arr
        .slice(1)
        .map(v => v * 2)
        .filter(evenNumbers)
        .forEach(v => doSomething(v))    
}

在這個(gè)例子中，我們使用一種很好的，扁平的鏈?zhǔn)浇Y(jié)構(gòu)去描述我們?cè)谧鍪裁?，明確表明意圖。此外，我們避免了改變?cè)紨?shù)組，從而避免不必要的副作用，因?yàn)榇蠖鄶?shù)數(shù)組方法會(huì)返回一個(gè)新數(shù)組。當(dāng)箭頭函數(shù)開始變得越來(lái)越復(fù)雜時(shí)，可以地將其提取到一個(gè)特定的函數(shù)中，比如 evenNumbers，?從而盡量保持結(jié)構(gòu)簡(jiǎn)單易讀。

在上面的例子，鏈?zhǔn)秸{(diào)用并沒有返回值，而是以 forEach 結(jié)束。然而，我們可以輕松地剝離最后一部分，并返回結(jié)果，以便我們可以在其他地方處理它。如果還需要返回除數(shù)組以外的任何東西，可以使用 reduce 函數(shù)。

對(duì)于接下來(lái)的一個(gè)例子，假設(shè)我們有一組 JSON 數(shù)據(jù)，其中包含在一個(gè)虛構(gòu)歌唱比賽中不同國(guó)家獲得的積分：

[
    {
        "country": "NL",
        "points": 12
    },
    {
        "country": "BE",
        "points": 3
    },
    {
        "country": "NL",
        "points": 0
    },
    ...
]

我們想計(jì)算荷蘭（NL）獲得的總積分，根據(jù)印象中其強(qiáng)大的音樂(lè)能力，我們可以認(rèn)為這是一個(gè)非常高的分?jǐn)?shù)，但我們想要更精確地確認(rèn)這一點(diǎn)。

使用循環(huán)可能會(huì)是這樣：

function countVotes(votes) {
    let score = 0;

    for (let i = 0; i < votes.length; i++) {
        if (votes[i].country === 'NL') {
            score += votes[i].points;
        }
    }

    return score;
}

使用數(shù)組方法重構(gòu)，我們得到一個(gè)更干凈的代碼片段：

function countVotes(votes) {
    const sum = (a, b) => a + b;

    return votes
        .filter(vote => vote.country === 'NL')
        .map(vote => vote.points)
        .reduce(sum);
}

有時(shí)候 reduce 可能有點(diǎn)難以閱讀，將 reduce 函數(shù)提取出來(lái)會(huì)在理解上有幫助。在上面的代碼片段中，我們定義了一個(gè) sum 函數(shù)來(lái)描述函數(shù)的作用，因此方法鏈仍然保持很好的可讀性。

if else 語(yǔ)句

接下來(lái)，我們來(lái)聊聊大家都很喜歡的 if else 語(yǔ)句，if else 語(yǔ)句也是命令式代碼里一個(gè)很好的例子。為了使我們的代碼更具聲明式，我們將使用三元表達(dá)式。

一個(gè)三元表達(dá)式是 if else 語(yǔ)句的替代語(yǔ)法。以下兩個(gè)代碼塊具有相同的效果：

// Block 1
if (condition) {
    doThis();
} else {
    doThat();
}

// Block 2
const value = condition ? doThis() : doThat();

當(dāng)在定義（或返回）一個(gè)常量時(shí)，三元表達(dá)式非常有用。使用 if else 語(yǔ)句會(huì)將該變量的使用范圍限制在語(yǔ)句內(nèi)，通過(guò)使用三元語(yǔ)句，我們可以避免這個(gè)問(wèn)題：

if (condition) {
    const a = 'foo';
} else {
    const a = 'bar';
}

const b = condition ? 'foo' : 'bar';

console.log(a); // Uncaught ReferenceError: a is not defined
console.log(b); // 'bar'

現(xiàn)在，我們來(lái)看看如何應(yīng)用這一點(diǎn)來(lái)重構(gòu)一些更重要的代碼：

const box = element.getBoundingClientRect();

if (box.top - document.body.scrollTop > 0 && box.bottom - document.body.scrollTop < window.innerHeight) {
    reveal();
} else {
    hide();
}

那么，上面的代碼發(fā)生了什么呢？if 語(yǔ)句檢查元素當(dāng)前是否在頁(yè)面的可見部分內(nèi)，這個(gè)信息在代碼的任何地方都沒有表達(dá)出來(lái)?；诖瞬紶栔?，再調(diào)用 reveal() 或者 hide() 函數(shù)。

將這個(gè) if 語(yǔ)句轉(zhuǎn)換成三元表達(dá)式迫使我們將條件移動(dòng)到它自己的變量中。這樣我們可以將三元表達(dá)式組合在一行上，現(xiàn)在通過(guò)變量的名稱來(lái)傳達(dá)布爾值表示的內(nèi)容，這樣還不錯(cuò)。

const box = element.getBoundingClientRect();
const isInViewport = 
    box.top - document.body.scrollTop > 0 && 
    box.bottom - document.body.scrollTop < window.innerHeight;

isInViewport ? reveal() : hide();

通過(guò)這個(gè)例子，重構(gòu)帶來(lái)的好處可能看起來(lái)不大。接下來(lái)會(huì)有一個(gè)相比更復(fù)雜的例子：

elements
    .forEach(element => {
        const box = element.getBoundingClientRect();

        if (box.top - document.body.scrollTop > 0 && box.bottom - document.body.scrollTop < window.innerHeight) {
            reveal();
        } else {
            hide();
        }

    });

這很不好，打破了我們優(yōu)雅的扁平的調(diào)用鏈，從而使代碼更難讀。我們?cè)俅问褂萌僮鞣?，而在使用它的時(shí)候，使用 isInViewport 檢查，并跟它自己的動(dòng)態(tài)函數(shù)分開。

const isInViewport = element => {
    const box = element.getBoundingClientRect();
    const topInViewport = box.top - document.body.scrollTop > 0;
    const bottomInViewport = box.bottom - document.body.scrollTop < window.innerHeight;
    return topInViewport && bottomInViewport;
};

elements
    .forEach(elem => isInViewport(elem) ? reveal() : hide());

此外，現(xiàn)在我們將 isInViewport 移動(dòng)到一個(gè)獨(dú)立函數(shù)，可以很容易地把它放在它自己的 helper 類/對(duì)象之內(nèi)：

import { isInViewport } from 'helpers';

elements
    .forEach(elem => isInViewport(elem) ? reveal() : hide());

雖然上面的例子依賴于所處理的是數(shù)組，但是在不明確是在數(shù)組的情況下，也可以采用這種編碼風(fēng)格。

例如，看看下面的函數(shù)，它通過(guò)三條規(guī)則來(lái)驗(yàn)證密碼的有效性。

import { passwordRegex as requiredChars } from 'regexes'
import { getJson } from 'helpers'

const validatePassword = async value => {
  if (value.length < 6) return false
  if (!requiredChars.test(value)) return false

  const forbidden = await getJson('/forbidden-passwords')
  if (forbidden.includes(value)) return false

  return value
}

validatePassword(someValue).then(persist)

如果我們使用數(shù)組包裝初始值，就可以使用在上面的例子中里面所用到的所有數(shù)組方法。此外，我們已經(jīng)將驗(yàn)證函數(shù)打包成 validationRules 使其可重用。

import { minLength, matchesRegex, notBlacklisted } from 'validationRules'
import { passwordRegex as requiredChars } from 'regexes'
import { getJson } from 'helpers'

const validatePassword = async value => {
  const result = Array.from(value)
    .filter(minLength(6))
    .filter(matchesRegex(requiredChars))
    .filter(await notBlacklisted('/forbidden-passwords'))
    .shift()

  if (result) return result
  throw new Error('something went wrong...')
}

validatePassword(someValue).then(persist)

目前在 JavaScript 中有一個(gè) 管道操作符 的提案。使用這個(gè)操作符，就不用再把原始值換成數(shù)組了?？梢灾苯釉谇懊娴闹嫡{(diào)用管道操作符之后的函數(shù)，有點(diǎn)像 Array 的 map 功能。修改之后的代碼大概就像這樣：

import { minLength, matchesRegex, notBlacklisted } from 'validationRules'
import { passwordRegex as requiredChars } from 'regexes'
import { getJson } from 'helpers'

const validatePassword = async value =>
  value
    |> minLength(6)
    |> matchesRegex(requiredChars)
    |> await notBlacklisted('/forbidden-passwords')

try { someValue |> await validatePassword |> persist }
catch(e) {
  // handle specific error, thrown in validation rule
}

但需要注意的是，這仍然是一個(gè)非常早期的提案，不過(guò)可以稍微期待一下。

事件

最后，我們來(lái)看看事件處理。一直以來(lái)，事件處理很難以扁平化的方式編寫代碼。可以 Promise 化來(lái)保持一種鏈?zhǔn)降?，扁平化的編程風(fēng)格，但 Promise 只能 resolve 一次，而事件絕對(duì)會(huì)多次觸發(fā)。

在下面的示例中，我們創(chuàng)建一個(gè)類，它對(duì)用戶的每個(gè)輸入值進(jìn)行檢索，結(jié)果是一個(gè)自動(dòng)補(bǔ)全的數(shù)組。首先檢查字符串是否長(zhǎng)于給定的閾值長(zhǎng)度。如果滿足條件，將從服務(wù)器檢索自動(dòng)補(bǔ)全的結(jié)果，并將其渲染成一系列標(biāo)簽。

注意代碼的不“純”，頻繁地使用 this 關(guān)鍵字。幾乎每個(gè)函數(shù)都在訪問(wèn) this 這個(gè)關(guān)鍵字：

譯注：作者在這里使用 "this keyword"，有一種雙關(guān)的意味

import { apiCall } from 'helpers'

class AutoComplete {

  constructor (options) {

    this._endpoint = options.endpoint
    this._threshold = options.threshold
    this._inputElement = options.inputElement
    this._containerElement = options.list

    this._inputElement.addEventListener('input', () =>
      this._onInput())

  }

  _onInput () {

    const value = this._inputElement.value

    if (value > this._options.threshold) {
      this._updateList(value)
    }

  }

  _updateList (value) {

    apiCall(this._endpoint, { value })
      .then(items => this._render(items))
      .then(html => this._containerElement = html)

  }

  _render (items) {

    let html = ''

    items.forEach(item => {
      html += `<a href="${ item.href }">${ item.label }</a>`
    })

    return html

  }

}

通過(guò)使用 Observable，我們將用一種更好的方式對(duì)這段代碼進(jìn)行重寫?？梢院?jiǎn)單將 Observable 理解成一個(gè)能夠多次 resolve 的 Promise。

Observable 類型可用于基于推送模型的數(shù)據(jù)源，如 DOM 事件，定時(shí)器和套接字

Observable 提案目前處于 Stage-1。在下面 listen 函數(shù)的實(shí)現(xiàn)是從 GitHub 上的提案中直接復(fù)制的，主要是將事件監(jiān)聽器轉(zhuǎn)換成 Observable?？梢钥吹剑覀兛梢詫⒄麄€(gè) AutoComplete 類重寫為單個(gè)方法的函數(shù)鏈。

import { apiCall, listen } from 'helpers';
import { renderItems } from 'templates'; 

function AutoComplete ({ endpoint, threshold, input, container }) {

  listen(input, 'input')
    .map(e => e.target.value)
    .filter(value => value.length >= threshold)
    .forEach(value => apiCall(endpoint, { value }))
    .then(items => renderItems(items))
    .then(html => container.innerHTML = html)

}

由于大多數(shù) Observable 庫(kù)的實(shí)現(xiàn)過(guò)于龐大，我很期待 ES 原生的實(shí)現(xiàn)。map，filter 和 forEach方法還不是規(guī)范的一部分，但是在 zen-observable 已經(jīng)在擴(kuò)展 API 實(shí)現(xiàn)，而 zen-observable 本身是 ES Observables 的一種實(shí)現(xiàn) 。

--

我希望你會(huì)對(duì)這些“扁平化”模式感興趣。就個(gè)人而言，我很喜歡以這種方式重寫我的程序。你接觸到的每一段代碼都可以更易讀。使用這種技術(shù)獲得的經(jīng)驗(yàn)越多，就越來(lái)越能認(rèn)識(shí)到這一點(diǎn)。記住這個(gè)簡(jiǎn)單的法則：

The flatter the better!