Comprendre la composition du code (composer) dans la programmation fonctionnelle JavaScript

Le contenu de cet article porte sur la compréhension de la composition du code (compose) dans la programmation fonctionnelle JavaScript. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Comment comprendre la composition du code (composer) en programmation fonctionnelle ?

Définition : Comme son nom l'indique, en programmation fonctionnelle, Compose consiste à reconstituer plusieurs fonctions distinctes et à les combiner, à générer une. toute nouvelle fonction

Compréhension du code :

// 一个将小写转大写的函数
let toUpperCase = (x) => x.toUpperCase();

// 一个在字符后加！的函数
let exclaim = (x) => x + '!';

// 将两个函数组合起来, 这里假设我们实现了compose
let shout = compose(toUpperCase,exclaim);

shout('js每日一题') // JS每日一题 !, 显示结果里上面两个函数的特点都应用上了

pointfree

Il y a un concept important pointfree dans la combinaison de code (ne dites jamais vos données), cela signifie que la fonction ne pas besoin de mentionner sur quel type de données il va opérer

C'est un peu obscur, passons au code pour le comprendre

// 我们有一个将字符转换成大写并且将其空格转换为'-'的函数
// 细节的同学应该发现这个函数暴露了一个word形参
// 根据pointfree定义，此函数非pointfree模式
let snakeCase = (word) => word.toUpperCase().replace(/\s+/ig,'-');

// 下面这个函数与上面的功能一致，但我们可以观察到其没有数据暴露,所以其为pointfree模式
let snakeCase = compose(replace(/\s+/ig,'-'),toUpperCase)

Cela dit, que peut-il faire ? ? Cela peut nous aider à réduire les noms inutiles et à garder le code simple et générique

implémentation de compose

Avant tout, nous supposons tous que la méthode compose existe déjà, nous l'implémenterons ensuite

Analysez d'abord ses caractéristiques

• Les deux fonctions ont un paramètre commun
• L'ordre d'exécution des fonctions est de droite à gauche
• L'exécution de la fonction précédente Le le résultat est traité par les fonctions suivantes

Sur la base de l'exemple ci-dessus et des caractéristiques que nous avons analysées, nous pouvons implémenter une version la plus simple de

// 这样子其实就能满足我们上面示例的要求了
const compose = function(f, g) {
  return function(x) {
    return f(g(x));
  };
};

C'est fini ? nous pouvons voir que les exemples de composition ci-dessus ne transmettent que deux fonctions, car notre version simplifiée de l'implémentation de compose ne prend en charge que deux fonctions, alors si nous voulons prendre en charge un pipeline très long, évidemment la composition ci-dessus ne suffit pas, regardons la composition implémentation de l'excellente bibliothèque open source redux

// 摘自 https://github.com/reactjs/redux/blob/master/src/compose.js
export default function compose(...funcs) {
  // 没有传入函数运行直接返回参数
  if (funcs.length === 0) {
    return arg => arg
  }
  // 只传入一个函数，就返回其本身
  if (funcs.length === 1) {
    return funcs[0]
  }
  
  // 核心代码其实就是一句reduce, reduce特性就是按顺序执行，并且将结果传递给下一次执行, 这里多说一句, reduce顺序执行多个相依赖的promise也很好用
  return funcs.reduce((a, b) => (...args) => a(b(...args)))
}

Résumé

Une fonction qui combine plusieurs fonctions à fonctionnalité unique

Plusieurs fonctions servent un ensemble des données (paramètres communs)

Pas besoin de dire les données (pointfree)

Les fonctions sont exécutées séquentiellement de droite à gauche, et le résultat est utilisé comme paramètres de fonction suivants

Cet article est terminé ici. Pour un contenu plus passionnant, vous pouvez faire attention à la colonne Vidéo du didacticiel JavaScript du site Web PHP chinois !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!