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将存储整个页面的窗口对象。

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

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>

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

1 个答案: