Блог

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

Например:

 class Player extends Model {
 constructor(parent, att0, att1) {
  super(parent, "div");
  
  let attribute0 = new Model(this, "h5");
  let attribute1 = new Model(this, "h5");
  
  attribute0.innerText = att0;
  attribute1.innerText = att1;
 }
}
  

Вместо:

 class Player{
 constructor(att0, att1) {
  
  let attribute0 = document.createElement("h5");
  let attribute1 = document.createElement("h5");
  
  attribute0.innerText = att0;
  attribute1.innerText = att1;

  this.appendChild(attribute0);
  this.appendChild(attribute1);
 }
}
  

(И добавление экземпляров Player в качестве дочерних элементов к их родительскому классу)

Возможно ли это сделать? Если да, то как и каков наилучший способ его реализации? Если нет, могу ли я сделать хотя бы что-то подобное для достижения аналогичного результата?

Заранее спасибо.

Веб на самом деле поддерживает пользовательские элементы, вы можете сделать:

 class Player extends HTMLDivElement {
  constructor() {
    this.appendChild(document.createElement('h2'));
    this.lastElementChild.textContent = this.dataset.title;
    this.appendChild(document.createElement('h4'));
    this.lastElementChild.textContent = this.dataset.subtitle;
  }
}
customElements.define('player-wrapper', Player, { extends: 'div' });
  

А затем отобразить его с помощью:

 <player-wrapper subtitle='foo' title='bar' />
  

Вы можете прочитать об этом в MDN .

Вы также можете использовать дочерние элементы в качестве атрибутов и т. Д., Хотя декларативная композиция обычно выполняется в шаблонах, которые поддерживаются в любом случае.

Как правило, люди просто используют для этого некоторую компонентную систему, такую как Angular / React / Vue, вместо того, чтобы использовать «сырые» веб-компоненты.