如何在 javascript 中為自定義構造函數添加自定義屬性？

Question

我想用自定義屬性制作一個自定義 javascript構造函數。 讓我們想象一下它的樣子：

 var a = new MyCustomConstructor({
  selector: ".demo",
  html: "Hello World !",
  style: {
     color : "white",
     background : "blue"
  }
 });

上面的示例添加了文本Hello World ！ class演示的所有元素以及給定的 styles。 我怎樣才能真正做到這一點？ 我想用ES5和ES6來實現它，但沒有庫。 我可以做嗎？ 如果是，那怎么辦？

提前致謝。

Answer 1

我有一個很好的解決方案。 所以，這里有一段代碼：

 function MyCustomConstructor(stock) {
   var sel = document.querySelectorAll(stock.selector); // Selecting all matching elements in your selector method
   for( var i = 0; i < sel.length; ++i ) {
     sel[i].innerHTML += stock.html; // Setting the text 
     sel[i].style.cssText = stock.style; // Setting css properties with values
     sel[i].style[stock.css.prop] = stock.css.val; // You can also nest them
   };
 };

您可以將其用作：

 var a = new MyCustomConstructor({
   selector: ".demo",
   html: "Hello World !",
   style: "background : blue",
   css: {
      prop: "color",
      val: "white",
   }
  });

Answer 2

上面的示例添加了文本 Hello World。 使用 class 演示的所有元素。 我怎樣才能真正做到這一點

回答您的問題，您可以簡單地找到所有帶有class=demo的元素並設置它們的文本：

 const elements = document.getElementsByClassName('demo'); for (let el of elements) { el.innerText = 'Hello World!' }

 <span class='demo'> </span> <span class='demo'> </span> <span class='demo'> </span>

另外我建議你閱讀這篇關於 js 構造函數的好文章。