С помощью веб-компонентов вы можете передавать объекты через атрибуты, как вы сказали, но вы также можете передавать объект с помощью метода или через свойство (которое на самом деле является методом установки).

аюсь работать без рамок, с чистыми веб-компонентами JavaScript. Я хочу, чтобы мои веб-компоненты могли работать автономно и использоваться на разных сайтах, но я также хочу, чтобы два компонента могли обмениваться данными. Таким образом, они должны иметь возможность общаться, не будучи тесно связаны между собой.

Когда я делал Angular, это было легко. Я могу передавать объекты компоненту через атрибут HTML, и компонент получает его как объект, а не строку. Но в чистом javascript атрибуты всегда являются строками. Как правильно передавать объекты или иным образом заставлять веб-компоненты узнавать друг друга и общаться?

 nadavvadan27 нояб. 2017 г., 13:26
Похоже, вы в конечном итоге создадите свой собственный фреймворк.
 mcv27 нояб. 2017 г., 14:28
Вот чего я надеюсь избежать. Я хочу придерживаться как можно более чистого javascript с минимальными предположениями об окружающей среде или существовании других объектов, и в то же время иметь простой способ привести два объекта в контакт друг с другом.

Ответы на вопрос(2)

Решение Вопроса

<component-1> можно поговорить с<component-2> потому что вы предоставляете идентификатор в<component-1> и этот идентификатор относится к идентификатору, установленному на<component-2>.

Это похоже на то, как<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);

<component-1> буду говорить только с<component-2> если есть компонент с идентификатором, который был предоставлен<component-1> через егоlink-id приписывать.

 Intervalia29 нояб. 2017 г., 05:11
Это немного шаблонно, но вы создаете настоящий элемент HTML, какHTMLButtonElement или жеHTMLDivElement, Есть способы уменьшить ваш код и библиотеки, которые также могут уменьшить код. Но я используюsnippet в моем редакторе, который автоматически генерирует код по умолчанию и сохраняет мне все набор текста. Лично я не против шаблона.
 mcv29 нояб. 2017 г., 01:43
Это много шаблонного. Совершенно по-другому, когда вы пришли из Angular, но я думаю, это неизбежно, когда вы пытаетесь работать в чистом JS.

как вы сказали, но вы также можете передавать объект с помощью метода или через свойство (которое на самом деле является методом установки).

<my-component id="comp1"></my-component>
...
var myObject = { y:1, y:2 }
comp1.value = myObject     //via property
comp1.setValue( myObject ) //via method

Ваш ответ на вопрос