你如何解耦Web组件？ [英] How do you decouple Web Components?

问题描述

我正在尝试使用纯javascript Web组件构建无框架。我希望我的Web组件能够独立工作并在不同的站点上使用，但我还希望有两个组件能够进行通信。所以他们应该能够在没有紧密耦合的情况下进行交流。

I'm trying to work frameworkless, with pure javascript Web Components. I want my Web Components to be able to work stand-alone and be used on different sites, and yet I also want two components to be able to communicate. So they should be able to communicate without being tightly coupled.

当我做Angular时，这很容易。我可以通过HTML属性将对象传递给组件，组件将其作为对象而不是字符串接收。但在纯JavaScript中，属性总是字符串。传递对象或以其他方式使Web组件相互识别并能够进行通信的正确方法是什么？

Back when I did Angular, this was easy. I can pass objects to a component through a HTML attribute, and the component receives it as an object rather than a string. But in pure javascript, attributes are always strings. What is the right way to pass objects around, or otherwise make Web Components aware of each other and able to communicate?

推荐答案

这里是一个具有两个本机V1 Web组件的示例应用程序。 < component-1> 可以与< component-2> 交谈，因为您在<$ c中提供了ID $ c>< component-1> ，该ID是指< component-2> 上设置的ID。

Here is a sample app with two native V1 Web Components. <component-1> can talk to <component-2> because you supply an ID into <component-1> and that ID refers to the ID set on <component-2>.

这类似于< label> 标签如何与其一起使用属性。

This is similar to how the <label> tag work with its for attribute.

<component-1 link-id="c2"></component-1>
<hr/>
<component-2 id="c2"></component-2>

JS

JS

// Class for `<component-1>`
class Component1 extends HTMLElement {
  constructor() {
    super();
    this._linkedComponent = null;
    this._input = document.createElement('input');
    this._input.addEventListener('focus', this._focusHandler.bind(this));

    this._button = document.createElement('button');
    this._button.textContent = 'Add';
    this._button.addEventListener('click', this._clickHandler.bind(this));
  }

  connectedCallback() {
    this.appendChild(this._input);
    this.appendChild(this._button);
  }

  static get observedAttributes() {
    return ['link-id'];
  }

  attributeChangedCallback(attrName, oldVal, newVal) {
    if (oldVal !== newVal) {
      if (newVal === null) {
        this._linkedComponent = null;
      }
      else {
        this._linkedComponent = document.getElementById(newVal);
      }
    }
  }

  _clickHandler() {
    if (this._linkedComponent) {
      this._linkedComponent.value = this._input.value;
    }
  }

  _focusHandler() {
    this._input.value = '';
  }
}

// Class for `<component-2>`
class Component2 extends HTMLElement {
  constructor() {
    super();
    this._textArea = document.createElement('textarea');
    this._textArea.setAttribute('style','width:100%;height:200px;');
  }

  connectedCallback() {
    this.appendChild(this._textArea);
  }

  set value(newValue) {
    this._textArea.value += (newValue+'\n');
  }
}

customElements.define('component-1', Component1);
customElements.define('component-2', Component2);

< component-1> 只会如果有一个组件的ID提供给< component-1> < component-2> 联系c>通过其 link-id 属性。

<component-1> will only talk to <component-2> if there is a component with the ID that was provided to <component-1> through its link-id attribute.

这篇关于你如何解耦Web组件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！