在原型对象Javascript中刷新html元素

Question

我正在为支持透明性的Javascript开发自定义视频编解码器。 我正要为编解码器开发API，并且我想尽可能匹配html video API。

因此，对于常规视频，您可以通过将“播放”功能链接到元素本身来播放视频元素：

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可以是将返回新对象的构造函数，也可以是内部存储有函数/值的对象。

返回一个函数对于“播放”函数会很好，因为它可以访问调用它的html元素。

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

“ this”是指调用该函数的html元素。 但是，这样做意味着在外部设置像“ src”这样的属性，因为该函数只是返回新对象的构造函数。 我也想让source是可以像这样在外部公开的对象：

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

现在，我可以在外部编辑“ src”，并调用play函数，但是在这种情况下，play函数不再可以访问html元素。 相反，documentElement将存储整个页面的window对象。

如何在同一个变量中实现以上两个功能？

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>