文件从头开始读函数_这是您可以从头开始编写的一些函数修饰符

文件从头开始读函数

Discover Functional JavaScript was named one of the best new Functional Programming books by BookAuthority!

“发现功能JavaScript”被BookAuthority评为最佳新功能编程书籍之一 ！

A function decorator is a higher-order function that takes one function as an argument and returns another function, and the returned function is a variation of the argument function — Javascript Allongé

函数装饰器是一个高阶函数，它将一个函数作为参数并返回另一个函数，返回的函数是参数函数的变体— JavascriptAllongé

Let’s write some common function decorators found in libraries like underscore.js, lodash.js or ramda.js.

让我们写一些在underscore.js ， lodash.js或ramda.js之类的库中找到的常用函数修饰符。

一旦() (once())

• once(fn): creates a version of the function that executes only once. It’s useful for an initialization function, where we want to make sure it runs only once, no matter how many times it is called from different places.

  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() is a function that returns another function. The returned function runOnce() is a closure. It’s also important to note how the original function was called — by passing in the current value of this and all the arguments : fn.apply(this, arguments) .

once()是一个返回另一个函数的函数。 返回的函数runOnce()是一个closure 。 同样重要的是要注意原始函数是如何调用的—通过传入this和所有arguments的当前值： fn.apply(this, arguments) 。

If you want to understand closures better, take a look at Why you should give the Closure function another chance.

如果您想更好地理解闭包，请查看为什么您应该给闭包函数另一个机会 。

后() (after())

• after(count, fn): creates a version of the function that executes only after a number of calls. It’s useful, for example, when we want to make sure the function runs only after all the asynchronous tasks have finished.

  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);

Note how I’m using after() to build a new function logResultAfter2Calls() that will execute the original code of logResult() only after the second call.

注意我如何使用after()建立一个新的功能logResultAfter2Calls()将执行的原代码logResult()第二个电话后只。

风门() (throttle())

• throttle(fn, wait): creates a version of the function that, when invoked repeatedly, will call the original function once per every wait milliseconds. It’s useful for limiting events that occur faster.

  valve(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);

In this example, moving the mouse will generate a lot of mousemove events, but the call of the original function process() will just happen once per second.

在此示例中，移动鼠标将生成许多mousemove事件，但是原始函数process()的调用仅每秒发生一次。

Discover Functional JavaScript was named one of the best new Functional Programming books by BookAuthority!

发现功能JavaScript被称为 BookAuthority最好的新功能编程书籍 ！

For more on applying functional programming techniques in React take a look at Functional React.

有关在React中应用函数式编程技术的更多信息，请查看 Functional React 。

Learn functional React, in a project-based way, with Functional Architecture with React and Redux.

通过带有React和Redux的功能架构 ，以基于项目的方式学习功能性React 。

翻译自: https://www.freecodecamp.org/news/here-are-a-few-function-decorators-you-can-write-from-scratch-488549fe8f86/

文件从头开始读函数