如何共享一个HTML/CSS/JS标头？

Question

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

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

我们想报头工作,方式是,它生活在一个位置,我们正在考虑某种形式的HTTP请求,以获得头.在我们看来,这将最大化Universal Header的可移植性.

标题需要与WordPress(不是问题)很好地集成,而且在AngularJS中,在我们的讨论中,不太确定是否可行.因此,搜索功能的"略微相关"部分.

我们谈到的其中一个解决方案是在HTML中这样做,就像这个答案一样,但我总是对通过HTTP请求原始HTML并将其转储到页面中更加怯懦,但也许这是正确的方法,但也许不是吗？由于我们不确定,我们考虑了JIRA Issue Collector,它们基本上将JavaScript流式传输给他们的客户,然后构建问题跟踪器按钮,固定在页面的一侧,其中包含一些HTML,CSS和JS.然后,用户可以单击此按钮,打开准备提交的表单.这可能是一个过度简化,但基本上,他们的JS片段包HTML/CSS/JS并将数据提交到他们的服务器.

这是我们喜欢的方向:单个文件包含我们需要的所有内容.但是,我想知道一些事情:

• 有哪些模式可以处理标题的"闪存"？由于在页面加载时它是AJAXed,标题将丢失然后突然出现,你怎么能处理这个可用性问题？我想的是一个标题区域的Skeleton区域,然后让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

就我个人而言，这就是我的处理方式。

我将在标题将加载的所有页面上创建一个计划加载到的容器。该容器应该有某种背景，表明其未加载（通常是灰色的，但您的用户体验情况可能有所不同）

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

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