Ссылка HTML-элемент в прототипе объекта Javascript

Question

Я работаю над пользовательским видеокодеком для Javascript, который поддерживает прозрачность. Я нахожусь в стадии разработки API для кодека, и я хотел бы максимально соответствовать HTML API видео.

Таким образом, с обычным видео вы можете воспроизводить видео элемент, связывая функцию «play» с самим элементом:

document.getElementById("myVideo").play();

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

document.getElementById("myVideo").src = "movie.mp4";

Я хочу добиться этого, но с моим собственным пользовательским объектом между элементом HTML и функцией / объектом, на который вы ссылаетесь, чтобы избежать конфликтов имен. На практике это будет выглядеть так:

document.getElementById("myVideo").myObject.play();
document.getElementById("myVideo").myObject.src = "movie.mp4";

Однако я не могу придумать, как заставить эту работу работать, используя тот же myObject. myObject может быть функцией конструктора, которая будет возвращать новый объект, или это может быть объект с функциями / значениями, хранящимися внутри.

Возвращение функции будет хорошо работать для функции play, потому что она может иметь доступ к html-элементу, который ее вызвал.

HTMLElement.prototype.myObject= function(){
  var objInstance = {};
  objInstance.documentElement = this;
  objInstance.play = function() { alert(this.documentElement) };
  return objInstance;
}

«this» ссылается на элемент html, который вызвал функцию. Однако выполнение этого означает, что установка attritubute типа "src" не будет работать внешне, потому что функция является только конструктором, который возвращает новый объект. Я также хотел бы, чтобы источник был объектом, который может быть выставлен извне следующим образом:

HTMLElement.prototype.myObject = {
  documentElement: HTMLElement,
  src: "hi",
  play () {
    console.log(this.documentElement);
  }
}

Теперь я могу редактировать «src» извне и вызывать функцию воспроизведения, однако в этом случае функция воспроизведения больше не имеет доступа к элементу html. Вместо этого documentElement хранит объект окна для всей страницы.

Как я могу реализовать обе эти функции выше в одной переменной?

Answer 1

Лучший способ присоединить пользовательские методы к существующему элементу HTML - это использовать WeakMap, но в старых браузерах это не сработает. Другой вариант - прикрепить объект к фактическому элементу HTML, убедившись, что вы не перегружаете существующие методы / свойства.

Ниже я использовал опцию прикрепления к объекту, в основном вы проверяете, если вы уже прикрепили объект, если не создали его.

function MyObject(element) {
  this.element = element;
}

MyObject.prototype.showTime = function () {
  this.element.innerText = new Date();
}

function wrap(element) {
  if (!element.myObject) {
    element.myObject = new MyObject(element);
    console.log("new instance");
  }
  return element.myObject;
}



const test = document.querySelector("#test");

wrap(test).showTime();
wrap(test2).showTime();

//below new objects won't be created..

//update test every second
setInterval(function () {
  wrap(test).showTime();
}, 1000);

//update test2 every 10 seconds
setInterval(function () {
  wrap(test2).showTime();
}, 10000);

<div id="test">
</div>

<div id="test2" style="background-color: yellow">
</div>