<divelopers>: “HTML Components: Componentizing Web Applications Попалась мне интересн…”

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 проглядывается. Более того, нечто отдалённо похожее на старый синтаксис, но на новый лад сейчас проектируется в рамках Declarative Custom Elements.

#html #js