Примеры функций каррирования, включая манипуляции с DOM
- "Исходный код"
- "Видео"
В JavaScript каррирование - это практика композиции, при которой функция с несколькими аргументами переписывается в серию функций, в которой каждая функция принимает только один аргумент.
Вот пример объединяющей функции, которая принимает несколько аргументов:
function greetings (greeting, name) {
return greeting + " " + name
}
greetings('Hello','Tatiana'); // returns Hello Tatiana
Карри-версия будет следующей:
function greetings (greeting) { return function (name) {
return greeting + " " + name
}
Обратите внимание, что каррированная функция greetings принимает только один аргумент и возвращает другую функцию, которая также принимает один аргумент, а затем возвращает объединенные результаты.
В этой новой форме возможности каррирования можно продемонстрировать, создав currier служебную программу с заданным целевым фрагментом данных.
Если, например, мы всегда хотим, чтобы функция greetings начиналась с «hello», мы можем создать для этого служебную программу currier, как показано ниже.
var currier = greetings('Hello')
currier('Michael') // returns Hello Michael
Теперь, если бы у нас был массив имен, и мы хотели бы всегда посылать конкретное приветствие «привет» к именам, мы могли бы использовать утилиту currier.
namesArray = ['Tom','Suzy','Bob','John']
let results = []
for(let i = 0; i < namesArray.length; i++) {
results += currier(namesArray[i] + ". ")
}
// returns "hello Tom. hello Suzy. hello Bob. hello John. "
Наша функция currier всегда будет запускать приветствие ввода «hello» в этом экземпляре для набора имен, так что, когда мы выполняем функцию несколько раз, мы запускаем только вторую часть функции. Очень круто.
Изучив основные принципы написания функций каррирования на JavaScript, давайте сделаем небольшой перерыв на кофе, а затем начнем кодирование нашего преобразователя температуры Кельвина.
Доступ к DOM и манипуляции с ним
В следующем примере мы построим преобразователь Кельвина в Фаренгейта с помощью ванильного JavaScript с нуля, наблюдая и сравнивая каррирование и функциональное программирование.
Давайте начнем с создания файла index.html для настройки ввода, кнопки и результатов конвертера.
Как мы видим, мы создаем button, который принимает идентификатор convertKelvin, input для числа, которое пользователь может ввести, устанавливая значение 0, и тег p с span, где мы можем отображать преобразование.
Мы также связали исходный код скрипта index.js, который вскоре создадим.
Достаточно просто, поэтому давайте запустим это в браузере, и мы должны увидеть эти впечатляющие визуальные результаты.
Отлично, давай продолжим кофе и создадим этот index.js файл.
Во-первых, давайте выберем элементы, которыми мы хотим манипулировать с помощью JavaScript в DOM, и подключим событие нажатия кнопки, чтобы мы запустили журнал, чтобы убедиться, что все работает и работает нормально.
Когда мы сохраняем и обновляем браузер, теперь мы можем видеть, что журнал test выполняется при каждом щелчке в наших DevTools.
Нам удалось это запустить, выбрав идентификаторы наших элементов с помощью document.querySelector для доступа к каждому уникальному атрибуту Id, который мы установили в файле index.html.
В частности, мы установили идентификатор кнопки convertKelvin на переменную const convertKelvin. Затем мы запускаем событие onclick, которое запускает функцию для запуска журнала test.
Теперь, когда это работает, давайте создадим функцию преобразования Кельвина в Фаренгейта.
Формула Кельвина и реализация модели DOM
Существуют различные формулы преобразования Кельвина, поэтому мы сосредоточимся на следующем:
Formula = ((kelvin — 273.15) * 9 / 5) + 32
Давайте применим эту формулу к новой функции, которая преобразует жестко запрограммированный аргумент, равный 300 Кельвину.
Мы устанавливаем convertKelvinReg на аргумент Кельвина (который мы вызываем с вводом 300) и параметр формулы.
Затем мы жестко кодируем приведенную выше формулу Кельвина и используем Math.round , чтобы избежать ненужной десятичной точки температуры для пользователя.
Обратите внимание, что мы не устанавливаем формулу в качестве аргумента, поскольку этот пример предназначен исключительно для просмотра различий в составе и контрастности каррирования, в отличие от его чисто функционального применения, о котором мы подробнее поговорим в разделе обсуждения этого сообщения.
Затем формула return переходит к идентификатору результата, который выбирается из тега p в нашей DOM.
Наконец, мы вызываем функцию convertKelvinReg в нашем onclick событии кнопки, чтобы она обновлялась и преобразовывалась только после того, как пользователь нажимает кнопку.
Когда мы сохраняем и обновляем, мы видим, что получаем успешный возврат 80 по Фаренгейту. Однако это пример функции без каррирования, и мы также не подключили значение ввода для доступа к кнопке.
Давайте выпьем пару теплых и привлекательных глотков черного кофе и напишем код преобразования каррирования.
Карри Кельвина по Фаренгейту
С логической точки зрения, каррированная версия функции преобразования функции преобразования по существу остается.
Однако теперь новая функция принимает только один параметр или аргумент за раз и возвращает новую функцию, которая, наконец, отправляет логику на идентификатор нашего результата тега p.
Идентификатор входа kelvinNumber устанавливается в переменную const kelvinNumber, предоставляя нам доступ к значению. Затем мы создаем функцию полезности currier, которая всегда принимает входное значение в качестве аргумента.
Установив для этой утилиты значение, мы можем теперь просто вызвать наш currier в нашем onclick событии кнопки преобразователя, которая будет запускать ввод, отображая успешное преобразование для пользователя.
Когда мы сохраняем и обновляем браузер и тестируем ввод со значением 300, мы получаем следующий успешный результат.
Наша функция карри работает, и теперь мы можем отпраздновать это выпивкой кофе, прежде чем перейти к быстрому обзору и дать всем пять.
Заключение
И это касается того, что касается структуры каррирования в JavaScript. Если вы можете придумать еще несколько интересных примеров или идей каррирования, не стесняйтесь оставлять их в комментариях ниже, и я проверю их.
Пожалуйста, не стесняйтесь проверить видео и полный исходный код в верхней части этого сообщения. Кроме того, я предоставлю пару других полезных статей о каррировании внизу.
Спасибо за чтение и, надеюсь, вы нашли часть этого полезной!
