javascript - Web Components，将数据传入和传出

Question

我的理解是，数据通过其属性传递到自定义 html 元素，并通过调度 CustomEvent 发送出去。

JavaScript 对象显然可以在事件的detail 字段中发送出去，但是如果元素需要向其中传递大量数据怎么办。有没有办法在 JavaScript 中为它提供一个对象。

例如，如果元素包含需要动态初始化或更改的可变数量的部分(例如，具有可变行数的表格)怎么办？我可以想象设置和修改由组件内部解析的 JSON 字符串组成的属性，但感觉这并不是一种优雅的处理方式:

<my-element tableRowProperties="[{p1:'v1', p2:'v2'}, {p1:'v1',p2:'v2'}, {p1:'v1',p2:'v2'}]"></my-element>

或者您可以让元素监听来自外部的包含数据负载的事件吗？

Answer 1

传入数据

如果你真的想要/需要将大量数据传递到你的组件中，那么你可以通过四种不同的方式来实现:

1) 使用属性。这是最简单的，因为您只需通过为元素提供值来传入对象，如下所示:el.data = myObj;

2) 使用属性。我个人讨厌这种方式，但有些框架需要通过属性传递数据。这类似于您在问题中的显示方式。 <my-el data="[{a:1},{a:2}....]"></my-el> .注意遵守与escaping attribute values相关的规则.如果您使用此方法，则需要使用 JSON.parse在你的属性上，这可能会失败。如果在属性中显示大量数据，在 HTML 中也会变得非常难看。

3 通过子元素传递它。想想 <select>元素与 <option>子元素。您可以使用任何元素类型作为子元素，它们甚至不需要是真实元素。在你的connectedCallback函数你的代码只是获取所有的子元素，并将元素、它们的属性或它们的内容转换成你的组件需要的数据。

4 使用 Fetch。 为您的元素提供一个 URL 以获取其自己的数据。想到<img src="imageUrl.png"/> .如果您已经拥有组件的数据，那么这似乎是一个糟糕的选择。但是浏览器提供了一个很酷的嵌入数据的功能，类似于上面的选项 2，但由浏览器自动处理。

这是在图像中使用嵌入数据的示例:

img {
  height: 32px;
  width: 32px;
}

<img src="data:image/svg+xml;charset=utf8,%3C?xml version='1.0' encoding='utf-8'?%3E%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' viewBox='0 0 314.7 314.7'%3E%3Cstyle type='text/css'%3E .st0{fill:transparent;stroke:%23231F20;stroke-width:12;} .st1{fill:%23231F20;stroke:%23231F20;stroke-width:10;stroke-linejoin:round;stroke-miterlimit:10;} %3C/style%3E%3Cg%3E%3Ccircle class='st0' cx='157.3' cy='157.3' r='150.4'/%3E%3Cpolygon class='st1' points='108,76.1 248.7,157.3 108,238.6'/%3E%3C/g%3E%3C/svg%3E">

下面是在 Web 组件中使用嵌入式数据的示例:

function readSrc(el, url) {
    var fetchHeaders = new Headers({
      Accept: 'application/json'
    });

    var fetchOptions = {
      cache: 'default',
      headers: fetchHeaders,
      method: 'GET',
      mode: 'cors'
    };

    return fetch(url, fetchOptions).then(
      (resp) => {
        if (resp.ok) {
          return resp.json();
        }
        else {
          return {
            error: true,
            status: resp.status
          }
        }
      }
    ).catch(
      (err) => {
        console.error(err);
      }
    );
  }

  class MyEl extends HTMLElement {
    static get observedAttributes() {
      return ['src'];
    }

    attributeChangedCallback(attrName, oldVal, newVal) {
      if (oldVal !== newVal) {
        this.innerHtml = '';
        readSrc(this, newVal).then(
          data => {
            this.innerHTML = `<pre>
${JSON.stringify(data,0,2)}
            </pre>`;
          }
        );
      }
    }
  }

  // Define our web component
  customElements.define('my-el', MyEl);

<!--
This component would go load its own data from "data.json"
<my-el src="data.json"></my-el>
<hr/>
The next component uses embedded data but still calls fetch as if it were a URL.
-->
<my-el src="data:json,[{&quot;a&quot;:9},{&quot;a&quot;:8},{&quot;a&quot;:7}]"></my-el>

You can do that same this using XHR, but if your browser supports Web Components then it probably supports fetch. And there are several good fetch polyfills if you really need one.

使用选项 4 的最大优势是您可以从 URL 并且您可以直接嵌入您的数据。这正是大多数预定义 HTML 元素的方式，例如 <img>工作。

更新

我确实想到了将 JSON 数据放入对象的第 5 种方法。那是通过使用 <template>组件中的标记。这仍然需要您调用 JSON.parse但它可以清理您的代码，因为您不需要尽可能多地转义 JSON。

class MyEl extends HTMLElement {
  connectedCallback() {
    var data;
    
    try {
      data = JSON.parse(this.children[0].content.textContent);
    }
    
    catch(ex) {
      console.error(ex);
    }

    this.innerHTML = '';
    var pre = document.createElement('pre');
    pre.textContent = JSON.stringify(data,0,2);
    this.appendChild(pre);
  }
}

// Define our web component
customElements.define('my-el', MyEl);

<my-el>
  <template>[{"a":1},{"b":"&lt;b>Hi!&lt;/b>"},{"c":"&lt;/template>"}]</template>
</my-el>

传递数据

可以通过三种方式从组件中获取数据:

1) 从属性中读取值。这是理想的，因为属性可以是任何东西，并且通常采用您想要的数据格式。属性可以返回字符串、对象、数字等。

2) 读取一个属性。这要求组件使属性保持最新并且可能不是最佳的，因为所有属性都是字符串。因此，您的用户需要知道他们是否需要调用 JSON.parse取决于你的值(value)与否。

3) 事件。这可能是添加到组件中最重要的事情。当组件中的状态发生变化时，应该触发事件。事件应该基于用户交互触发，并且只是提醒用户发生了某事或某事可用。传统上，您会在事件中包含相关数据。这减少了组件用户需要编写的代码量。是的，他们仍然可以读取属性或特性，但如果您的事件包含所有相关数据，那么他们可能不需要做任何额外的事情。