Установка нескольких стилей элемента HTML с помощью стандартного JavaScript часто требует нескольких строк кода.
Однако мы можем сделать все это с помощью одной строки кода, если поместим наши стили объектов в прокси-сервер JavaScript.
В этой статье мы рассмотрим, как мы можем обернуть наш объект элемента в прокси, чтобы установить несколько стилей.
Простая установка нескольких стилей, заключая наш элемент в прокси
Чтобы обернуть наш объект HTML-элемента в прокси, мы можем написать:
const styleProxy = { get: (object, property) => { return (value) => { if (value) { object[property] = value; return new Proxy(object, styleProxy); } return object[property]; } } } const style = (selector) => { const element = document.querySelector(selector); return new Proxy(element.style, styleProxy); } style("div") .color("#fff") .backgroundColor("#000") .opacity("1");
Мы создаем объект styleProxy
, который имеет метод get
для возврата функции, которая принимает стиль value
.
Если мы передаем value
, мы устанавливаем его как одно из значений свойства object
.
Затем мы возвращаем прокси с object
и styleProxy
в качестве прокси.
В противном случае мы возвращаем объект.
Затем мы создаем style
, который получает элемент с заданным селектором с querySelector
и возвращает прокси со свойством объекта element.style
и styleProxy
.
Прокси-сервер позволяет нам получить значение, которое мы установили как значение свойства объекта, и изменить способ его установки.
В этом примере мы возвращаем функцию, которая позволяет нам установить свойство с функцией вместо самого объекта.
Следовательно, мы можем написать следующее, чтобы установить стили:
style("div") .color("#fff") .backgroundColor("#000") .opacity("1");
Мы вызываем color
, чтобы установить style.color
.
Мы вызываем backgroundColor
, чтобы установить style.backgroundColor
.
И мы вызываем opacity
, чтобы установить style.opacity
.
Заключение
Мы можем установить несколько стилей в одной строке кода, создав прокси из выбранного объекта HTML-элемента.
В прокси у нас есть геттер, который возвращает функцию, которая возвращает новый прокси для установки других стилей.