🗒 Поговорим о document.currentScript

Есть интересное свойство у объекта document - currentScript, которое позволяет получить DOM-элемент , который в данный момент выполняется, и обратиться к его атрибутам.

<tg-emoji emoji-id="5213181173026533794">⚠️</tg-emoji>Но есть нюанс: это свойство не работает внутри модулей (<script type="module">), и в этом случае document.currentScript будет равен null.

document.currentScript идеально подходит для <i>embed-сценариев</i>, где:

<tg-emoji emoji-id="5316999259944398704">☑️</tg-emoji> конфиг хранится в атрибутах (через атрибуты data-*) <tg-emoji emoji-id="5316999259944398704">☑️</tg-emoji> скрипт нужно быстро вставить без лишнего кода <tg-emoji emoji-id="5316999259944398704">☑️</tg-emoji> важна самодостаточность и изоляция

Ну и рассмотрим примеры использования:

1️⃣ Подключение внешних виджетов / embeds

<code class="language-js"><script src="my-widget.js" data-theme="dark" data-user-id="123">

//my-widget.js const script = document.currentScript; const { theme, userId } = script.dataset;

initWidget({ theme, userId });

👆Получаем данные из атррибутов и передаем их, например, для инициализации виджита

2️⃣ Для аналитики и трекинга

`//tracker.js const { key } = document.currentScript.dataset; analytics.init(key);

3️⃣ Собственные виджеты / плагины

`//subscribe.js const { dataset } = document.currentScript; initSubscribeButton({ target: document.querySelector(dataset.target), style: dataset.style });

✍️Как итог

🔵Безопасно передаем параметры в скрипт без загрязнения глобальной области видимости 🔵Делает скрипты более переносимыми и самодостаточным 🔵Улучшает читаемость и поддержку``