如何分享一个header即HTML/CSS/JS？
How to share a header that is HTML/CSS/JS?
我在工作中开始了一个新项目，我们的任务是创建一个通用 Header。这意味着在我们拥有的不同 domains/servers、我们的 customer-created 站点和 third-party 站点上，我们需要一种非常简单的方法来将此代码提供给人们。
这个 Universal Header 还将包含一些搜索功能，这与我的问题略有相关。简而言之，它将包含 JavaScript 以更改其 <form> 元素上的 action 属性，具体取决于下拉选择以及提交表单。
我们希望 header 工作的方式是它 位于 一个位置，我们正在考虑某种 HTTP 请求来获取 header.我们认为，这将最大限度地提高 Universal Header 的便携性。
header 将需要与 WordPress 很好地集成（这不是问题），但也需要与 AngularJS 集成，在我们的讨论中，这是否可能不太确定。因此 "slightly relevant" 部分搜索功能。
我们讨论的解决方案之一是在 HTML 中执行此操作，例如 , but I've always been a little more skittish about requesting raw HTML over HTTP, and just dumping it into a page, but maybe it's the right way to go, but maybe not? Since we weren't sure, we thought about the JIRA Issue Collector，他们基本上将 JavaScript 流式传输给他们的客户，然后构建问题跟踪器按钮，固定在页面的一侧，其中包含一些 HTML、CSS 和 JS。然后用户可以单击此按钮，这将打开一个准备提交的表单。这可能过于简单化，但基本上，他们的 JS 代码片段打包 HTML/CSS/JS 并将数据提交到他们的服务器。
这是我们希望的方向：让一个文件包含我们需要的一切。但是，我想知道一些事情：
- 有哪些模式可以处理 header 的 "flash"？ 因为它是在页面加载时使用 AJAX，所以 header会丢失然后突然出现，你如何处理可用性问题？我在想 header 所在的骨架区域，然后用 JavaScript 替换它，但我不知道这是否陈腐。
- 捆绑 HTML、CSS 和一些 JavaScript 功能的 创作 的标准方法是什么所有内容都包含在单个文件（如 JS 文件）中，或者最好有一个 HTML 文件链接到 JS 和样式表？ 我只是不确定捆绑件。我们不会在这个项目中使用 Angular 或 React，但我确实对 Webpack 有一定的了解，这似乎可以完成这项工作，也许吧。即使这个项目不会使用 Angular 或 React，它仍然需要与其他框架集成。
- 我正在考虑的一件事是可能将 HTML 分解为一个单独的 HTTP 请求，并将 JavaScript 和样式捆绑在另一个 HTTP 请求中——几乎就像一个 Web 组件。换句话说，我们可以并行请求 HTML 和 CSS/JS，当它 returns 时，只需在 UI 中将它们粉碎在一起。 这样做有什么危险，或者这样做时需要考虑哪些事情？
- 什么是将它与 AngularJS 集成的好方法？ 因为这个 header 将具有搜索功能，我们需要一些方法当有人提交搜索时广播（向 AngularJS），以及他们提交的搜索内容。
本来，对于上面的最后一点，我想把它附加到一个window object。然后在 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，可以轻松地与不同的域共享，等等
就我个人而言，这就是我的处理方式。
我会在 header 将加载的所有页面上创建一个计划加载到其中的容器。该容器应该有某种背景表明它没有加载（通常这是灰色的，但你的 UX 案例可能不同）
然后，要实际交付您的 header，请使用 JS 构建它。
创建一个 JS 文件（比如 buildHeader.js），其中包含写入您的 html 的代码，向您的 css 写入一个请求，并为您的其他 js 写入一个请求。
我在工作中开始了一个新项目，我们的任务是创建一个通用 Header。这意味着在我们拥有的不同 domains/servers、我们的 customer-created 站点和 third-party 站点上，我们需要一种非常简单的方法来将此代码提供给人们。
这个 Universal Header 还将包含一些搜索功能，这与我的问题略有相关。简而言之，它将包含 JavaScript 以更改其 <form> 元素上的 action 属性，具体取决于下拉选择以及提交表单。
我们希望 header 工作的方式是它 位于 一个位置，我们正在考虑某种 HTTP 请求来获取 header.我们认为，这将最大限度地提高 Universal Header 的便携性。
header 将需要与 WordPress 很好地集成（这不是问题），但也需要与 AngularJS 集成，在我们的讨论中，这是否可能不太确定。因此 "slightly relevant" 部分搜索功能。
我们讨论的解决方案之一是在 HTML 中执行此操作，例如
这是我们希望的方向：让一个文件包含我们需要的一切。但是，我想知道一些事情：
- 有哪些模式可以处理 header 的 "flash"？ 因为它是在页面加载时使用 AJAX，所以 header会丢失然后突然出现，你如何处理可用性问题？我在想 header 所在的骨架区域，然后用 JavaScript 替换它，但我不知道这是否陈腐。
- 捆绑 HTML、CSS 和一些 JavaScript 功能的 创作 的标准方法是什么所有内容都包含在单个文件（如 JS 文件）中，或者最好有一个 HTML 文件链接到 JS 和样式表？ 我只是不确定捆绑件。我们不会在这个项目中使用 Angular 或 React，但我确实对 Webpack 有一定的了解，这似乎可以完成这项工作，也许吧。即使这个项目不会使用 Angular 或 React，它仍然需要与其他框架集成。
- 我正在考虑的一件事是可能将 HTML 分解为一个单独的 HTTP 请求，并将 JavaScript 和样式捆绑在另一个 HTTP 请求中——几乎就像一个 Web 组件。换句话说，我们可以并行请求 HTML 和 CSS/JS，当它 returns 时，只需在 UI 中将它们粉碎在一起。 这样做有什么危险，或者这样做时需要考虑哪些事情？
- 什么是将它与 AngularJS 集成的好方法？ 因为这个 header 将具有搜索功能，我们需要一些方法当有人提交搜索时广播（向 AngularJS），以及他们提交的搜索内容。
本来，对于上面的最后一点，我想把它附加到一个window object。然后在 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，可以轻松地与不同的域共享，等等
就我个人而言，这就是我的处理方式。
我会在 header 将加载的所有页面上创建一个计划加载到其中的容器。该容器应该有某种背景表明它没有加载（通常这是灰色的，但你的 UX 案例可能不同）
然后，要实际交付您的 header，请使用 JS 构建它。
创建一个 JS 文件（比如 buildHeader.js），其中包含写入您的 html 的代码，向您的 css 写入一个请求，并为您的其他 js 写入一个请求。