資訊專欄INFORMATION COLUMN
摘要：在這篇文章中，我們來看一下讓成為適合函數(shù)式編程的組成部分，并且看看為什么它將會是很有用的。組成在我們去思考這為什么是個好主意之前，讓我們用的一些基本特性去實現(xiàn)函數(shù)式編程。
tips
原文鏈接: http://jrsinclair.com/articles/2016/gentle-introduction-to-functional-javascript-intro/;
原文作者: James Sinclair;
這篇文章是介紹函數(shù)式編程的四篇文章中的第一篇。在這篇文章中，我們來看一下讓 JavaScript 成為適合函數(shù)式編程的組成部分，并且看看為什么它將會是很有用的。
Part1 組成部分和動機,
Part2 使用數(shù)組和列表,
Part3 生成函數(shù)的函數(shù),
Part4 使用函數(shù)式編程的風格,
什么是函數(shù)？為什么函數(shù)式 JavaScript 如此夸大其詞呢？為什么它叫做函數(shù)式？它不是像任何人去寫一個功能失調或者沒有函數(shù)式的 JavaScript。它的好處是什么？你的煩惱是什么？
對于我來講，學習函數(shù)式編程就像得到了一個多功能食品料理機一樣：
它的前提是需要一些學習成本
你可以告訴你的朋友和家人它是多么令人驚喜
它們將會開始懷疑你是不是加入了某個異教團
但是，它確實讓很多任務變得簡單，它甚至可以自動處理一些在某些方面相當無聊和浪費時間的東西。
在我們去思考這為什么是個好主意之前，讓我們用 JavaScript 的一些基本特性去實現(xiàn)函數(shù)式編程。在 JavaScript 中，有兩個關鍵的組成部分：變量和函數(shù)，變量就像一個容器，我們可以把一些東西放在里面，就像這樣：
var myContainer = "Hey everybody! Come see how good I look!";
上面的代碼創(chuàng)建的一個容器，并且將一個字符串放在了里面。
在另一方面，函數(shù)，它是一種途徑可以綁定一些指令用于我們可以再使用它，它還能讓事情變得有條理，因此我們不用一下子去考慮每一件事情。我們可以創(chuàng)建一個函數(shù)像這樣：
function log(someVariable) {
console.log(someVariable);
return someVariable;
}
我們可以這樣調用它：
log(myContainer); // Hey everybody! Come see how good I look!
當時，如果你之前了解過一些 JavaScript ，就會知道我們還可以像下面這樣編寫和調用函數(shù)：
var log = function(someVariable) {
console.log(someVariable);
return someVariable;
}
log(myContainer);
// Hey everybody! Come see how good I look!
讓我們仔細觀察，當我們用這種方式定義一個函數(shù)的時候，相當于我們創(chuàng)造一個叫做 log 的變量，然后把一個函數(shù)賦值給它。事實也確實如此。我們的 log() 函數(shù)是一個變量，這意味著我們可以對他做和其他變量一樣的事情。
讓我們試一試，或許我們可以把一個函數(shù)作為一個參數(shù)傳給另一個函數(shù)：
var classyMessage = function() {
return "Stay classy San Diego!";
}
log(classyMessage);
// [Function]
hahahaha，好像沒什么有用的驚喜啊，讓我們嘗試用不同的方式：
var doSomething = function(thing) {
thing();
}
var sayBigDeal = function() {
var message = "I’m kind of a big deal";
log(message);
}
doSomething(sayBigDeal);
// I’m kind of a big deal
這應該不會讓你感到非常激動，當時它讓那些計算機科學家非常地激動。它能夠把函數(shù)放在一個變量中，有時候可以這么說“函數(shù)是 JavaScript 中的第一類對象”。這意味著處理對待函數(shù)和其他的數(shù)據(jù)類型就像對象或者字符串沒什么兩樣。并且這一個小的特性將會驚人地有用，為了搞明白為什么，我們得談一談 DRY 原則。
不要重復程序猿喜歡說 DRY 原則 ———— 不要重復你自己，它的意思是說，如果你需要去多次執(zhí)行同樣的任務，把它們綁定在一類可以重復使用的包里面（就像函數(shù)），這樣的話，如果你想要調整任務設置的話，你只需在一個地方改動就行了——函數(shù)。
讓我們看看這個例子，我們使用一個輪播庫在頁面上放三個輪播組件：
var el1 = document.getElementById("main-carousel");
var slider1 = new Carousel(el1, 3000);
slider1.init();
var el2 = document.getElementById("news-carousel");
var slider2 = new Carousel(el2, 5000);
slider2.init();
var el3 = document.getElementById("events-carousel");
var slider3 = new Carousel(el3, 7000);
slider3.init();
上面的代碼有些重復，我們想要給頁面上的元素初始化一個輪播組件，并且每個都帶有一個特定的 ID ，讓我們看看如何在函數(shù)中去初始化一個輪播組件，然后給每個 ID 調用這個函數(shù)。
function initialiseCarousel(id, frequency) {
var el = document.getElementById(id);
var slider = new Carousel(el, frequency);
slider.init();
return slider;
}
initialiseCarousel("main-carousel", 3000);
initialiseCarousel("news-carousel", 5000);
initialiseCarousel("events-carousel", 7000);
這樣，代碼就非常簡潔了并且很好去維護。我們可以遵循下面一個準則：當我們需要對不同的數(shù)據(jù)做一系列相同的操作的時候，我們可以把這些操作包裝在一個函數(shù)中。當是如果這些操作也存在一些不同呢？
var unicornEl = document.getElementById("unicorn");
unicornEl.className += " magic";
spin(unicornEl);
var fairyEl = document.getElementById("fairy");
fairyEl.className += " magic";
sparkle(fairyEl);
var kittenEl = document.getElementById("kitten");
kittenEl.className += " magic";
rainbowTrail(kittenEl);
去重構這些代碼有些復雜，它確實是一個重復的模式，但是我們給每個元素調用了不同的函數(shù)，我們可以第一步先包裝 document.getElementById() 的調用和添加 className 的操作到一個函數(shù)，這樣可以降低一些重復度：
function addMagicClass(id) {
var element = document.getElementById(id);
element.className += " magic";
return element;
}
var unicornEl = addMagicClass("unicorn");
spin(unicornEl);
var fairyEl = addMagicClass("fairy");
sparkle(fairyEl);
var kittenEl = addMagicClass("kitten");
rainbow(kittenEl);
但是我們怎樣讓他變得更 DRY 一些呢？如果你記得 JavaScript 可以允許我們把一個函數(shù)作為一個參數(shù)傳給另一個函數(shù)：
function addMagic(id, effect) {
var element = document.getElementById(id);
element.className += " magic";
effect(element);
}
addMagic("unicorn", spin);
addMagic("fairy", sparkle);
addMagic("kitten", rainbow);
這變得更簡潔了，并且更易于維護，這種把函數(shù)座位參數(shù)傳遞的能力是我們看到了更多的可能性，在下一節(jié)我們將會看到如何使用這種能力是數(shù)組變得更友好。
未亡待續(xù)...
閱讀下一節(jié)～
原文來自我的博客 http://qiutc.me/post/a-gentle-introduction-to-functional-javascript-part-1.html
歡迎大家關注～
文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/78767.html
摘要：為了盡可能提升互通性，已經(jīng)成為函數(shù)式編程庫遵循的實際標準。與輕量級函數(shù)式編程的概念相反，它以火力全開的姿態(tài)進軍的函數(shù)式編程世界。 原文地址：Functional-Light-JS 原文作者：Kyle Simpson－《You-Dont-Know-JS》作者 關于譯者：這是一個流淌著滬江血液的純粹工程：認真，是 HTML 最堅實的梁柱；分享，是 CSS 里最閃耀的一瞥；總結，...
摘要：所以我覺得函數(shù)式編程領域更像學者的領域。函數(shù)式編程的原則是完善的，經(jīng)過了深入的研究和審查，并且可以被驗證。函數(shù)式編程是編寫可讀代碼的最有效工具之一可能還有其他。我知道很多函數(shù)式編程編程者會認為形式主義本身有助于學習。 原文地址：Functional-Light-JS 原文作者：Kyle Simpson － 《You-Dont-Know-JS》作者 關于譯者：這是一個流淌著滬江血液...
摘要：前端日報精選漫談函數(shù)式編程一十年蹤跡的博客前端每周清單的優(yōu)勢與劣勢有望超越在嵌入式及物聯(lián)網(wǎng)的應用現(xiàn)狀進階系列高階組件詳解一前端之路譯如何充分利用控制臺掘金程序猿升級攻略眾成翻譯中文譯如何充分利用控制臺掘金前端從強制開啟壓縮探 2017-06-27 前端日報 精選 漫談 JS 函數(shù)式編程（一） - 十年蹤跡的博客前端每周清單： Vue的優(yōu)勢與劣勢；Node.js有望超越Java；JS在嵌...
摘要：本書主要探索函數(shù)式編程的核心思想。我們在中應用的僅僅是一套基本的函數(shù)式編程概念的子集。我稱之為輕量級函數(shù)式編程。通常來說，關于函數(shù)式編程的書籍都熱衷于拓展閱讀者的知識面，并企圖覆蓋更多的知識點。，本書統(tǒng)稱為函數(shù)式編程者。 原文地址：Functional-Light-JS 原文作者：Kyle Simpson － 《You-Dont-Know-JS》作者 譯者團隊（排名不分先后）...
摘要：我稱之為輕量級函數(shù)式編程。序眾所周知，我是一個函數(shù)式編程迷。函數(shù)式編程有很多種定義。本書是你開啟函數(shù)式編程旅途的絕佳起點。事實上，已經(jīng)有很多從頭到尾正確的方式介紹函數(shù)式編程的書了。 原文地址：Functional-Light-JS 原文作者：Kyle Simpson － 《You-Dont-Know-JS》作者 譯者團隊（排名不分先后）：阿希、blueken、brucecham、...
閱讀 3540·2019-08-30 12:58
閱讀 923·2019-08-29 16:37
閱讀 2796·2019-08-29 16:29
閱讀 3105·2019-08-26 12:18
閱讀 2365·2019-08-26 11:59
閱讀 3405·2019-08-23 18:27
閱讀 2770·2019-08-23 16:43
閱讀 3301·2019-08-23 15:23
