Как веб-компонент связан с составным шаблоном в JS? - PullRequest
Новая
       25

Как веб-компонент связан с составным шаблоном в JS?

0 голосов
/ 02 октября 2019

Я читаю составной шаблон Javascript и задаюсь вопросом, подходит ли новый веб-компонент этому шаблону. После поиска в Google я нашел очень мало статей, непосредственно говорящих на эту тему. Как они связаны? Кто-то может указать курс или статью по этому вопросу?

1 Ответ

1 голос
/ 02 октября 2019

Существует несколько способов реализации составного шаблона для веб-компонентов.

Простой способ - определить базовый класс, который будет предоставлять некоторые методы (ваш унифицированный интерфейс), а затем определить различные пользовательские элементы, которые будут использоватьрасширение базового класса. 

//Create a base class with unified methods (or props, or display)
class BaseElement extends HTMLElement {
  sayYourName() {
    console.log( "hello, I'm a " + this.localName )
  }
}

//Define differents elements that extends the Base one
class Type1 extends BaseElement {}
customElements.define( 'type-1', Type1 )
class Type2 extends BaseElement {}
customElements.define( 'type-2', Type2 )

//Call the common method against diffrent types of custom elements
var elems = document.querySelectorAll( 'div *' )
elems.forEach( e => e.sayYourName() )
<div>
  <type-1>Type1</type-1>
  <type-2>Type2</type-2>
</div>
...