javascript - 使用 React 或 Web 组件使用 JavaScript 数据 block 的最佳方式？

Question

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

Answer 1

您可以使用 DOMParser解析您自定义的内容<script>将数据 block 转换为 XML 文档。

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

下面是一个我称之为 <xml-renderer> 的 Vanilla 自定义元素的例子。 :

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>