Как упаковать или импортировать HTML-шаблоны без HTML-импорта - PullRequest
Новая
       73

Как упаковать или импортировать HTML-шаблоны без HTML-импорта

0 голосов
/ 13 октября 2018

Поскольку Html-Imports теперь не поддерживается в Chrome (https://www.chromestatus.com/feature/5144752345317376) и будет удален, мне интересно, каковы альтернативы.

В настоящее время я использую Html-Imports для импорта Html-шаблоновПока я вижу только две альтернативы:

  • Объединение всех HTML-файлов в один файл. Это также уменьшило бы время загрузки в производство, но это уменьшило бы инкапсуляцию и модульность.пакет, который будет выполнять эту работу путем обхода HTML-Import-Statements в отдельных HTML-файлах, но это будет означать, что HTML-Imports остаются в моем коде, даже если они не будут поддерживаться никакими браузерами в будущем.
  • Сборка какого-либо загрузчика модулей с использованием XHttpRequests и объединение шаблонов в один HTML-файл во время выполнения. Это сохранит инкапсуляцию и модульность, но это плохо для меня пахнет, поскольку я в основном пересобираю import-Statements самостоятельно.

Есть ли новый ванильный способ импорта HTML-шаблонов? («Ванильным»Я имею в виду способ без каких-либо дополнительных инструментов, таких как прекомпилятор или пакет)

1 Ответ

0 голосов
/ 01 февраля 2019

Устаревание HTML Imports существенно изменило порядок загрузки ресурсов.Пользовательские элементы, по сути, стали в первую очередь сценариями, а не шаблонами.Если вашему элементу нужен шаблон, загрузите его из скрипта.Если нет, просто иди на работу.Честно говоря, хотя я был устойчив к этому в течение первых нескольких недель, я полюбил это.И получается, что загрузка внешних ресурсов, таких как шаблоны, не так уж и плоха.

Вот простой код, который будет загружать шаблон HTML из внешнего файла:

с использованием async /await: 

    async function getTemplate(filepath) {
        let response = await fetch(filepath);
        let txt = response.text();

        let html =  new DOMParser().parseFromString(txt, 'text/html');
        return html.querySelector('head > template');
    }

На основе обещания: 

    function getTemplate(filepath) {
        return fetch(filepath)
            .then(response => {
                let txt = response.text();
                let html = new DOMParser().parseFromString(txt, 'text/html');

                return html.querySelector('template');
            });
    }

Оба могут быть вызваны с обоими из следующих действий:

async / await: 

    let tpl = await getTemplate('path/to/template.html');

Обещания: 

    getTemplate('path/to/template.html')
        .then(function doSomething(tpl) {
            // Put your code here...
        });

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

Тяжелая работа - это просто переворот в порядке, и даже это не очень сложно, если вы не используете тысячи компонентов.Вероятно, это может быть автоматизировано с очень небольшой работой.

...