Ни для кого не секрет, что языки программирования будут реализовывать функции других языков программирования, когда это разумное решение проблемы (я только что слышал, как вы сказали async / await?) Или если эта функция действительно полезна и в целом приятна иметь.
Вот почему сегодня мы поговорим о декораторах, о том, как они вписываются в JavaScript, и рассмотрим простой пример.

В настоящее время декораторы находятся на стадии 2, что означает, что они еще не в JavaScript, но, вероятно, появятся в будущем.

Хотя декораторы существуют не только в Python, мы рассмотрим их определения и объяснения, поскольку декораторы JavaScript (вероятно) будут очень похожи на декораторы Python. (Также помогает то, что я большой поклонник Python и считаю, что это самый лучший язык программирования после JavaScript).

Что такое паттерн-декоратор?

В объектно-ориентированном программировании шаблон декоратора (также известный как Wrapper, альтернативное именование, совместно используемое с шаблоном адаптера) представляет собой шаблон проектирования, который позволяет добавлять поведение к отдельному объекту статически или динамически. , не влияя на поведение других объектов того же класса. Шаблон декоратора часто бывает полезен для соблюдения принципа единой ответственности, поскольку он позволяет разделить функциональность между классами с уникальными проблемами.
Определение взято из Википедии. (Ссылка)

Так что же Python говорит о декораторах?

Декоратор - это функция, которая принимает другую функцию и расширяет ее поведение без ее явного изменения.
Определение взято из Primer on Python Decorators. (Ссылка)

Суть этого

Декораторы берут одну штуку и улучшают ее, добавляя логику из другой штуки.

Извините за научную терминологию, иногда вы просто не можете ее использовать ...

Вот как выглядят декораторы, написанные на Python:
Пример взят из Википедии. (Ссылка)

def viking_chorus(myfunc):
    def inner_func(*args, **kwargs):
        for i in range(8):
            myfunc(*args, **kwargs)
    return inner_func
@viking_chorus
def menu_item():
    print("spam")

Не думайте слишком много о коде, если вы не знакомы с Python. Единственная интересная часть для нас - это «@viking_chorus»
Приведенный выше код переводится как:

def menu_item():
    print("spam")
menu_item = viking_chorus(menu_item)

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

Давайте посмотрим на действительно простой пример декоратора JavaScript, который вы, скорее всего, найдете плавающим в Интернете, - декоратор члена класса, который изменяет свойство класса.

function readonly(target, name, descriptor) {
  descriptor.writable = false;
  return descriptor;
}
class Job {
  @readonly
  title() { return 'CEO' }
}

Приведенный выше код изменяет свойство «title» так, чтобы его нельзя было переназначить, делая его «только для чтения».

Посмотрите, как я назвал декоратор «только для чтения», и он изменяет свойства, чтобы вы могли их только читать? Вот и годы опыта разработки программного обеспечения, детка!

Вам, вероятно, интересно, что это за аргументы функции, поэтому давайте рассмотрим их:

target - класс, что свойство является частью
name - имени свойства, декоратор изменяет
дескриптор - дескриптор свойства. Подумайте: объект передан в Object.defineProperty

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

В этом весь смысл декораторов.

Угловой 2

Я упоминаю здесь Angular 2, потому что Angular 2 использует Typescript, Typescript поддерживает декораторы, и они активно используются в Angular 2.
Я уже некоторое время работаю над проектом Angular 2 и как бы перестал замечать декораторы, они просто становятся обыденными, но когда вы снова начинаете замечать их, вы видите, насколько лучше код благодаря им.

Давайте посмотрим, как вы создаете класс компонента и украшаете его в Angular 2.

@Component({
selector: 'example',
templateUrl: './example.component.html',
styleUrls: ['./example.component.css']
})
export class ExampleComponent { ... }

Это действительно отличный способ добавления метаданных в класс компонента.
'Selector' - это HTML-тег, который angular будет использовать для рендеринга этого компонента (‹example› ‹/example›)
'templateUrl' - это HTML-код. для этого компонента
styleUrls - это список стилей CSS, которые компонент будет использовать

«@Component» - отличный пример совместного использования общих функций между классами.
То, что было бы головной болью без декораторов, легко и просто обрабатывается с помощью декораторов. Отлично!

Реагировать

React - главный кандидат на использование декораторов, поскольку его компоненты более высокого порядка - это функции высшего порядка, возвращающие компоненты.
Фактически, декораторы настолько хорошо подходят для React, что response-dnd, самый популярный метод перетаскивания и drop, уже использует их! ( "Ссылка" )

Забрать

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

Привет!
Если вам понравилась эта статья, на моем личном сайте bojangvozderac.com будет больше интересных и полезных статей.