Чейнинг стилей а-ля jQuery с помощью Proxy

Библиотека jQuery предоставляет очень удобную возможность чейнинга методов для одного элемента:

$(selector)
    .css('color', '#fff')
    .data('mode', 'light')
    .fadeIn()

Ванильный DOM API по сравнению с этим выглядит очень громоздко, но мы можем прокачать его с помощью JavaScript Proxy.

Статья рассказывает, как работает Proxy - перехватывает обращения к методам и свойствам объекта - и как, используя эту функциональность, оптимизировать работу со стилями элемента.

style(selector)
    .color('#fff')
    .backgroundColor('#000')
    .opacity(1)

Вкратце

Проксируем доступ к объекту element.style, перехватываем все обращения к css-свойствам, делаем нужные операции со стилями и возвращаем новый Proxy.

Подробнее: https://tobiasahlin.com/blog/chaining-styles-with-proxy/

#javascript #proxy #advanced

13 прокси-ловушек

Proxy в JavaScript позволяет перехватывать основные операции с объектом (изменение и назначение свойств, перебор в цикле и т. д.)

В статье на демо-примерах разобраны 13 таких перехватчиков: https://prglb.ru/1zmkw

#javascript #proxy