Часть 1
Так как значение отдельной координаты здесь не является объектом/свойством DOM, прямые манипуляции с этим значением в JS невозможны - вместо этого мы манипулируем атрибутом, изменяя его строковое значение.
И, существует...
Типовой подход - реактивные библиотеки, фреймворки
(только критика, без примеров)
Сейчас уже мало кто пишет голый JS для решения подобных задач: распространена практика использования реактивных библиотек, чтобы упростить работу - и писать меньше кода, тем самым облегчая его поддержку.
Ну, так это должно работать...
Посмотрим как это выглядит для начинающего:
Для начала, нужно выбранную библиотеку подключить. Или две библиотеки, в случае реакта. Теперь страничка грузится чуть дольше. Хм, ну ладно, вроде мелочь - можно потерпеть ради преимуществ.
Далее надо написать бойлерплейт-код, в который поместим ту логику связи с DOM, которую мы хотим. Тут уже возникает смутное ощущение, что... а, неважно. Напишем. Мыжпрограммисты, в конце концов.
Но как-то это не очень удобно, в разметке набирать. Перенесем код в отдельный модуль - и бандлером будем все вместе собирать. Вебпак, то что нужно! Поглядим как его настраив... оооо... нет, НЕТ, мы не будем его настраивать. Все ж работает, да? Вот и хорошо, вот и славно.
Чтобы быстрее оправиться от психической травмы нанесенной вебпаком, изучим и применим TS - не надо будет сильно думать о логике выражений с типкастом. В самом деле, пусть машина думает, а нам и бойлерплейтов хватает... ведь мы уже по уши в фреймворке.
Вышло так, что в попытке упростить свою работу, мы ее усложняем.
Инструменты, призванные помочь сконцентрироваться на программировании, уводят все дальше от программирования: мы npm install половину задач, и зависимы от внутренней магии готовых решений.
Экономия времени и совершенствование библиотек это в целом хорошо, если бы разработчики не забывали язык(!) и не теряли гибкость ума, попадая в ловушку бездумного потребления.
Многобукв, но зачем? Просто этим подвожу к альтернативному варианту, который вдохновляет лично меня. К варианту, который хотя бы частично вернет мотивацию вникать, понимать, развивать фундаментальные навыки - и к отказу от "жизни в фреймворке", в пользу реализации реактивности на уровне языка.
Этот вариант существует больше на уровне идеи, но есть несколько первых попыток ее воплотить. Здесь упомяну только одну молодую реализацию, а именно...
Svelte
<svg height="25" width="50" on:click={toggle}>
<path d="M0 0 L25 {$midY} L50 0" style="stroke:green; stroke-width:2; fill:none;" />
</svg>
<script>
import { tweened } from 'svelte/motion';
import { cubicOut } from 'svelte/easing';
const midY = tweened(0, { duration: 250, easing: cubicOut });
const toggle = () => midY.set($midY ? 0 : 25);
</script>
🔷 Попробовать в REPL
Здесь мы связываем значение в атрибуте с переменной midY
, которая плавно (необязательный бонус) меняет значение в функции toggle
.
Код выглядит изящно, работает быстро, и не будет утяжелять страницу.
А главное - Svelte не очередной фреймворк, это транслятор (компилятор). Его синтаксис переводится в стандартный JavaScript, который можно изучить и понять, если захочется.
То есть, это тоже магия, но она значительно ближе к разработчику. И хотя бандлер по-прежнему требуется (как минимум для трансляции), все же сделан большой шаг в идеологии реактивности, и в избавлении от бойлерплейтов - пишем только логику.
Данный пример очень прост, а вся мощь реактивного программирования раскрывается только в более сложных задачах (как многие из нас уже знают, применяя например RxJS к данным и событиям).
Но и такие вот маленькие задачи по-прежнему выигрывают: в читаемости кода, а также в скорости и весе, по сравнению с React и Vue.
Можно ли использовать Svelte в продакшене - пока что нет: технология очень вкусная, но местами еще не просушена, и экосистема только зарождается (до третьей версии проект был мало кому известен).
Стоит ли ознакомиться и держать руку на пульсе - определенно да. Если даже Svelte будет незаслуженно брошен сообществом, схожие принципы используются в проекте Stencil (от Google).
Ответ получился рекламным, поэтому возможные минусы и тревоги будут встречены с пониманием.