Улучшение возможности повторного использования кода Javascript с помощью парадигм функционального программирования
99% программирования - это чтение и интерпретация текста, так почему же вы до сих пор не заботитесь о здоровье своего кода, как ваш? Представьте себе сценарий, в котором вы могли бы изменить framework / lib в вашем интерфейсе одним щелчком мыши или близко к нему, разве это не была бы среда вашей мечты?
Функциональное программирование (и шаблон UMD) в javascript помогает вам отделить бизнес-логику и повторно использовать ваш код в ваших крутых фреймворках для шумихи. Я не буду слишком углубляться в функциональные парадигмы, потому что об этом уже написано много замечательных статей, я буду уделять больше внимания повторному использованию кода с помощью javascript. Итак, давайте воплотим эту мечту в реальность. . Но сначала давайте посмотрим, что вы можете делать в любых условиях.
В любом состоянии
В Javascript у нас есть 2 словаря, о которых вам нужно позаботиться, чтобы ваша среда работала: Массивы и объекты. В функциональном программировании мы хотим всегда возвращать новое значение и не изменять входное значение функции, поэтому мы можем повторно использовать их начальное состояние и избегать побочных эффектов, таких как обновление глобальной переменной внутри другой области. Используйте неизменяемые и избегайте изменяемых (когда можете).
Эти типы имеют неизменяемые и изменяемые функции в своих прототипах (если я что-то забуду, скажите мне, чтобы я мог обновить, спасибо):
Массивы (MDN)
- Неизменяемые: concat (), entries (), every (), filter (), find (), findIndex (), includes (), indexOf (), join (), keys (), lastIndexOf. (), map (), .reduce (), reduceRight (), slice (), some (), toLocaleString (), toSource (), toString (), values ();
- Изменяемые: copyWithin (), fill (), forEach () **, pop (), push (), reverse (), shift (), sort (), splice (), unshift () ;
Объекты (MDN)
- Неизменяемые: assign (), create (), entries (), getOwnPropertyDescriptor (), getOwnPropertyDescriptors (), getOwnPropertyNames (), getOwnPropertySymbols (), getPrototypeOf (), is ( ), isExtensible (), isFrozen (), isSealed (), keys (), hasOwnProperty (), isPrototypeOf (), propertyIsEnumerable (), toLocaleString (), toString (), values ()
- Изменяемые: freeze (), defineProperties (), defineProperty (), preventExtensions (), valueOf (), seal (), setPrototypeOf ()
Больше неизменяемых, чем изменяемых, верно? Я лично считаю, что это знак для нас, чтобы наша env оставалась неизменной (и чистой). Мне очень жаль, что в школе этому еще не учат. Итак, давайте попробуем реальный массив объектов вроде этого:
Немного ноль и 0 прямо здесь, потому что apis может дать сбой, и мы не можем это игнорировать. Мы хотим пройти по этим трем пунктам и получить только имя, чтобы составить еще один список. forEach, нажимайте и соединяйте, - говорите вы? Нет! map, reduce и filter вы должны сказать (это наиболее распространенные), чтобы вы могли повторно использовать эту модель в другом месте, чтобы составить другой список, получить объект массива с суммированной энергией той же единицы или суммировать только простые атрибуты . Давайте посмотрим, как выглядит реальная жизнь, чтобы повторно использовать их тремя разными способами:
И если вы используете console.log для культур, массив все равно будет там! нетронутые! Замечательно, правда? Вам не нужно снова извлекать данные из серверной части, делать копии массивов или объявлять переменную в строке 10, преобразовывать сумасшедшую функцию в 140 и никогда не узнавать, почему в строке 328 массив не такой, как раньше. То же самое и с объектами. Хорошая идея, потом вы сами себе за это поблагодарите!
HOFs
Прекрасной техникой являются функции высшего порядка, HOF. Ууух, горячее слово прямо здесь, но оно действительно простое в использовании. Представьте, что вы используете библиотеку, как Redux, и у вас есть магия dispatch (). Но вы не используете отправку в angular, как вы повторно используете свое действие в условиях бизнес-логики? Святой !!! Все, что вам нужно сделать, это создать функцию, возвращающую другую функцию. Вы можете сделать это нефункциональным способом, я знаю это, но это кажется еще более легким для чтения, только если вы сделаете это функциональным способом. В этом случае мы только запускаем действие в условии, а затем проверяем, есть ли у нас отправка, если нет, просто выполняем функцию.
Чистые функции
Отлично! Мы сделали функцию более высокого порядка! Но мы также создали чистую функцию! вау! Что это обозначает? Это означает, что вы создали функцию, которая при вводе X всегда будет возвращать один и тот же вывод Y. Например, в reduxAction, если вы передадите ему массив культур в любой момент, когда вам нужно выполнить функцию reduxAction, он всегда будет возвращать объект со значением свойства «culture» как переданное. множество. Функция не зависит ни от чего, кроме ее параметров, увеличивая до 100% возможность повторного использования этой чистой магии в следующих строках кода 🔥.
Если у вас уже есть большая кодовая база
Конечно, вы уже заметили, что часто повторяете себя при преобразованиях массивов, объектов и строк, так что же вы можете сделать? Идея состоит в том, чтобы создать отдельные файлы для бизнес-логики и преобразования данных и постоянно улучшать их для повторного использования в любом другом контексте с теми же потребностями. Для этого используйте функции для всего.
Эти функции являются общим примером тех, что вы видели раньше, они просто получают массив и преобразуют его, всегда возвращая новое значение и не изменяя данные. Если вы измените данные, вы не сможете повторно использовать их в том же файле и попадете в императивную ошибку. Эти преобразования можно повторно использовать в Vue, React и Angular, например, для визуализации представлений!
Если ваша кодовая база мала
У нас есть некоторые правила ESLint для обеспечения соблюдения стиля функционального программирования в javascript, которые вы можете упростить, установив npm и настроив свой .eslintrc / .eslintrc.js
Еще один совет - создавать не только файлы, но и целые каталоги, чтобы изолировать ваши преобразователи и файлы HOF, чтобы у других файлов было только одно место для импорта, например, единый источник истины, тогда вы может достичь волшебства «изменить framework / lib в вашем интерфейсе одним щелчком мыши».
Если у вас еще нет кодовой базы
Я знаю, что то, что вы собираетесь прочитать, кажется безумным, но серьезно подумайте об этом. Создайте новое репо только для бизнес-логики. Я пока не знаю продуктивного способа сделать это, потому что вам нужно будет постоянно фиксировать в двух отдельных репозиториях, чтобы увидеть результат, но правда в том, что если ваша логика написана на чистом javascript, это будет намного проще. для повторного использования в React, Vue.js, Angular, Whatever.js, и нетрудно представить себе диаграмму, подобную приведенной ниже.
В этом примере есть 3 репозитория git, которые повторно используют изолированные бизнес-чисто неизменяемые функции, написанные на чистом javascript (вы можете называть их IBPIF, если хотите 😂) для создания своих представлений и построения экранов без повторения каких-либо преобразований или условных условий. .
Итак, вы могли подумать:
Мы программируем на Javascript, для этого должна быть библиотека!
Да! у нас есть знаменитые библиотеки, которые используют функциональные парадигмы как основу для принятия любого решения.
У нас также есть плейлист (некоторые видео платные, но ДЕЙСТВИТЕЛЬНО того стоят) на сайте egghead.io, где разные учителя создали учебные пособия, охватывающие функциональные шаблоны javascript, чтобы вы и ваша команда могли учиться на примерах и развивать свой потрясающий проект с помощью этой парадигмы.
И последнее, перестаньте пытаться найти только примеры из реального мира во всем, что вы делаете, заставьте себя найти лучший способ использовать то, что вы изучаете, и не блокируйте новые способы улучшения вашего кода только потому, что это еще не большая компания, использующая это, это очень поможет вам узнать вещи, которые другие люди еще не считали важными. Не ждите следующего крупного запуска Google, Facebook или Twitter, делайте ваши запуски все больше и больше, чтобы вы могли стать лучше для себя.
