JS輕量級函數(shù)式編程實現(xiàn)XDM二
前言
承接上一篇《XDM，JS如何函數(shù)式編程？看這就夠了?。ㄒ唬?/a>，我們知道了函數(shù)式編程的幾個基本概念。
這里作簡要回顧：
- 函數(shù)式編程目的是為了數(shù)據(jù)流更加明顯，從而代碼更具可讀性；
- 函數(shù)需要一個或多個輸入（理想情況下只需一個?。┖鸵粋€輸出，輸入輸出是顯式的代碼將更好閱讀；
- 閉包是高階函數(shù)的基礎(chǔ)；
- 警惕匿名函數(shù)；
- 棄用 this 指向；
本篇將著重介紹第 2 點中函數(shù)的輸入，它是 JS 輕量函數(shù)式編程的基礎(chǔ)之基礎(chǔ)，重要之重要！?。?/p>
偏函數(shù)
傳參現(xiàn)狀
我們經(jīng)常會寫出這樣的代碼：
function ajax(url,data,callback) {
// ..
}
function getPerson(data,cb) {
ajax( "http://some.api/person", data, cb );
}
ajax 函數(shù)有三個入?yún)?，?getPerson 函數(shù)里調(diào)用，其中 url 已確定，data 和 cb 兩個參數(shù)則等待傳入。（因為很多時候參數(shù)都不是在當(dāng)前能確定的，需要等待其它函數(shù)的操作后確定了再繼續(xù)傳入）
但是我們的原則是：入?yún)⒆罾硐氲那闆r下只需一個！
怎樣優(yōu)化，可以實現(xiàn)這一點呢？
我們或許可以在外層再套一個函數(shù)來進(jìn)一步確定傳參，比如：
function getCurrentUser(cb) {
...// 通過某些操作拿到 CURRENT_USER_ID
getPerson( { user: CURRENT_USER_ID }, cb );
}
這樣，data 參數(shù)也已經(jīng)確定，cb 參數(shù)仍等待傳入；函數(shù) getCurrentUser 就只有一個入?yún)⒘耍?/p>
數(shù)據(jù)的傳遞路線是：
ajax(url,data,callback) => getPerson(data,cb) => getCurrentUser(cb)
這樣函數(shù)參數(shù)個數(shù)逐漸減少的過程就是偏應(yīng)用。
也可以說：getCurrentUser(cb) 是 getOrder(data,cb) 的偏函數(shù)，getOrder(data,cb) 是 ajax(url,data,cb) 函數(shù)的偏函數(shù)。
設(shè)想下：
如果一個函數(shù)是這樣的：
function receiveMultiParam(a,b,c,......,x,y,z){
// ..
}
我們難道還要像上面那樣手動指定外層函數(shù)進(jìn)行逐層嵌套嗎？
顯示我們不會這么做！
封裝 partial
我們只需要封裝一個 partial(..) 函數(shù)：
function partial(fn,...presetArgs) {
return function partiallyApplied(...laterArgs){
return fn( ...presetArgs, ...laterArgs );
};
}
它的基礎(chǔ)邏輯是：
var partial =
(fn, ...presetArgs) =>
(...laterArgs) =>
fn( ...presetArgs, ...laterArgs );
把函數(shù)作為入?yún)?！還記得我們之前所說：
一個函數(shù)如果可以接受或返回一個甚至多個函數(shù)，它被叫做高階函數(shù)。
我們借用 partial() 來實現(xiàn)上述舉例：
var getPerson = partial( ajax, "http://some.api/person" );
var getCurrentUser = partial( getPerson, { user: CURRENT_USER_ID } ); // 版本 1
以下函數(shù)內(nèi)部分析非常重要：
運行機制
getPerson() 的內(nèi)部運行機制是：
var getPerson = function partiallyApplied(...laterArgs) {
return ajax( "http://some.api/person", ...laterArgs );
};
getCurrentUser() 的內(nèi)部運行機制是：
var getCurrentUser = function outerPartiallyApplied(...outerLaterArgs) {
var getPerson = function innerPartiallyApplied(...innerLaterArgs){
return ajax( "http://some.api/person", ...innerLaterArgs );
};
return getPerson( { user: CURRENT_USER_ID }, ...outerLaterArgs );
}
數(shù)據(jù)進(jìn)行了傳遞：
getCurrentUser(outerLaterArgs) => getPerson(innerLaterArgs) => ajax(...params)
我們通過這樣一層額外的函數(shù)包裝層，實現(xiàn)了更加強大的數(shù)據(jù)傳遞，
我們將需要減少參數(shù)輸入的函數(shù)傳入 partial()中作為第一個參數(shù)，剩下的是 presetArgs，當(dāng)前已知幾個，就可以寫幾個。還有不確定的入?yún)?laterArgs，可以在確定后繼續(xù)追加。
像這樣進(jìn)行額外的高階函數(shù)包裝層，是函數(shù)式編程的精髓所在！
“隨著本系列的繼續(xù)深入，我們將會把許多函數(shù)互相包裝起來。記住，這就是函數(shù)式編程！” —— 《JavaScript 輕量級函數(shù)式編程》
實際上，實現(xiàn) getCurrentUser() 還可以這樣寫：
// 版本 2
var getCurrentUser = partial(
ajax,
"http://some.api/person",
{ user: CURRENT_USER_ID }
);
// 內(nèi)部實現(xiàn)機制
var getCurrentUser = function partiallyApplied(...laterArgs) {
return ajax(
"http://some.api/person",
{ user: CURRENT_USER_ID },
...laterArgs
);
};
但是版本 1 因為重用了已經(jīng)定義好的函數(shù)，所以它在表達(dá)上更清晰一些。它被認(rèn)為更加貼合函數(shù)式編程精神！
拓展 partial
我們再看看 partial() 函數(shù)還可它用：
function partial(fn,...presetArgs) {
return function partiallyApplied(...laterArgs){
return fn( ...presetArgs, ...laterArgs );
};
}
比如：將數(shù)組 [1,2,3,4,5] 每項都加 3，通常我們會這么做：
function add(x,y) {
return x + y
[1,2,3,4,5].map( function adder(val){
return add( 3, val );
} );
// [4,5,6,7,8]
借助 partial()：
[1,2,3,4,5].map( partial( add, 3 ) ); // [4,5,6,7,8]
add(..) 不能直接傳入 map(..) 函數(shù)里，通過偏應(yīng)用進(jìn)行處理后則能傳入；
實際上，partial() 函數(shù)還可以有很多變體：
回想我們之前調(diào)用 Ajax 函數(shù)的方式：ajax( url, data, cb )。如果要偏應(yīng)用 cb 而稍后再指定 data 和 url 參數(shù)，我們應(yīng)該怎么做呢？
function reverseArgs(fn) {
return function argsReversed(...args){
return fn( ...args.reverse() );
};
}
function partialRight( fn, ...presetArgs ) {
return reverseArgs(
partial( reverseArgs( fn ), ...presetArgs.reverse() )
);
}
var cacheResult = partialRight( ajax, function onResult(obj){
cache[obj.id] = obj;
});
// 處理后:
cacheResult( "http://some.api/person", { user: CURRENT_USER_ID } );
柯里化
函數(shù)柯里化實際上是一種特殊的偏函數(shù)。
我們用 curry(..) 函數(shù)來實現(xiàn)此前的 ajax(..) 例子，它會是這樣的：
var curriedAjax = curry( ajax );
var personFetcher = curriedAjax( "http://some.api/person" );
var getCurrentUser = personFetcher( { user: CURRENT_USER_ID } );
getCurrentUser( function foundUser(user){ /* .. */ } );
柯里化函數(shù)：接收單一實參（實參個數(shù)：1）并返回另一個接收下一個實參的函數(shù)。
它將一個函數(shù)從可調(diào)用的 f(a, b, c) 轉(zhuǎn)換為可調(diào)用的 f(a)(b)(c)。
實現(xiàn)：
function curry(fn,arity = fn.length) {
return (function nextCurried(prevArgs){
return function curried(nextArg){
var args = prevArgs.concat( [nextArg] );
if (args.length >= arity) {
return fn( ...args );
}
else {
return nextCurried( args );
}
};
})( [] );
}
階段小結(jié)
我們?yōu)槭裁匆绱酥厝フ?ldquo;偏函數(shù)”（partial(sum,1,2)(3)）或“柯里化”（sum(1)(2)(3)）呢？
第一，是顯而易見的，偏函數(shù)或柯里化，可以將“指定分離實參”的時機和地方獨立開來；
第二，更有重要意義的是，當(dāng)函數(shù)只有一個形參時，我們能夠比較容易地組合它們。這種單元函數(shù)，便于進(jìn)行后續(xù)的組合函數(shù)；
對函數(shù)進(jìn)行包裝，使其成為一個高階函數(shù)是函數(shù)式編程的精髓！
至此，有了“偏函數(shù)”這門武器大炮，我們將逐漸轟開 JS輕量級函數(shù)式編程的面紗 ~
以上就是JS輕量級函數(shù)式編程實現(xiàn)XDM二的詳細(xì)內(nèi)容，更多關(guān)于JS輕量級函數(shù)式編程XDM的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
codemirror6實現(xiàn)在線代碼編輯器使用詳解
這篇文章主要為大家介紹了codemirror6實現(xiàn)在線代碼編輯器使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-01-01
這篇文章主要為大家介紹了await 錯誤捕獲實現(xiàn)方式源碼示例解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-12-12
這篇文章主要介紹了微信小程序 使用canvas制作K線實例詳解的相關(guān)資料,需要的朋友可以參考下2017-01-01
這篇文章主要介紹了微信小程序 動畫的簡單實例的相關(guān)資料,希望通過本文能幫助到大家，需要的朋友可以參考下2017-10-10
這篇文章主要介紹了微信小程序 底部導(dǎo)航欄目開發(fā)資料的相關(guān)資料，微信小程序底部想要有一個漂亮的導(dǎo)航欄目，不知道怎么制作，于是百度找到了本篇文章，分享給大家,需要的朋友可以參考下2016-12-12
動態(tài)加載iframe...2006-06-06
相信絕大多數(shù)同學(xué)都聽過閉包這個概念，但閉包具體是什么估計很少有人能夠說的很詳細(xì)。說實話閉包在我們平時開發(fā)中應(yīng)該是很常見的，并且在前端面試中閉包也是常見的重要考點，在學(xué)習(xí)閉包之前我們先來看看作用域與作用域鏈，因為這是閉包的關(guān)鍵。2021-10-10
這篇文章主要為大家介紹了以JS開發(fā)為例詳解版本號的作用與價值詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-09-09
微信小程序 less文件編譯成wxss文件實現(xiàn)辦法
這篇文章主要介紹了微信小程序 less文件編譯成微信小程序wxss文件實現(xiàn)辦法的相關(guān)資料,這里給出具體實現(xiàn)方法，需要的朋友可以參考下2016-12-12
這篇文章主要介紹了微信小程序 教程之wxapp 視圖容器 view的相關(guān)資料,需要的朋友可以參考下2016-10-10