在原型對象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>