javascript - 使用带有React或Web组件的javascript数据块的最佳方法？

我将使用从Microsoft行为和数据岛构建的旧版软件，这两个版本自IE 10起就不再受支持。中间层将xml数据转换为“数据块”（JavaScript可以将元素的内容用作数据块，如果则省略src属性。）。不幸的是，这些数据块不胜枚举，因此完全重写中间层或建立无服务器架构以与后端接口是不可能的。一个干净的解决方案使我望而却步，有人能想到一种以现代框架重用这些现有数据块的方法吗，例如React，Angular，Vue，Stencil（通过Web组件自定义元素）？

最佳答案

您可以使用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>