JavaScript中的函数式编程一(翻译)

2019年8月30日 160次阅读 来源: 阿城

《JavaScript中的函数式编程一(翻译)》

tips

原文链接: http://jrsinclair.com/articles/2016/gentle-introduction-to-functional-javascript-intro/;
原文作者: James Sinclair;

JavaScript 函数式编程

这篇文章是引见函数式编程的四篇文章中的第一篇。在这篇文章中，我们来看一下让 JavaScript 成为合适函数式编程的构成部分，而且看看为何它将会是很有效的。

什么是函数？

为何函数式 JavaScript 云云言过其实呢？为何它叫做函数式？它不是像任何人去写一个功用失调也许没有函数式的 JavaScript。它的优点是什么？你的懊恼是什么？
关于我来说，进修函数式编程就像得到了一个多功用食物摒挡机一样：

  • 它的条件是须要一些进修本钱

  • 你可以通知你的朋侪和家人它是何等使人欣喜

  • 它们将会最先疑心你是否是加入了某个异教团
    然则，它确切让许多使命变得简朴，它以至可以自动处置惩罚一些在某些方面相称无聊和浪费时间的东西。

构成

在我们去思索这为何是个好主意之前，让我们用 JavaScript 的一些基础特征去完成函数式编程。在 JavaScript 中，有两个症结的构成部分：变量和函数，变量就像一个容器，我们可以把一些东西放在内里，就像如许：

var myContainer = "Hey everybody! Come see how good I look!";

上面的代码建立的一个容器，而且将一个字符串放在了内里。
在另一方面，函数，它是一种门路可以绑定一些指令用于我们可以再运用它，它还能让事变变得有条理，因而我们不必一会儿去斟酌每一件事变。我们可以建立一个函数像如许：

function log(someVariable) {
    console.log(someVariable);
    return someVariable;
}

我们可以如许挪用它：

log(myContainer);
// Hey everybody! Come see how good I look!

当时，假如你之前相识过一些 JavaScript ，就会晓得我们还可以像下面如许编写和挪用函数：

var log = function(someVariable) {
    console.log(someVariable);
    return someVariable;
}

log(myContainer);
// Hey everybody! Come see how good I look!

让我们仔细观察，当我们用这类体式格局定义一个函数的时刻，相称于我们制造一个叫做 log 的变量，然后把一个函数赋值给它。现实也确切云云。我们的 log() 函数是一个变量，这意味着我们可以对他做和其他变量一样的事变。
让我们试一试，也许我们可以把一个函数作为一个参数传给另一个函数：

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

这应当不会让你觉得异常冲动，当时它让那些计算机科学家异常地冲动。它可以把函数放在一个变量中，有时刻可以这么说“函数是 JavaScript 中的第一类对象”。这意味着处置惩罚看待函数和其他的数据类型就像对象也许字符串没什么两样。而且这一个小的特征将会惊人地有效，为了搞邃晓为何，我们得谈一谈 DRY 准绳。

不要反复

顺序猿喜好说 DRY 准绳 ———— 不要反复你本身，它的意义是说，假如你须要去屡次实行一样的使命，把它们绑定在一类可以反复运用的包内里（就像函数），如许的话，假如你想要调解使命设置的话，你只需在一个处所修改就好了——函数。
让我们看看这个例子，我们运用一个轮播库在页面上放三个轮播组件：

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 ，让我们看看如安在函数中去初始化一个轮播组件，然后给每一个 ID 挪用这个函数。

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);

如许，代码就异常简约了而且很好去保护。我们可以遵照下面一个原则：当我们须要对差别的数据做一系列雷同的操纵的时刻，我们可以把这些操纵包装在一个函数中。当是假如这些操纵也存在一些差别呢？

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);

去重构这些代码有些庞杂，它确切是一个反复的形式，然则我们给每一个元素挪用了差别的函数，我们可以第一步先包装 document.getElementById() 的挪用和增加 className 的操纵到一个函数，如许可以下降一些反复度：

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 可以许可我们把一个函数作为一个参数传给另一个函数：

function addMagic(id, effect) {
    var element = document.getElementById(id);
    element.className += ' magic';
    effect(element);
}

addMagic('unicorn', spin);
addMagic('fairy', sparkle);
addMagic('kitten', rainbow);

这变得更简约了，而且更易于保护，这类把函数坐位参数通报的才能是我们看到了更多的可能性，鄙人一节我们将会看到怎样运用这类才能是数组变得更友爱。
未亡待续…
浏览下一节～

原文来自我的博客 http://qiutc.me/post/a-gentle-introduction-to-functional-javascript-part-1.html
迎接人人关注～

    原文作者：阿城
    原文地址: https://segmentfault.com/a/1190000004514876
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞