JS輕量級函數(shù)式編程實現(xiàn)XDM三
前言
這是【JS如何函數(shù)式編程】系列文章第三篇。點贊??關注??，持續(xù)追蹤??
前兩篇傳送門：
《XDM，JS如何函數(shù)式編程？看這就夠了?。ㄒ唬?/a>
《XDM，JS如何函數(shù)式編程？看這就夠了?。ǘ?/a>
在第二篇，我們談了基礎之基礎，重要之重要——“偏函數(shù)”，偏函數(shù)通過函數(shù)封裝，實現(xiàn)了減少傳參數(shù)量的目的，解決了手動指定實參的麻煩。
更具重要意義的是：
當函數(shù)只有一個形參時，我們能夠比較容易地組合它們。這種單元函數(shù)，便于進行后續(xù)的組合函數(shù)；
沒錯，本篇就是談關于 “組合函數(shù)”。它是函數(shù)編程的重中之重之重之重重重！
組合函數(shù)
含義
函數(shù)編程就像拼樂高！
樂高有各式各樣的零部件，我們將它們組裝拼接，拼成一個更大的組件或模型。
函數(shù)編程也有各種功能的函數(shù)，我們將它們組裝拼接，用于實現(xiàn)某個特定的功能。
下面來看一個例子，比如我們要使用這兩個函數(shù)來分析文本字符串：
function words(str) {
return String( str )
.toLowerCase()
.split( /\s|\b/ )
.filter( function alpha(v){
return /^[\w]+$/.test( v );
} );
}
function unique(list) {
var uniqList = [];
for (let i = 0; i < list.length; i++) {
if (uniqList.indexOf( list[i] ) === -1 ) {
uniqList.push( list[i] );
}
}
return uniqList;
}
var text = "To compose two functions together";
var wordsFound = words( text );
var wordsUsed = unique( wordsFound );
wordsUsed;
// ["to", "compose", "two", "functions", "together"]
不用細看，只用知道：我們先用 words 函數(shù)處理了 text，然后用 unique 函數(shù)處理了上一處理的結(jié)果 wordsFound；
這樣的過程就好比生產(chǎn)線上加工商品，流水線加工。
想象一下，如果你是工廠老板，還會怎樣優(yōu)化流程、節(jié)約成本？
這里作者給了一種解決方式：去掉傳送帶！
即減少中間變量，我們可以這樣調(diào)用：
var wordsUsed = unique( words( text ) ); wordsUsed
確實，少了中間變量，更加清晰，還能再優(yōu)化嗎？
我們還可以進一步把整個處理流程封裝到一個函數(shù)內(nèi)：
function uniqueWords(str) {
return unique( words( str ) );
}
uniqueWords(text)
這樣就像是一個黑盒，無需管里面的流程，只用知道這個盒子輸入是什么！輸出是什么！輸入輸出清晰，功能清晰，非常“干凈”！如圖：
與此同時，它還能被搬來搬去，或再繼續(xù)組裝。
我們回到 uniqueWords() 函數(shù)的內(nèi)部，它的數(shù)據(jù)流也是清晰的：
uniqueWords <-- unique <-- words <-- text
封裝盒子
上面的封裝 uniqueWords 盒子很 nice ，如果要不斷的封裝像 uniqueWords 的盒子，我們要一個一個的去寫嗎？
function uniqueWords(str) {
return unique( words( str ) );
}
function uniqueWords_A(str) {
return unique_A( words_A( str ) );
}
function uniqueWords_B(str) {
return unique_B( words_B( str ) );
}
...
所以，一切為了偷懶，我們可以寫一個功能更加強大的函數(shù)來實現(xiàn)自動封裝盒子：
function compose2(fn2,fn1) {
return function composed(origValue){
return fn2( fn1( origValue ) );
};
}
// ES6 箭頭函數(shù)形式寫法
var compose2 =
(fn2,fn1) =>
origValue =>
fn2( fn1( origValue ) );
接著，調(diào)用就變成了這樣：
var uniqueWords = compose2( unique, words ); var uniqueWords_A = compose2( unique_A, words_A ); var uniqueWords_B = compose2( unique_B, words_B );
太清晰了！
任意組合
上面，我們組合了兩個函數(shù)，實際上我們也可以組合 N 個函數(shù)；
finalValue <-- func1 <-- func2 <-- ... <-- funcN <-- origValue
比如用一個 compose 函數(shù)來實現(xiàn)（敲重點）：
function compose(...fns) {
return function composed(result){
// 拷貝一份保存函數(shù)的數(shù)組
var list = fns.slice();
while (list.length > 0) {
// 將最后一個函數(shù)從列表尾部拿出
// 并執(zhí)行它
result = list.pop()( result );
}
return result;
};
}
// ES6 箭頭函數(shù)形式寫法
var compose =
(...fns) =>
result => {
var list = fns.slice();
while (list.length > 0) {
// 將最后一個函數(shù)從列表尾部拿出
// 并執(zhí)行它
result = list.pop()( result );
}
return result;
};
基于前面 uniqueWords(..) 的例子，我們進一步再增加一個函數(shù)來處理（過濾掉長度小于等于4的字符串）：
function skipShortWords(list) {
var filteredList = [];
for (let i = 0; i < list.length; i++) {
if (list[i].length > 4) {
filteredList.push( list[i] );
}
}
return filteredList;
}
var text = "To compose two functions together";
var biggerWords = compose( skipShortWords, unique, words );
var wordsUsed = biggerWords( text );
wordsUsed;
// ["compose", "functions", "together"]
這樣 compose 函數(shù)就有三個入?yún)⑶叶际呛瘮?shù)了。我們還可以利用偏函數(shù)的特性實現(xiàn)更多：
function skipLongWords(list) { /* .. */ }
var filterWords = partialRight( compose, unique, words ); // 固定 unique 函數(shù) 和 words 函數(shù)
var biggerWords = filterWords( skipShortWords );
var shorterWords = filterWords( skipLongWords );
biggerWords( text );
shorterWords( text );
filterWords 函數(shù)是一個更具有特定功能的變體（根據(jù)第一個函數(shù)的功能來過濾字符串）。
compose 變體
compose(..)函數(shù)非常重要，但我們可能不會在生產(chǎn)中使用自己寫的 compose(..)，而更傾向于使用某個庫所提供的方案。了解其底層工作的原理，對我們強化理解函數(shù)式編程也非常有用。
我們理解下 compose(..) 的另一種變體 —— 遞歸的方式實現(xiàn)：
function compose(...fns) {
// 拿出最后兩個參數(shù)
var [ fn1, fn2, ...rest ] = fns.reverse();
var composedFn = function composed(...args){
return fn2( fn1( ...args ) );
};
if (rest.length == 0) return composedFn;
return compose( ...rest.reverse(), composedFn );
}
// ES6 箭頭函數(shù)形式寫法
var compose =
(...fns) => {
// 拿出最后兩個參數(shù)
var [ fn1, fn2, ...rest ] = fns.reverse();
var composedFn =
(...args) =>
fn2( fn1( ...args ) );
if (rest.length == 0) return composedFn;
return compose( ...rest.reverse(), composedFn );
};
通過遞歸進行重復的動作比在循環(huán)中跟蹤運行結(jié)果更易懂，這可能需要更多時間去體會；
基于之前的例子，如果我們想讓參數(shù)反轉(zhuǎn)：
var biggerWords = compose( skipShortWords, unique, words ); // 變成 var biggerWords = pipe( words, unique, skipShortWords );
只需要更改 compose(..) 內(nèi)部實現(xiàn)這一句就行：
...
while (list.length > 0) {
// 從列表中取第一個函數(shù)并執(zhí)行
result = list.shift()( result );
}
...
雖然只是顛倒參數(shù)順序，這二者沒有本質(zhì)上的區(qū)別。
抽象能力
你是否會疑問：什么情況下可以封裝成上述的“盒子”呢？
這就很考驗 —— 抽象的能力了！
實際上，有兩個或多個任務存在公共部分，我們就可以進行封裝了。
比如：
function saveComment(txt) {
if (txt != "") {
comments[comments.length] = txt;
}
}
function trackEvent(evt) {
if (evt.name !== undefined) {
events[evt.name] = evt;
}
}
就可以抽象封裝為：
function storeData(store,location,value) {
store[location] = value;
}
function saveComment(txt) {
if (txt != "") {
storeData( comments, comments.length, txt );
}
}
function trackEvent(evt) {
if (evt.name !== undefined) {
storeData( events, evt.name, evt );
}
}
在做這類抽象時，有一個原則是，通常被稱作 DRY（don't repeat yourself），即便我們要花時間做這些非必要的工作。
抽象能讓你的代碼走得更遠！ 比如上例，還能進一步升級：
function conditionallyStoreData(store,location,value,checkFn) {
if (checkFn( value, store, location )) {
store[location] = value;
}
}
function notEmpty(val) { return val != ""; }
function isUndefined(val) { return val === undefined; }
function isPropUndefined(val,obj,prop) {
return isUndefined( obj[prop] );
}
function saveComment(txt) {
conditionallyStoreData( comments, comments.length, txt, notEmpty );
}
function trackEvent(evt) {
conditionallyStoreData( events, evt.name, evt, isPropUndefined );
}
這樣 if 語句也被抽象封裝了。
抽象是一個過程，程序員將一個名字與潛在的復雜程序片段關聯(lián)起來，這樣該名字就能夠被認為代表函數(shù)的目的，而不是代表函數(shù)如何實現(xiàn)的。通過隱藏無關的細節(jié)，抽象降低了概念復雜度，讓程序員在任意時間都可以集中注意力在程序內(nèi)容中的可維護子集上。—— 《程序設計語言》
我們在本系列初始提到：“一切為了創(chuàng)造更可讀、更易理解的代碼。”
從另一個角度，抽象就是將命令式代碼變成聲命式代碼的過程。從“怎么做”轉(zhuǎn)化成“是什么”。
命令式代碼主要關心的是描述怎么做來準確完成一項任務。聲明式代碼則是描述輸出應該是什么，并將具體實現(xiàn)交給其它部分。
比如 ES6 增加的結(jié)構(gòu)語法：
function getData() {
return [1,2,3,4,5];
}
// 命令式
var tmp = getData();
var a = tmp[0];
var b = tmp[3];
// 聲明式
var [ a ,,, b ] = getData();
開發(fā)者需要對他們程序中每個部分使用恰當?shù)某橄蠹墑e保持謹慎，不能太過，也不能不夠。
階段小結(jié)
函數(shù)組合是為了符合“聲明式編程風格”，即關注“是什么”，而非具體“做什么”。
它能將一個函數(shù)調(diào)用的輸出路由跳轉(zhuǎn)到另一個函數(shù)的調(diào)用上，然后一直進行下去，它借助 compose(..) 或它的變體實現(xiàn)。。
我們期望組合中的函數(shù)是一元的（輸入輸出盡量是一個），這個也是前篇有提到的很重要的一個點。
組合 ———— 聲明式數(shù)據(jù)流 ———— 是支撐函數(shù)式編程其他特性的最重要的工具之一！
以上就是JS輕量級函數(shù)式編程實現(xiàn)XDM三的詳細內(nèi)容，更多關于JS輕量級函數(shù)式編程XDM的資料請關注腳本之家其它相關文章！
相關文章
這篇文章主要介紹了微信小程序 開發(fā)之快遞查詢功能的實現(xiàn)的相關資料,這里實現(xiàn)微信小程序查詢快遞的功能，需要的朋友可以參考下2017-01-01
這篇文章主要介紹了微信小程序 登錄實例詳解的相關資料,需要的朋友可以參考下2017-01-01
這篇文章主要介紹了克隆 JavaScript,克隆又有淺克隆與深克隆，文章圍繞JavaScript淺克隆與深克隆的相關資料展開具體內(nèi)容,需要的朋友可以參考一下2021-10-10
這篇文章主要介紹了微信小程序 簡單教程實例詳解的相關資料,這里對開發(fā)微信小程序步驟做了一一詳解，需要的朋友可以參考下2017-01-01
這篇文章主要介紹JS中的new，new 運算符創(chuàng)建一個用戶定義的對象類型的實例或具有構(gòu)造函數(shù)的內(nèi)置對象的實例。下面我們一起來看看我呢很臟具體內(nèi)容的詳細介紹,需要的朋友可以參考一下2021-11-11
這篇文章主要為大家介紹了JS?class語法糖的深入剖析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07
JavaScript中isPrototypeOf函數(shù)
這篇文章主要介紹了JavaScript中isPrototypeOf函數(shù)，isPrototypeOf() 是 Object函數(shù)（類）的下的一個方法，用于判斷當前對象是否為另外一個對象的原型，如果是就返回 true，否則就返回 false，下面來看看詳細內(nèi)容,需要的朋友可以參考一下2021-11-11
Dragonfly P2P 傳輸協(xié)議優(yōu)化代碼解析
這篇文章主要為大家介紹了Dragonfly P2P 傳輸協(xié)議優(yōu)化代碼解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-11-11
這篇文章主要為大家介紹了前端工程化cjs?umd?esm?打包差異詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-09-09
這篇文章主要為大家介紹了微前端框架qiankun的源碼剖析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-02-02