Хотелки

• Расширение кода сторонних библиотек
• Множественное наследование
• Компонентный подход
• Метапрограммирование

Как пройти в библиотеку?

var fibonacci = _.memoize(function(n) {
    return n < 2 ? n: fibonacci(n - 1) + fibonacci(n - 2);
});

var throttled = _.throttle(updatePosition, 100);
window.addEventListener('scroll', throttled);

var abc = function(a, b, c) {
    return [a, b, c];
};
var curried = _.curry(abc);
curried(1)(2)(3); // => [1, 2, 3]

_.delay(function(text) {
    console.log(text);
}, 1000, 'later');

var handler = {
    get: function(target, name) {
        return (name in target) ? target[name] : 42;
    }
};
var p = new Proxy({}, handler);
p.a = 1;
console.log(p.a, p.b); // 1, 42

C#: атрибуты

public class Person
{
    [Display(Name = "Имя")]
    [Required()]
    public string FirstName { get; set; }

    [Display(Name = "Отчество")]
    public string Patronym { get; set; }
}

Java: аннотации

@Service("testBean")
@Scope("singleton")
public class TestBean {
    private String data = "I am a singleton!!";

    public String getData() {
        return data;
    }
}

Python: декораторы

def makebold(fn):
    def wrapped():
        return "<b>" + fn() + "</b>"
    return wrapped

@makebold
def hello():
    return "hello world"

Спецификации

• wycats / javascript-decorators — Stage 0
• tc39 / proposal-decorators — Stage 2

Stage 0

wycats / javascript-decorators

function decorator(...args) {
    return function(target, name, descriptor) {
        // do something
        return descriptor;
    }
}

Object.defineProperty()

Object.defineProperty(target, name, {
    enumerable: true,
    configurable: true,
    writable: true,
    value: 42,
    // get: function() {},
    // set: function(value) {}
});

const obj = {
    get getter() { return 42; },
    property: true,
    method: function() {
        return "I am the method";
    }
};

['getter', 'property', 'method'].forEach(p => {
    console.log(
        Object.getOwnPropertyDescriptor(obj, p)
    );
});

Виды декораторов

@classDecorator
class MyClass {
    @propertyDecorator
    property = 42

    @methodDecorator
    someMethod() {}
}

Декораторы

• указывают на функции
• возвращают дескрипторы
• вызываются сверху вниз ↓
• применяются снизу вверх ↑

/* https://jsfiddle.net/dark_mefody/gL1j34sw/9/ */
function decorator(id) {
    console.log(id + ' declaration');
    return function(target, name, descriptor) {
        console.log(id + ' calling');
    };
}

@decorator('1st')
@decorator('2nd')
class MyClass {
    constructor() {
        console.log('new object created');
    }
}

const c = new MyClass();

Stage 2

tc39 / proposal-decorators

{
    kind: "method" or "field",
    key: String, Symbol or Private Name,
    placement: "static", "prototype" or "own",
    descriptor: Property Descriptor
}

<form className='new-item' onSubmit={this.addItem.bind(this)}>

class AddNewItemComponent extends React.Component {
    @autobind
    addItem(event) { ... }
    render() {
        return ( ...
            <form className='new-item' onSubmit={this.addItem}>
        ... );
    }
}

Проверка доступа

function checkPermission(target, name, descriptor) {
    const oldValue = descriptor.value;
    const newDescriptor = {
        enumerable: false,
        configurable: false,
        get: function() {
            return isAdmin() ? oldValue : (() => {});
        },
        set: function() {}
    };
    return newDescriptor;
}

Fluent interface

function fluent(target, name, descriptor) {
    const fn = descriptor.value;
    descriptor.value = function(...args) {
        fn.apply(target, args);
        return target;
    }
}

class Person {
    @fluent
    setName(name) { this.name = name; }
    sayName() { console.log(this.name); }
}

const p = new Person();
p.setName('Bruce').sayName();

Angular-like component demo

tsconfig.json

{
    "compilerOptions": {
        "experimentalDecorators": true,
        "emitDecoratorMetadata": true
    }
}

babel-plugin-transform-decorators-legacy

.babelrc

npm install --save-dev babel-plugin-transform-decorators-legacy

{
    "presets": ["env"],
    "plugins": ["transform-decorators-legacy"]
}

core-decorators

• Для свойств и методов:
  • @readonly
  • @nonconfigurable
  • @decorate
  • @extendDescriptor
• Для свойств:
  • @nonenumerable
  • @lazyInitialize
• Для классов:
  • @autobind
• Для методов:
  • @autobind
  • @deprecate
  • @suppressWarnings
  • @enumerable
  • @override
  • @time
  • @profile

import { autobind } from 'core-decorators';

class Person {
    @autobind
    getPerson() {
        return this;
    }
}

const person = new Person();
const { getPerson } = person;
getPerson() === person; // true

lodash-decorators

import { Debounce, Memoize } from 'lodash-decorators';
class Person {
    constructor(firstName, lastName) {
        this.firstName = firstName;
        this.lastName = lastName;
    }
    @Debounce(100)
    save(date) {
        return this.httpService.post(data);
    }
    @Memoize(item => item.id)
    doSomeHeavyProcessing(arg1, arg2) {}
}

import { Mixin } from 'lodash-decorators';
const MyOtherApi = {
    method() {
        // Do something cool
    }
};

@Mixin(MyOtherApi)
class Person {}

Person.prototype.method === MyOtherApi.method; // => true

JS Object Explorer — Sarah Drasner

Итого

1. Думайте о других

2. Используйте фабричный метод для гибкости

3. Разбивайте на мелкие компоненты

4. Следите за развитием стандарта

Материалы

• Exploring EcmaScript Decorators — Addy Osmani
• JavaScript Decorators: What They Are and When to Use Them — Graham Cox
• How I Fell in Love with JS Decorators — Ragularuban Nanthagopal

Видео

• JavaScript Decorators — Andrew Burgess

Спасибо за внимание!

mefody.github.io/talks/js-decorators/
@dark_mefody
n.a.dubko@gmail.com