javascript-如何解耦Web组件？

我正在尝试使用纯JavaScript Web组件进行无框架工作.我希望我的Web组件能够独立工作并在不同的站点上使用,但是我也希望两个组件能够通信.因此,他们应该能够通信而不会紧密耦合.

回到我做Angular时,这很容易.我可以通过HTML属性将对象传递给组件,然后组件将其作为对象而不是字符串接收.但是在纯JavaScript中,属性始终是字符串.什么是正确的方法来传递对象,或者使Web组件彼此意识到并能够通信？

解决方法:

这是带有两个本地V1 Web组件的示例应用程序. <成分-1.&GT可以与< component-2>交谈因为您在< component-1>中提供了ID并且该ID是指在< component-2>上设置的ID.

这类似于< label>标签与其for属性一起使用.

HTML

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

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);

<成分-1.&GT只会与< component-2>通话如果存在提供给< component-1>的ID的组件,通过其link-id属性.

标签：loose-coupling,javascript,web-component,custom-element
来源： https://codeday.me/bug/20191011/1891651.html