使用JavaScript动态生成DOM元素的高效OOP方法？

我正在修改通过JavaScript创建动态生成的DOM元素的更有效的方法。这是我以后打算添加到自己的JS框架中的东西。寻找其他OOP开发人员，可以帮助我更好地完善我所拥有的

以下是指向工作代码笔的链接：

以下是JS：

    function CreateDOMEl() {};
    CreateDOMEl.prototype.uiFrag = document.createDocumentFragment();
    CreateDOMEl.prototype.elParent = function(elParent, index) {
        this.elParent = document.getElementsByTagName(elParent)[index];
    }
    CreateDOMEl.prototype.elType = function(type) {
        newEl = document.createElement(type);
        this.uiFrag.appendChild(newEl);
    }
    CreateDOMEl.prototype.elContent = function(elContent) {
        this.elContent = elContent;
        newEl.textContent = elContent;
    }
    CreateDOMEl.prototype.buildEl = function() {
        this.elParent.appendChild(this.uiFrag);
    }
        var div = new CreateDOMEl();
            div.elParent('body', 0);
            div.elType('DIV');
            div.elContent('OK');
            div.buildEl();
            console.log(div);
        var bttn = new CreateDOMEl();
            bttn.elParent('body', 0);
            bttn.elType('BUTTON');
            bttn.elContent('SUBMIT');
            bttn.buildEl();
            console.log(bttn);

以及一些CSS以使元素显示在页面上：

    div {
         width:100px;
         height:100px;
         border: 1px solid red;   
        }

我的想法：

• 对于性能，使用原型构建方法，而不是将所有逻辑放在构造函数中
• 与其直接将元素附加到页面，不如附加到单个文档片段。元素构建为Doc Frag后，将Doc Frag附加到DOM。我喜欢这种提高性能的方法，但希望改进它。requestnimationFrame的任何有用的实现，或者使用range和文档片段方法的其他版本
• 愚蠢，但我认为对于调试来说，在控制台日志上的对象属性中看到生成的元素类型会很好。现在，控制台记录一个创建的元素将显示元素的父元素和文本内容。显示元素类型也很好
• 一次创建多个元素是我想作为选项提供的另一项功能。例如，创建一个div元素将创建一个div元素。添加另一个可选方法来创建多个div实例的好方法是什么

  div.elType('DIV');
  // After calling the elType method, do something like this:
  div.elCount(20);
  // This would create 20 of the same divs
  

• 最后，有一种很好的方法可以选择添加属性（即：类、ID、值、占位符、自定义属性、数据-*属性等）。我使用了一个很好的助手函数，它以对象文字语法的方式向元素添加多个属性。将其添加为构造函数的方法将是理想的。以下是该函数：

      function setAttributes(el, attrs) {
          for(var key in attrs) {
              el.setAttribute(key, attrs[key]);
          }
      }
      // A use case using the above
      // function would be:
      var anInputElement = document.createElement("TEXTAREA");
          setAttributes(anInputElement, {
              "type": "text",
              "id": "awesomeID",
              "name": "coolName",
              "placeholder": "Hey I'm some placeholder example text",
              "class": "awesome"
          });
      // Which creates the following HTML snippet:
      <textarea type="text" id="awesomeID" name="coolName" placeholder="Hey I'm some placeholder example text" class="awesome">
  

  函数集合属性（el、ATTR）{
  for（属性中的变量键）{
  el.setAttribute（key，attrs[key]）；
  }
  }
  //使用上述方法的用例
  //职能将是：
  var anInputElement=document.createElement（“TEXTAREA”）；
  setAttributes（一个输入元素{
  “类型”：“文本”，
  “id”：“awesomeID”，
  “名称”：“酷名”，
  “占位符”：“嘿，我是占位符示例文本”，
  “课堂”：“棒极了”
  });
  //这将创建以下HTML代码段：
  

---

作为旁注，现在意识到上面的helper函数需要重写，以便可以创建多个类。

恕我直言，我相信您可能想得太多了。只需使用JavaScript中可用的工具即可完成。就性能而言，计算机运行JavaScript的速度如此之快，以至于你（和我）无法感知，甚至无法理解速度。例如，下面是我如何添加到MDL nav菜单的链接。只是香草味的。不要忘记添加事件侦听器

  function navMenuAdd(type,text){
    var newAnchor = doc.createElement("anchor");
    newAnchor.classList.add('mdl-navigation__link');
    newAnchor.classList.add(type);
    newAnchor.href = "javascript:void(0)";
    var anchorContent = doc.createTextNode(text);
    newAnchor.appendChild(anchorContent);
    newAnchor.addEventListener('click', navMenuClickHandler, false);
    //newAnchor.style.display = 'none';
    if (type === 'Thingy A'){
      //insertAfter(newAnchor, navMenuCredentials);
      navMenuCredentialsPanel.appendChild(newAnchor);
    } else if (type === 'Thingy B'){
      //insertAfter(newAnchor, navMenuDevices);
      navMenuDevicesPanel.appendChild(newAnchor);
    }
  }

---

new CreateDOMEl（）

顺便问一下，它看起来不太酷。那么你的问题是什么？我看这里没有问题。这里不是讨论想法的地方。您是在引用“new”操作符的用法，还是构造函数本身的名称“CreateDOMEl”？如果是前者，那将是一场漫长的争论。就我个人而言，当与大写构造函数结合使用时，我发现它在视觉上很有用。如果是后者，是的，我会在功能完成后创造性地命名。在以后的评论中提供一个解决方案会很有帮助。谢谢你；博士：问题是：这可以用一种更有效的方式来写吗？文档片段可以更有效地使用吗？如何使动态创建的元素类型显示为控制台日志对象的属性？如何编写可以创建多个相同元素的方法？如何编写作为添加属性的方法提供的helper函数？