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

Question

我将使用使用 Microsoft Behaviors 和 Data Islands 构建的遗留软件，这两种软件自 IE 10 以来不再受支持。中间层将 xml 数据转换为 "data-blocks"（JavaScript 如果省略 src 属性，则可以将元素的内容用作数据块..)。不幸的是，这些数据块数量巨大，因此完全重写中间层或建立无服务器架构以与后端接口是不可能的。一个干净的解决方案正在躲避我，任何人都可以想出一种方法来使用现代框架重用这些现有的数据块，例如 react、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>

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

Best way to consume javascript data blocks with react or web components?

javascript

web-component

node.js

reactjs

stenciljs