Концепции конвейера и компоновки в Javascript — это круто, и их важно знать каждому фронтенд-разработчику и, в основном, разработчикам React, которые используют redux😎
Хорошо, давайте в тему
И что немаловажно, это моя первая статья или блог на Medium, как вы это называете, ребята.
Прежде чем вы изучите эти вещи, выдолжны прочитатьоArray.reduceи стрелочных функциях ES6
Прежде чем мы узнаем о пайпе и композиции, нам нужно знать три вещи.
1.какую проблему решает pipe и compose в javascript?
2.Как решить эту проблему с помощью pipe и compose?
3.Почему функция канала называется каналом, а функция компоновки называется композицией?
Посмотрим, в чем проблема без пайпа?
В приведенной выше программе у нас есть несколько функций. и мы сделали несколько вызовов функций
И что важно, мы дали один ввод и получили результат только в виде одного вывода. Но мы можем сделать несколько вызовов функции для этого единственного вывода. И вот в чем непорядок.
Все в порядке, мы должны посмотреть в другую сторону. Давайте посмотрим на это
мы можем сделать только один вызов функции вместо нескольких вызовов функций. Это называется вложенными вызовами функций
вызов вложенных функций — неплохой способ, но он выглядит не очень красиво, и в основном мы теряем некоторую читабельность кода.
Давайте посмотрим, как pipe и compose выходят за рамки проблемы.
Прежде чем начать, нам нужно знать, что такое pipe в javascript.
pipe - это не что иное, как простая функция в javascript. Эта функция принимает любое количество функций в качестве аргументов и сокращается, как одна за другой, путем решения каждой функции, а вывод этой решенной функции делает ввод другого вызова функции внутри уменьшите. Этот процесс цепочки будет продолжаться до тех пор, пока не будет решена последняя функция.
Идея неплохая, но как она реализована?
Давайте реализуем функцию канала
перед внедрением мы должны знать о Array.reduce и о том, как он работает
Не волнуйтесь, я извлеку каждое слово из функции конвейера?
1.Pipe — это функция, которая принимает аргумент с переменной оператор спреда. это означает, что мы можем передать N функций в качестве аргументов для канала
2. Эта функция возвращает другую функцию, которая принимает аргумент в качестве входного значения. Здесь мы должны знать об одной вещи, функция конвейера действует как HigherOrderFunction.
3. Возвращаемая функция будет обрабатывать каждую функцию одну за другой, используя Array.reduce. Как результат одной функции будет вводом другой функции, этот процесс будет продолжаться до тех пор, пока все функции не будут выполнены. Это одна из причин, по которой мы используем аргумент оператора распространения. в функции канала
Это необязательный раздел. Вы знаете о array.reduce и пропустите этот раздел.
1. как будут решаться функции в array.reduce?
2.мы знаем, как работает arr.reduce. Становится очень легко понять
3. Позвольте напомнить некоторые основы массива.
4.Array.Reduce будет принимать два аргумента: первый — это функция, а второй — параметр, который действует как значение по умолчанию. Это значение по умолчанию действует как первый аргумент функции, которую мы предоставим в качестве первого аргумента для Array.reduce.
5. Внутренняя функция каждый раз запускается, и первоначально первый аргумент принимает значение по умолчанию, а второй аргумент будет первым значением в массиве, а затем возвращаемое значение из этой функции действует как первый аргумент для этой функции, этот процесс цепочки будет продолжаться до тех пор, пока массив не будет уменьшенный
Для лучшего понимания Array.reduce() нажмите здесь
Теперь, что сочинить
Compose — это зеркало концепции канала.
Внимательно следите за функцией канала, она может разрешать функции слева направо, когда мы передаем аргументы в функцию канала.
Таким образом, компоновка Like Same будет разрешать справа налево, поэтому, когда мы передаем аргументы функции компоновки
«мы передадим, какая функция будет выполняться последней, а какой первым аргументом для составления функции»
"Функция, которая будет выполнять первый и последний аргумент для создания функции"
например, как мы передаем обратный порядок аргументов функции конвейера для функции составления
Здесь мы будем использовать функцию Array.reduceRight() вместо Array.reduce() в функции конвейера.
Вот как pipe и compose будут работать в функциональном программировании JavaScript
Почему функции pipe называются pipe?
«Концепция пайпа проста, он сочетает в себе n функций. Это поток слева направо, вызывающий каждую функцию с выходом последней. Давайте напишем функцию, которая возвращает чье-то имя»
