Вот несколько декораторов функций, которые можно написать с нуля

vot neskolko dekoratorov funkczij kotorye mozhno napisat s nulya

Откройте для себя функциональный JavaScript был назван одним из лучшие новые книги по функциональному программированию от BookAuthority!

А декоратор функции это функция высшего порядка, которая принимает одну функцию в качестве аргумента и возвращает другую функцию, а возвращенная функция является вариантом функции аргумента — Javascript Allongé

Давайте напишем несколько типовых декораторов функций, которые можно найти в библиотеках, таких как underscore.js, lodash.js или ramda.js.

раз()

  • once(fn): создает версию функции, которая выполняется только один раз. Это полезно для функции инициализации, когда мы хотим убедиться, что она выполняется всего один раз, независимо от того, сколько раз она вызывается из разных мест.
function once(fn){
  let returnValue;
  let canRun = true;
  return function runOnce(){
      if(canRun) {
          returnValue = fn.apply(this, arguments);
          canRun = false;
      }
      return returnValue;
  }
}

var processonce = once(process);
processonce(); //process
processonce(); //

once() это функция, возвращающая другую функцию. Возвращенная функция runOnce() это закрытие. Также важно обратить внимание на то, как вызвана оригинальная функция — передав текущее значение. this и все arguments : fn.apply(this, arguments) .

Если вы хотите лучше понять закрытие, посмотрите на Почему вы должны дать функции Closure еще один шанс.

после ()

  • after(count, fn): создает версию функции, выполняемую только после нескольких вызовов. Это полезно, например, когда мы хотим убедиться, что функция запускается только после всех асинхронных задач.
function after(count, fn){
   let runCount = 0;
   return function runAfter(){
      runCount = runCount + 1;
      if (runCount >= count) {
         return fn.apply(this, arguments);        
      }
   }
}

function logResult() { console.log("calls have finished"); }

let logResultAfter2Calls = after(2, logResult);
setTimeout(function logFirstCall() { 
      console.log("1st call has finished"); 
      logResultAfter2Calls(); 
}, 3000);

setTimeout(function logSecondCall() { 
      console.log("2nd call has finished"); 
      logResultAfter2Calls(); 
}, 4000);

Обратите внимание, как я использую after() создать новую функцию logResultAfter2Calls() который выполнит исходный код logResult() только после второго звонка.

дроссель()

  • throttle(fn, wait): создает версию функции, которая во время повторного вызова будет вызывать исходящую функцию раз в каждые wait миллисекунд. Это полезно для ограничения происходящих событий.
function throttle(fn, interval) {
    let lastTime;
    return function throttled() {
        let timeSinceLastExecution = Date.now() - lastTime;
        if(!lastTime || (timeSinceLastExecution >= interval)) {
            fn.apply(this, arguments);
            lastTime = Date.now();
        }
    };
}

let throttledProcess = throttle(process, 1000);
$(window).mousemove(throttledProcess);

В этом примере перемещение мыши генерирует много mousemove события, но вызов исходной функции process() будет происходить раз в секунду.

Откройте для себя функциональный JavaScript был назван одним из лучшие новые книги по функциональному программированию от BookAuthority!

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

учиться функциональный Reactпроектно, с Функциональная архитектура с React и Redux.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *