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

Posted 2023-02-26

【中文标题】使用 JavaScript 动态生成 DOM 元素的高效 OOP 方法？

【英文标题】：Efficient OOP way to generate DOM elements dynamically with JavaScript?

【发布时间】：2015-12-06 00:52:33

【问题描述】：

我正在尝试编写一种更有效的方法来通过 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">

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

【问题讨论】：

new CreateDOMEl() 顺便说一句看起来不太酷。

那么你的问题是什么？我在这里根本看不到任何问题。这里不是讨论想法的地方。

您是指使用“new”运算符，还是引用构造函数本身的名称“CreateDOMEl”？如果是前者，那将是一个长期的争论。就个人而言，我发现它在与大写构造函数结合使用时在视觉上很有用。如果是后者，是的，我会在功能完成后创造性地命名事物。将来在您的评论中提供解决方案会很有帮助。不过还是谢谢。

tl;dr：问题是：这可以用更高效的方式编写吗？可以更有效地使用文档片段吗？如何让动态创建的元素类型显示为控制台记录对象的属性？如何编写可以创建多个相同元素的方法？如何编写作为添加属性的方法提供的辅助函数？

【参考方案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);