javascript - 带有像 sitemesh 这样的装饰器的静态网络

Question

我开始使用 Spring MVC 和 sitemesh 作为装饰器的项目，现在规范已更改，他们希望将后端移出前端，并且

我更愿意将其 GUI 拆分为静态 Web，该静态 Web 将调用其他后端 API，因此如果我这样做，则意味着静态 Web 将是纯 HTML、CSS 和 JS。

所以我只是想知道是否有任何库可以做类似于 sitemesh 的事情(例如，如果我使用 Angular，那么他们可以构建一个带有大量组件的静态网络，但这对我来说需要更多的返工)

我正在寻找类似的东西，它可以帮助我在一个文件中声明所有 css 和 js 库，并且在“body”标签内我只需要渲染不同的页面

Answer 1

您可以使用 XMLHttpRequest 作为装饰器的一部分。

请求特定页面，并将其作为“文档”接收，从 XHR 结果中提取 dom 并使用 DOMObject.appendChild(node) 或 DOMObject.append(element) 粘贴它们。

以下代码是示例，目标页面不支持 https，因此仅显示错误页面。(在测试代码之前访问 https://bypass.isitea.net/default.php 并允许连接)

使用 XMLHttpRequest 时要小心 CORS。

{
  let request = document.querySelector( "#request" );
  request.addEventListener( "click", function ( e ) {
    let xhr = new XMLHttpRequest();
    xhr.open( "GET", `https://bypass.isitea.net/default.php` );
    xhr.responseType = "document";
    xhr.addEventListener( "load", function ( event ) {
      let doc = xhr.response;
      let list = doc.querySelectorAll( "body *" );
      let target = document.querySelector( "#otherBody" );
      for ( const dom of list ) {
        target.appendChild( dom );
      }  
    } );
    xhr.send();
  } );
}

div#otherBody {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: rgba( 0, 128, 64, 0.5 );
}

<span>https://bypass.isitea.net/default.php</span>
<input id="request" type="button" value="Request">
<div id="otherBody"></div>