带有返回值的装饰器

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

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

Method decorators are a tool for reusing common logic. They are complementary to Object Oriented Programming. Decorators encapsulate responsibility shared by different objects.

方法装饰器是用于重用通用逻辑的工具。 它们是面向对象编程的补充。 装饰器封装了不同对象共享的责任。

Consider the following code:

考虑以下代码 ：

function TodoStore(currentUser){let todos = [];function add(todo){let start = Date.now();if(currentUser.isAuthenticated()){todos.push(todo);} else {throw "Not authorized to perform this operation";}let duration = Date.now() - start;console.log("add() duration : " + duration);}return Object.freeze({add});
}

The intent of the add() method is to add new to-dos to the internal state. Beside that, the method needs to check the user authorization and log the duration of execution. These two things are secondary concerns and can actually repeat in other methods.

add()方法的目的是向内部状态添加新的待办事项。 除此之外，该方法还需要检查用户授权并记录执行时间。 这两件事是次要问题，实际上可以在其他方法中重复。

Imagine we can encapsulate these secondary responsibilities in functions. Then we can write the code in the following way:

假设我们可以将这些次要责任封装在功能中。 然后我们可以通过以下方式编写代码：

function TodoStore(){let todos = [];function add(todo){todos.push(todo);}return Object.freeze({add:compose(logDuration,authorize)(add) });
}

Now the add() method just adds the todo to the list. The other responsibilities are implemented by decorating the method.

现在， add()方法仅将todo添加到列表中。 其他职责通过装饰方法来实现。

logDuration() and authorize() are decorators.

logDuration()和authorize()是装饰器。

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.

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

Reginald Braithwaite in Javascript Allongé

Reginald Braithwaite使用JavascriptAllongé

日志持续时间 (Log Duration)

A common scenario is logging the duration of a method call. The following decorator logs the duration of a synchronous call.

一种常见的情况是记录方法调用的持续时间。 以下装饰器记录同步呼叫的持续时间。

function logDuration(fn){return function decorator(...args){let start = Date.now();let result = fn.apply(this, args);let duration = Date.now() - start;console.log(fn.name + "() duration : " + duration);return result;}
}

Notice how the original function was called — by passing in the current value of this and all arguments : fn.apply(this, args) .

注意原始函数是如何被调用的—通过传入this和所有参数的当前值： fn.apply(this, args) 。

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 。

Follow on Twitter

在Twitter上关注

翻译自: https://www.freecodecamp.org/news/how-to-use-decorators-with-factory-functions-373fb972b6d4/

带有返回值的装饰器