Javascript 如何共享HTML/CSS/JS头文件？

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

这个通用标题还将包含一些搜索功能，这与我的问题稍微相关。简单地说，它将包含JavaScript来更改其

元素上的

action

属性，具体取决于下拉选择以及提交表单

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

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

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

这是我们希望遵循的方向：一个文件包含所有我们需要的内容。然而，我想知道一些事情：

• 有哪些模式可以处理页眉的“闪现”问题？由于页眉在页面加载时处于半轴状态，页眉将丢失，然后突然出现，您如何处理可用性问题？我的想法就像是在一个骨架区域中放置头部，然后用JavaScript替换它，但我不知道这是否老生常谈
• 将HTML、CSS和一些JavaScript功能的创建捆绑在一个文件（如JS文件）中的标准方法是什么，或者最好是将HTML文件链接到JS和样式表？我只是不确定捆绑部分。我们不会在这个项目中使用Angular或React，但我确实对Webpack有一些熟悉，它似乎可以完成这项工作，也许。即使这个项目不会使用Angular或React，它仍然需要与其他框架集成
• 我考虑的一件事可能是将HTML分解成一个单独的HTTP请求，并将JavaScript和样式绑定到另一个HTTP请求中——几乎就像web组件一样。换句话说，我们可以并行地请求HTML和CSS/JS，当它返回时，只需在UI中将其粉碎在一起这样做有什么危险，或者这样做时需要考虑什么？
• 将其与AngularJS集成的好方法是什么？由于此标题中包含搜索功能，因此当有人提交搜索时，我们需要某种广播方式（向AngularJS）以及他们提交的搜索内容

最初，对于上面的最后一点，我考虑将其附加到

窗口

对象。然后在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
})

如果有更好、更干净的方法，我很高兴听到

---

我非常感谢你在这方面的帮助。这对我们来说是一个新领域，总的来说，我们希望能够有一个高度可维护的头部，可以轻松地与不同的域共享，等等。

我个人就是这样处理的

我会在所有要加载标题的页面上创建一个计划加载到其中的容器。该容器应该有某种背景指示其未加载（通常为灰色，但您的UX案例可能不同）

然后，为了实际交付头部，使用JS构建它

---

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

处理搜索事件的好方法是什么？例如，如果我想向AngularJS发送一个包含搜索值的事件——我可以绑定到头的外部以获取所需的数据。你的回答是一个好的、坚实的方向，但这是我唯一的问号。非常感谢。避免一次问多个不同的问题。很好，我会做得更好。我只是将这些问题视为项目的需求，因此答案应该包含这些组件，但应该更清楚。