Как поделиться заголовком, который является HTML / CSS / JS? - PullRequest
0 голосов
/ 16 мая 2018

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

Этот универсальный заголовок также будет содержать некоторый поискфункциональность, которая слегка относится к моему вопросу.Проще говоря, он будет содержать JavaScript для изменения атрибута action в его элементе <form>, в зависимости от выпадающего списка, а также отправки формы.

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

Заголовок должен будет хорошо интегрироваться с WordPress (не проблема), но также и с AngularJS, в наших обсуждениях немного менее определенноэто будет возможно.Таким образом, «слегка релевантная» часть функции поиска.

Одним из решений, о которых мы говорили, было сделать это в HTML, как этот ответ , но я всегда был немного более пугливымо запросе необработанного HTML через HTTP и просто выгрузке его на страницу, но, возможно, это правильный путь, а может и нет?Так как мы не были уверены, мы подумали о JIRA Issue Collector , где они в основном транслируют JavaScript своему клиенту, который затем создает кнопку отслеживания проблем, закрепленную на боковой стороне страницы, имеющей некоторый HTML, CSS,и JS в этом.Затем пользователь может нажать эту кнопку, чтобы открыть форму, готовую для отправки.Это может быть чрезмерным упрощением, но в основном их фрагмент JS упаковывает HTML / CSS / JS и отправляет данные на их сервер.

В этом направлении мы хотели бы пойти с этим: наличие одного файла, содержащего всенам нужно.Однако мне интересно несколько вещей:

  • Какие есть шаблоны для работы со "флэш" заголовка? Так как он AJAXed при загрузке страницы, заголовок будетпропустить, вдруг оказаться там, как вы можете справиться с этой проблемой юзабилити?Я думал как область Скелета, где должен быть заголовок, затем заменим его на JavaScript, но я не знаю, банально это или нет.
  • Какой стандартный способ связать создание HTML, CSS и некоторых функций JavaScript, содержащихся внутри одного файла (например, файла JS), или лучше иметь файл HTML, связанный с JS и таблицей стилей? Я просто не уверено комплектации.Мы не будем использовать Angular или React для этого проекта, но у меня есть кое-какое знакомство с Webpack, которое, похоже, может сработать.Даже если этот проект не будет использовать Angular или React, ему все равно потребуется интеграция с другими фреймворками.
  • Одна вещь, о которой я думаю, - это возможность разбить HTML-код на отдельный HTTP-запрос и получитьJavaScript и стили объединены в другом HTTP-запросе - почти как веб-компонент.Другими словами, мы можем запросить HTML и CSS / JS параллельно, а когда он вернется, просто разбить его вместе в пользовательском интерфейсе. О чем опасно это делать, или о каких вещах нужно думать, когда вы делаете это таким образом?
  • Что было бы хорошим способом интегрировать это с AngularJS? Поскольку этот заголовок будет содержать функции поиска, нам нужен какой-то способ трансляции (на AngularJS), когда кто-то отправляет запрос, и что это за запрос, который он отправил.

Первоначально для последнегоВыше я думал о том, чтобы прикрепить его к window объекту.Затем создайте пользовательский обработчик событий в JavaScript - но как вы это сделаете?Может быть, приведенный ниже псевдокод не совсем понятен, но именно поэтому я задаю вопрос:

/// inside the SearchController in AngularJS
$scope.defaultRealm = 'products';

/// to select default realm
document.when('angularJSLoads', function () {
    document.getElementById('universial-header').find('.dropdown', function () {
        // put actions to select $scope.defaultRealm in the dropdown options.
    })
})

/// to search in own defaultRealm
document.querySelector('.dropdown').onEvent('headerSearch', function (e) {
    e.preventDefault();
    var data = event.target.value;

    // do searching in AngularJS
})

Если есть какие-то лучшие, более чистые способы, я был бы рад услышать об этом.

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

1 Ответ

0 голосов
/ 14 июня 2018

Лично я бы так и поступил.

Я бы создал на всех страницах, где будет загружаться заголовок, контейнер, в который планируется загрузить.Этот контейнер должен иметь некоторый фон, указывающий, что он не загружен (обычно это серый, но ваш UX-регистр может отличаться)

Затем, чтобы фактически доставить ваш заголовок, создайте его с помощью JS.

Создайте один файл JS (скажем, buildHeader.js), в котором есть код, который записывает ваш html, записывает запрос в ваш css и записывает запрос вашего дополнительного js.

...