799просмотров
71.3%от подписчиков
30 января 2026 г.
Score: 879
HTML Components: Componentizing Web Applications Попалась мне интересная заметка W3C, которая хорошо подойдёт для нерегулярной рубрики «веб-археология». Называется она «HTML Components Componentizing Web Applications» и датируется аж 1998 годом. Как известно, концепция веб-компонентов прорабатывалась в конце нулевых и была публично представлена Алексом Расселом на конференции Fronteers в 2011 году. Однако сама идея «компонентизации» HTML появилась гораздо раньше. Команда из Microsoft подметила, что HTML со скриптами сильно разрастается при разработке веб-приложений и становится сложно формализовать логику и повторно использовать HTML. Была предложено концепция HTML Components (HTC). Идея была в том, чтобы предоставить синтаксис для описания компонента и его свойств, методов, событий и логики для дальнейшего применения на разных страницах. Вот как это примерно выглядело (помните, 1998 год): <HTML xmlns:PUBLIC="urn:HTMLComponent">
<PUBLIC:METHOD NAME="start"/>
<PUBLIC:METHOD NAME="stop"/>
<PUBLIC:PROPERTY NAME="direction" GET="getDir" SET="setDir"/>
<PUBLIC:EVENT NAME="onFlyFinished"/>
<PUBLIC:ATTACH EVENT="onclick" HANDLER="onClick"/> <SCRIPT LANGUAGE="ECMAScript">
var direction = 0;
var x = 0;
var y = 0;
var xScaler = 0;
var yScaler = 0;
var bFlying = false;
var timer; function start() { switch (direction) { case 0: x = -100; xScaler = 5; y = 0; yScaler = 0; break; case 1: x = 0; xScaler = 0; y = -100; yScaler = 5; break; case 0: x = 100; xScaler = -5; y = 0; yScaler = 0; break; default: x = 0; xScaler = 0; y = 100; yScaler = -5; break; } bFlying = true; element.style.position = "relative"; tick();
} function stop() { if (bFlying) { window.clearTimeout(timer); element.style.left = "0"; element.style.top = "0"; bFlying = false; var eventElem = document.getElementsByTagname( "public:event" )[0]; var oEvent = createEventObject(); eventElem.fire(oEvent); }
} function setDir(dir) { if (dir == "left") direction = 0; else if (dir == "top") direction = 1; else if (dir == "right") direction = 2; else direction = 3;
} function getDir() { switch (direction) { case 0: return "left"; break; case 1: return "top"; break; case 0: return "right"; break; default: return "bottom"; break; }
} function tick() { element.style.left = x; element.style.top = y; x += xScaler; y += yScaler; if (x == 0 && y == 0) stop(); else timer = window.setTimeout("tick()", 100);
} function onClick() { alert("x is '" + x + "%', y is '" + y + "%'.");
}
</SCRIPT> Этот код определяет компонент с методами start и stop, параметром direction, событием onFlyFinished и обработчиком события onclick, по которому вызывается метод onClick. Вся логика и методы описаны в <SCRIPT>. Затем этот файл определения компонента должен был подключаться к конкретному элементу на странице через CSS-селектор и свойство behavior. После этого у элемента появлялись все указанные свойства и методы. <HTML>
<HEAD> <STYLE> #flier { behavior: url(fly.htc); } </STYLE>
</HEAD>
<BODY> <H1 ID=flier>Flying titles!</H1> <BUTTON onclick="document.getElementsByTagname('H1')[0].stop();"> Stop </BUTTON> <SCRIPT> var flyingElem = document.getElementsByTagname( "H1" )[0]; flyingElem.onFlyFinished = "alert('finished flying!');" flyingElem.direction = "left"; flyingElem.start(); </SCRIPT>
</BODY>
</HTML> Вот такой прообраз веб-компонентов из конца 90-х. Сегодня компонент определяется в JS, подключается через <script>, поведение добавляется по имени элемента, а свойства, методы и события объединены в класс. Если отбросить детали синтаксиса, то некое сходство с современным Custom Elements API проглядывается. Более того, нечто