使用带有 react 或 Web 组件的 JavaScript 数据块的最佳方式

Question

我将使用使用Microsoft行为和数据孤岛构建的遗留软件，自IE 10以来，两者都不再受支持。中间层将xml数据转换为"数据块"(如果省略src属性，JavaScript可以使用元素的内容作为数据块(。不幸的是，这些数据块数量庞大，因此完全重写中间层或建立无服务器架构以与后端接口是不可能的。一个干净的解决方案让我无法找到一个干净的解决方案，谁能想到一种方法来用现代框架重用这些现有的数据块，例如 reactular、angular、vue、stencil(通过 Web 组件的自定义元素(？

Answer 1

您可以使用

DOMParser 将自定义<script>数据块的内容解析为 XML 文档。

由于它是标准的Javascript，您可以在您选择的框架中使用它。

下面是一个我称之为<xml-renderer>的香草自定义元素的示例：

class XMLRenderer extends HTMLElement {
  constructor() {
    super()
    this.attachShadow({ mode: 'open' })
        .innerHTML = `<style> 
                        div { background-color: lightblue ; 
                              display: inline-block ;
                              padding : 10px ;}
                      </style>
                      <div>XML Content
                        <ul></ul>
                      </div>`
  }
  connectedCallback() {
    //get the data island id
    var _block_id = this.dataset.block
    var _ul = this.shadowRoot.querySelector('ul')
    var _xml
    parseXML()
    render()
    //internal methods
    //parse
    function parseXML() {
      var text = document.getElementById(_block_id)
      var parser = new DOMParser()
      _xml = parser.parseFromString(text.textContent, 'application/xml')
    }
    //render
    function render() {
      _xml.querySelectorAll('data').forEach(d => {
        let li = document.createElement('li')
        li.textContent = d.textContent
        _ul.appendChild(li)
      })
    }
  }
}
customElements.define("xml-renderer", XMLRenderer)

<script type="application/xml" id="data-block1">
  <base><data>Data 1</data><data>Data 2</data></base>
</script>
<xml-renderer data-block="data-block1"></xml-renderer>