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

Question

我正在努力编写一种更有效的方法，以通过JavaScript创建动态生成的DOM元素。 我打算稍后将其添加到自己的JS框架中。 寻找其他OOP开发人员可以帮助更好地完善我的工作。

这是工作CodePen的链接： http ://codepen.io/DaneTheory/pen/yeLvmm/

这是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和其他版本的文档片段方法？
• 愚蠢，但我认为对于调试而言，最好在控制台日志的Object属性的内部查看生成的Element类型。 到目前为止，控制台记录创建的元素将显示元素的父元素和文本内容。 同时显示元素类型也很棒。

• 一次创建多个元素是我想提供的另一项功能。 例如，创建一个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，值，占位符，自定义属性，data- *属性等）。 我有一个很好的辅助函数，该函数以对象文字语法的方式向元素添加多个属性。 将其添加为构造函数的方法将是理想的。 这是该函数：

    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"> 

附带说明一下，现在意识到上面的辅助函数需要重写，以便可以创建多个类。

Answer 1

恭喜，我相信您可能会想得太多。 只需使用JavaScript中可用的工具即可完成工作。 在性能方面，计算机运行JavaScript的速度如此之快，以致您（和我）无法感知甚至无法理解速度。 例如，这是我向MDL导航菜单添加链接的方式。 这只是香草JS。 不要忘记添加事件监听器。

  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);
    }
  }