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的任何有用实现，或者使用范围和其他版本的文档片段方法？
愚蠢，但我认为对于调试它很高兴在控制台日志中的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);
    }
  }

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

1 个答案: