javascript - 使用 react 或 web 组件使用 javascript 数据块的最佳方式？

Question

我将使用使用 Microsoft Behaviors 和 Data Islands 构建的遗留软件，自 IE 10 起不再支持两者。中间层将 xml 数据转换为“数据块”（如果 JavaScript 可以将元素的内容用作数据块，则src 属性被省略..)。不幸的是，这些数据块数不胜数，因此完全重写中间层或建立无服务器架构与后端接口是不可能的。一个干净的解决方案让我望而却步，任何人都可以想出一种方法来重用这些现有的数据块与现代框架，如反应，角度，vue，模具（通过网络组件的自定义元素）？

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>