Как вы обходите клонированные шаблоны, теряя ссылки на элементы? - PullRequest
Новая
       38

Как вы обходите клонированные шаблоны, теряя ссылки на элементы?

0 голосов
/ 06 декабря 2018

Я заметил, что hyperHTML сохраняет ссылки, которые я делаю на элементы: 

let div = document.createElement("div");
div.textContent = "Before Update";
hyperHTML.bind(document.body)`static1 - ${div} - static2`;
div.textContent = "After Update";

Выше будет создана страница, которая говорит: 

static1 - After Update - static2

Насколько я понимаю, HyperHTML в конечном итоге клонирует HTML<tempate> элемент для отображения окончательного результата.Однако разве вы не теряете ссылки при клонировании HTML-шаблона (как, например, переменная "div" в приведенном выше примере)?

Следовательно, при первоначальном рендеринге HyperHTML каким-то образом заменяет клонированные элементы их оригиналами послеклонирование шаблона HTML?

Вот как я думаю, что это работает:

  1. Создание шаблона HTML исходного литерала шаблона при замене всех интерполяций комментариями.
  2. Клонированиеhtml-шаблон с оставленными комментариями.
  3. Создание элементов или фрагментов документа из каждой полученной первоначально интерполяции
  4. Замените каждый комментарий в клоне с его обработанной интерполяцией.

Это правильно?

1 Ответ

0 голосов
/ 09 декабря 2018

Я не уверен, в чем здесь вопрос, но есть страница документации и различные примеры , чтобы понять, как использовать hyperHTML, что не совсем такВы используете его.

На самом деле, здесь нет необходимости указывать какие-либо ссылки, потому что hyperHTML декларативен, поэтому вы можете написать: 

function update(text) {
  var render = hyperHTML.bind(document.body);
  render`static1 - <div>${text}</div> - static2`;
}

и вызывать update("any text") в любое время.вам нужно.

Вот как я думаю, что это работает ... Это правильно?

Нет, это не так.hyperHTML не клонирует ничего, как вы описали, он связывает один раз для каждого уникального тега шаблона очищенную версию с выводом и обнаруживает все интерполированные дыры в нем.

Часть библиотеки, которая делает это, называется domtagger , и отображение для литерала шаблона основано на стандартном факте, что они уникальны для области: 

const templates = [];
function addTemplate(template, value) {
  templates.push(template);
  return template.join(value);
}
function asTemplate(value) {
  return addTemplate`number ${value}!`;
}
asTemplate(1);
asTemplate(2);
asTemplate(Math.random());
templates[0] === templates[1]; // true
templates[1] === templates[2]; // true
// it is always the same template object!

После этого любой другой элемент, использующий один и тот же шаблон тега, будет иметьклон этого фрагмента с картой, чтобы найти дыры один раз, и некоторую сложную логику, чтобы избежать замены всего, что уже известно, будь то текст, атрибуты, события или любой другой тип узла.

hyperHTML никогда не удаляет комментарии,он использует их в качестве вывода, а затем использует domdiff , чтобы в конечном итоге обновлять узлы, связанные с этими выводами, всякий раз, когда необходимо что-либо обновить.

Domdiff - реализация алгоритма petit-dom без использования vDOMкоторый, в свою очередь, основан на разностном алгоритме Э. Майерса " O (ND) иЕго варианты" paper .

Всякий раз, когда у вас есть узлы DOM в отверстиях, hyperHTML понимает это и заполняет эти отверстия этими узлами.Если вы неоднократно проходите один и тот же узел, hyperHTML ничего не будет делать, потому что он полон алгоритмов и умных решений, описанных в документации, для достижения максимальной производительности из своей абстракции.

Все эти вещи игораздо больше, нормализовано для любого браузера, делает вес hyperHTML примерно 7 КБ после минимизации и сжатия, а также предлагает:

  • Пользовательские элементы, такие как перехваты через подключенных / отключенных слушателей
  • легкийкомпоненты через hyperHTML.Component
  • SVG-манипуляции в виде содержимого или по проводам
  • easy Определение пользовательских элементов с помощью класса HyperHTMLElement

В качестве сводки, если вам нужны эти упрощения и выне хочу изобретать велосипед, я советую вам попробовать его лучше.

Если вы просто пытаетесь понять, как оно работает, вам не нужно ничего предполагать, потому что проект полностью открыт.

Пока все, что я прочитал по вашим вопросам здесь итам, это то, что вы просто верите, чтобы понять, как это работает, поэтому я надеюсь, что в этом ответе я собрал все недостающие части, которые вам нужны, чтобы полностью понять это.

Вы хотите написать свой собственный lit / hyperHTMLбиблиотека?Не стесняйтесь использовать domtagger или библиотеку domdiff тоже, немногие уже делают то же самое.

...