如何共享 HTML/CSS/JS 的标头？

Question

我正在开始一个新项目，我们的任务是创建一个通用页眉。这意味着在我们拥有的不同域/服务器、客户创建的网站和第三方网站上，我们需要一种非常简单的方法来将这些代码提供给人们。

此通用标题还将包含一些搜索功能，这与我的问题略有相关。简而言之，它将包含 JavaScript 以更改其 <form> 元素上的 action 属性，具体取决于下拉选择以及提交表单。

我们希望标头工作的方式是，它存在在一个位置，我们正在考虑某种 HTTP 请求来获取标头。我们认为，这将最大限度地提高通用标头的可移植性。

标头需要与 WordPress 很好地集成（不是问题），但也需要与 AngularJS 集成，在我们的讨论中，不太确定这是否可行。因此，搜索功能的“稍微相关”部分。

我们讨论过的解决方案之一是使用 HTML 进行处理，例如 this answer，但对于通过 HTTP 请求原始 HTML，然后将其转储到页面中，我总是有点不安，但也许它是正确的路要走，但也许不是？由于我们不确定，我们考虑了JIRA Issue Collector，他们基本上将 JavaScript 流式传输给客户，然后构建问题跟踪器按钮，固定在包含一些 HTML、CSS 和 JS 的页面的一侧。然后，用户可以单击此按钮，这将打开一个准备提交的表单。这可能过于简单，但基本上，他们的 JS sn-p 打包 HTML/CSS/JS 并将数据提交到他们的服务器。

这是我们希望采用的方向：让一个文件包含我们需要的所有内容。但是，我想知道一些事情：

• 有哪些模式可以处理页眉的“flash”？ 因为它是在页面加载时进行 AJAX 处理的，所以页眉会丢失然后突然出现，你如何处理这个可用性问题？我在想标题所在的骨架区域，然后让 JavaScript 替换它，但我不知道这是否老套。
• 创建 HTML、CSS 和一些 JavaScript 功能都包含在单个文件（如 JS 文件）中的标准方法是什么，或者最好有一个 HTML 文件链接到JS 和样式表？ 我只是不确定捆绑件。我们不会在这个项目中使用 Angular 或 React，但我确实对 Webpack 有点熟悉，这似乎可以完成这项工作，也许。即使这个项目不会使用 Angular 或 React，它仍然需要与其他框架集成。
• 我正在考虑的一件事可能是将 HTML 分解为一个单独的 HTTP 请求，并将 JavaScript 和样式捆绑在另一个 HTTP 请求中——几乎就像一个 Web 组件。换句话说，我们可以并行请求 HTML 和 CSS/JS，当它返回时，只需在 UI 中将它们组合在一起即可。 这样做有什么危险，或者这样做时需要考虑哪些事情？
• 将其与 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
})

如果有更好、更清洁的方法，我会很高兴听到。

感谢您对此提供的任何帮助。这对我们来说是一个新领域，总的来说，我们希望能够拥有一个高度可维护的标头，可以轻松地与不同的域等共享。

Answer 1

我个人是这样处理的。

我会在要加载标题的所有页面上创建一个计划加载到的容器。该容器应该有某种背景，表明它没有加载（通常这是灰色的，但您的 UX 案例可能会有所不同）

然后，要实际交付您的标头，请使用 JS 构建它。

创建一个 JS 文件（比如 buildHeader.js），其中包含编写您的 html、向您的 css 写入请求以及为您的附加 js 写入请求的代码。