Paradigm - Как правильно применять функциональное программирование в повседневной работе

внешний интерфейс функциональное программирование

предисловие

Я считаю, что многие друзья фронтенда более или менее слышали о функциональном программировании, и вы, возможно, слышали о концепции функционального программирования.В этой статье будет рассказано о некоторых особенностях и характеристиках функционального программирования.Преимущества, но не будем рассматривать слишком много контента.Ведь статей о преимуществах и характеристиках в интернете очень много.

Основная цель этой статьи — помочь друзьям, которые не понимают функциональное программирование, понять функциональное программирование; друзья, которые понимают функциональное программирование, не знают, как его использовать, поэтому помогите вам проанализировать и применить его к реальным проектам.

характеристика

Функции - это "граждане первого сорта"

Из буквального смысла можно понять, что функции являются неотъемлемой частью функционального программирования.

Замыкания и функции высшего порядка

Понятия замыканий и функций высшего порядка тоже много искали в интернете, не буду их здесь объяснять, Baidu, сами знаете.

ленивое вычисление

Это очень распространено в функциональном программировании, и это также часть, которую нужно очень хорошо понимать.В функциональном программировании много раз необходимо выполнять ленивые вычисления.Например, это распространено в Интернете 🌰:

// 我要做2+3、2+4的操作

// 传统写法
var a = 2;
var b = 3;
var c = 4;
a + b || a + c

// 函数式写法
var calc = a => b => a + b
var addA = calc(2)
addA(3) || addA(4)

Если резюмировать одним предложением:В случае выполнения разных действий, возможно, на основе одного и того же условия

никаких побочных эффектов

Как и ленивые вычисления, это также очень важная особенность функционального программирования.Код, написанный с использованием функционального программирования, не заботится об изменениях во внешней среде переменных.Он заботится только о передаваемых параметрах, и он не будет нацелен на изменение какой-либо внешней переменной. и, наконец, этоreturnВозвращаемый результат — это просто расчет для переданных параметров, вот пример 🌰:

// 非函数式
var a = 1;
function calc(){
    ++a
}
calc()

// 函数式
var a = 1;
function calc(num){
    return ++num
}
calc(a)

Если резюмировать одним предложением:Не позволяйте вашей функции влиять на внешние переменные

Не изменять состояние

На самом деле, основной смысл отсутствия побочных эффектов заключается в том, чтобы не изменять состояние, потому что ваша функция делает только то, что вы хотите сделать.

Если резюмировать одним предложением:Сто причин должны иметь следствие, вы передаете мне значение, а я дам вам возвращаемое значение.

Суммировать

Функциональное программирование и многое другоеjsЧасто будут использоваться характеристики, такие как функцияобъема такжецепочка прицелов,этот указатель, и упомянутое вышеЗакрытиеа такжеФункции высшего порядка, это те моменты, которые нужно очень хорошо понимать в функциональном программировании

Здесь главное для друзей, которые никогда не контактировали или не разбираются в функциональном программировании.Я вкратце расскажу о том, что такое функциональное программирование.Очень грубо, но основной смысл, наверное, уже высказано. Не понимаю, вы можете оставить сообщение Ответить, если что-то не так, вы можете оставить сообщение и указать на это

анализ случая

Вариант 1. Вычисление атрибутов — форматирование атрибутов

В повседневной работе результат, возвращаемый нам бэкендом, не обязательно является тем, что мы хотим.Например, в это время нам нужно сделатьa_bcПревратить в верблюжий кейсaBcменяется, если меньше, так сказать,ifПросто сделайте это, если есть много неясных ситуаций, но нам также нужно сделать подобные преобразования, что мы должны делать?

// 非函数式写法
if (str === 'a_bc') {
    str = 'a_Bc'
}

// 函数式写法
function strTransform(str) {
    return str => str.replace(/_[a-z]{1}/g, m => m.replace('_', '').toLocaleUpperCase())
}

Это очень удобно использовать таким образом, и его можно использовать в любое время.Многие друзья могут сказать, разве это не метод, который часто используется, это функциональная формула?

Будет ли это учитываться, зависит от ситуации.Если вы напрямую изменяете переданные параметры, это не считается; если вы возвращаете новое значение после выполнения вычисления через переданные параметры, то это учитывается, потому что вы не будете его изменять. исходные данные, поэтому побочных эффектов не будет

Вариант 2: функциональные компоненты — переключение вкладок

Вкладки делают функции часто используемые в нашей повседневной работе.Для вкладок нам нужно сделать "чистый" компонент:

Написание нефункционального программирования

<!-- vue -->
<template>
    <div v-for="(item, index) in arr" @click="switchTab($event, index)">
        {{item.name}}
    </div>
</template>
<script>
export {
    data: {
        arr:[]
    },
    mounted: fcuntion() {
        this.arr = ajaxResult;
        // ajaxResult 代表的是接口返回的结果
    },
    methods: {
        switchTab (e, index) {
            // 针对当前点击的处理
        }
    }
}
</script>

// react
class Tab extends Components{
    constructor () {
        super()
        this.arr = []
        this.switchTab.bind(this)
    },
    componentWillMount () {
        this.arr = ajaxResult
    },
    switchTab(index) {
        // 针对当前点击的处理
    },
    render () {
        var list = this.arr.map((item, index) => <div onClick={e => this.switchTab(e, index)}>{item.name}</div>)
        return (
            <div>
                {list}
            </div>
        )
    }
}

reactДавно не писал.Это может быть псевдокод.Смысл этих двух кодов очень распространенная вкладка.Для того,чтобы друзья мало разбирающиеся в функциональных формулах могли быстро понять о чем я,я написал код для двух фреймворков

Как писать функциональное программирование

<!-- vue -->
<template>
    <div v-for="(item, index) in arr" @click="callback($event, index)">
        {{item.name}}
    </div>
</template>
<script>
export {
    props: ['arr', 'callback']
}
</script>

// react
function tab ({arr, callback}) {
    return (
        <div>
            {arr.map((item, index) => <div onClick={e => callback(e, index)>{item.name}</div>)}
        </div>
    )
}

Вы обнаружите, что количество кода, написанного в функциональном программировании, будет намного меньше, На самом деле, в реальной ситуации количество кода не будет меньше, оно может быть больше, но не слишком много, но такой способ написания очень совместим с функциональным программированием.«чистый», без побочных эффектов, без изменения состояния

Внутри компонента он делает только две вещи: рендеринг и выполнение обратного вызова нажатия соответствующей кнопки, поэтому не имеет значения, где он используется, если он соответствует формату данных компонента, он может отображаться нормально.

Пример 3: Взаимодействие между компонентами — Parabolic

Для подобных функций задействованный здесь код более сложен, поэтому я не буду его писать, а напишу больше теории.

Прежде всего, мы должны подтвердить несколько характеристик этого спроса:

  • Каждая функция должна быть разделена на разные компоненты.
  • Функция отображения корзины неясна, но пока товар добавлен, его нужно бросить в корзину.
  • Угол параболы отличается из-за разных отображений корзины покупок.
  • Функции являются кросс-компонентами, мы не можем передать только одинclassилиidсудить, куда я собираюсь бросить, и не могу передатьclassилиidчтобы определить, собираюсь ли я начать бросать

Это три очень основных требования, поэтому мы будем использовать несколько возможностей функционального программирования:Функции, замыкания, функции высшего порядка, ленивое вычисление, отсутствие побочных эффектов

  • Для начала напишем функцию, которая получает запись, откуда начинать кидать эту точку
  • Получив позицию для броска, мы можем создать точку параболы, но неappendChildна страницу, простоcreateохватывать
  • Затем используйте функцию, чтобы определить направление вашей параболы.Здесь вы можете использовать формулу параболы для ее расчета, или вы можете использоватьcss3изanimation, я рекомендую использовать кривые Безье
  • Наконец, установите функцию, которая получает позицию, которую вы хотите передать.

Такая параболическая функция полностью независима без каких-либо зависимостей, она выполняет только свою собственную параболическую функцию, независимо от того, кто просил меня ее кинуть.

вопросы и ответы

В: Хорошо ли для функционального программирования часто вызывать функции?

отвечать: Его нельзя назвать хорошим или плохим, но подходит ли он для текущего бизнес-сценария. В некоторых случаях функциональное программирование не имеет побочных эффектов, и оно чистое, и фокус не повлияет на исходные данные. Гарантируется, что в процессе взаимного сотрудничества не повлияет на других из-за своей собственной функции

В: Что лучше — функциональное или императивное программирование?

отвечать: Как и в приведенном выше ответе, нет лучшего, есть только самое подходящее.От начального до среднего уровня у всех будет непонимание, то есть объектно-ориентированный метод письма очень хорош, очень мощен и проще использовать, чем ориентированный на процесс

На самом деле это очень серьезное недоразумение.Когда все поднимутся, то обнаружат, что на самом деле хорошее и плохое основано на сцене, и никто не осмеливается сказать, что лучше.Если мы хотим сделать специальная страница, используйте это времяreactилиvueНа самом деле это худший метод, а что если я инкапсулирую вкладку, то, что я пишу, настолько хорошо, что в этом нет необходимости

Позиционирование специальной страницы - это страница, которая быстро отображается пользователю. Мы хотим, чтобы она отображалась быстро. Если вы используете фреймворк, вам нужно пройти инициализацию фреймворка, загрузить ресурсы фреймворка, и логика инициализации очень мощных компонентов, которые вы инкапсулируете., на самом деле, в настоящее время, используя ориентированный на процесс, шаттл может быть лучшим решением

Конечно, некоторые люди скажут, что скорость сети сейчас настолько высока, что те времена ничтожны, но нельзя сказать, что среда некоторых людей не так хороша, как наша, и наша компания до сих пор используетios8А пользователи системы?

Суммировать

Я могу быть не так понятен, как некоторые статьи в Интернете о теории функционального программирования, потому что это не объяснение понятий функционального программирования.Мой друг, действительно быть гидом, пусть каждый действительно применяет функциональное программирование к проекту

В любом случае, если вы действительно хотите применить функциональное программирование к своему проекту, просто помните об особенностях функционального программирования, используйте их разумно и не пишите насильно функциональное программирование, как раздел вопросов и ответов.

Каждая хорошая модель имеет свое значение, и мы должны постараться понять, почему каждая модель делает это и каковы преимущества этого.

заключительные замечания

Спасибо за возможность увидеть это на одном дыхании, может быть, прыгнуть, чтобы увидеть это, это не главное, пока друзья, которые это читают, понимают это и обнаруживают, что действительно есть сцены, которые можно использовать в своих бизнес-сценариях. это значит что я написал эту статью она имеет ценность

Если есть какие-либо неточности в написании, или есть места, которые нужно исправить, пожалуйста, укажите это вовремя, и приветствуем руководство каждого большого парня.Вы указываете на мои недостатки, что является шагом в моем росте, спасибо ты

Напоследок позвольте сказать вам, я также сделал паблик аккаунт, и контент будет синхронизирован с Наггетсами.Конечно, он должен быть первым, кто обнаружит золото.Если вам интересно, вы можете обратить внимание на мой паблик учетная запись.

Категории