javascript - 如何共享 HTML/CSS/JS 标题？

Question

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

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

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

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

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

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

有哪些模式可以处理标题的“闪光”？ 由于它在页面加载时被 AJAX 处理，标题将丢失然后突然出现，您如何处理该可用性问题？我想像标题所在的骨架区域，然后让 JavaScript 替换它，但我不知道这是否陈腐。

将 HTML、CSS 和一些 JavaScript 功能的创建都包含在单个文件(如 JS 文件)中，或者更好地将 HTML 文件链接到 JS 和样式表的标准方法是什么？ 我只是不确定捆绑件。我们不会在这个元素中使用 Angular 或 React，但我确实对 Webpack 有一些熟悉，这似乎可以完成这项工作，也许吧。即使这个元素不会使用 Angular 或 React，它仍然需要与其他框架集成。

我正在考虑的一件事可能是将 HTML 分解为一个单独的 HTTP 请求，并将 JavaScript 和样式捆绑在另一个 HTTP 请求中——几乎就像一个 Web 组件。换句话说，我们可以并行请求 HTML 和 CSS/JS，当它返回时，只需在 UI 中将它们粉碎在一起。 这样做有什么危险，或者这样做时需要考虑什么？

将它与 AngularJS 集成的好方法是什么？ 由于此 header 将具有搜索功能，因此当有人提交搜索时，我们需要某种方式广播(到 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
})

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

我很感激这方面的任何帮助。这对我们来说是一个新领域，总的来说，我们希望能够拥有一个高度可维护的 header ，可以轻松地与不同的域等共享。

Answer 1

就我个人而言，这就是我将如何处理它。

我会在标题将加载的所有页面上创建一个计划加载到的容器。该容器应该有某种背景表明它没有加载(通常这是灰色的，但你的用户体验案例可能会有所不同)

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

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