从DOM创建可重用的文档片段

Question

我想在架子上有一个文件片段/元素,我连接了许多其他元素.然后,每当我想将这些元素系统中的一个添加到DOM时,我复制片段,添加唯一的DOM ID并附加它.

所以,例如:

var doc = document,
    prototype = doc.createElement(),  // or fragment
    ra = doc.createElement("div"),
    rp = doc.createElement("div"),
    rp1 = doc.createElement("a"), 
    rp2 = doc.createElement("a"),
    rp3 = doc.createElement("a");

ra.appendChild(rp);
rp.appendChild(rp1);
rp.appendChild(rp2);
rp.appendChild(rp3);
rp1.className = "rp1";
rp2.className = "rp2";
rp3.className = "rp3";

prototype.appendChild(ra);

这创建了原型.然后我希望能够复制原型,添加ID,并附加.像这样:

var fr = doc.createDocumentFragment(),
    to_use = prototype; // This step is illegal, but what I want!
                        // I want prototype to remain to be copied again.

to_use.id = "unique_id75";
fr.appendChild(to_use);
doc.getElementById("container").appendChild(fr);

我知道这不合法.我做过小提琴和研究等等,但它没有用.一篇SO帖子提出了el = doc.appendChild(el);回报el,但这并没有让我走得太远.

所以......有可能吗？你能创建一个可以重复使用的现成元素吗？或者你是否必须每次都要从头开始构建你想要添加的DOM结构？

基本上我正在寻求性能提升'因为我正在创造成千上万的吸盘:)

谢谢.

Answer 1

用途Node.cloneNode:

var container = document.getElementById('container');

var prototype = document.createElement('div');
prototype.innerHTML = "<p>Adding some <strong>arbitrary</strong> HTML in"
 +" here just to illustrate.</p> <p>Some <span>nesting</span> too.</p>"
 +"<p>CloneNode doesn't care how the initial nodes are created.</p>";

var prototype_copy = prototype.cloneNode(true);

prototype_copy.id = 'whatever'; //note--must be an Element!

container.appendChild(prototype_copy);

速度小贴士

您希望最小化三种操作:

字符串解析

使用时会发生这种情况innerHTML.innerHTML当你单独使用它时速度很快.由于所有这些DOM方法调用的开销,它通常比等效的手动DOM构造更快.但是,您希望innerHTML不使用内部循环,并且不希望将其用于追加. element.innerHTML += 'more html'特别是随着元素内容变得越来越大,具有灾难性的运行时行为.它还会破坏任何事件或数据绑定,因为所有这些节点都被销毁并重新创建.

因此innerHTML,为了方便起见,使用创建"原型"节点,但对于内部循环使用DOM操作.要克隆原型,请使用prototype.cloneNode(true)不调用解析器的原型.(请注意克隆原型中的id属性 - 当您将它们附加到文档时,您需要确保它们是唯一的!)

文档树修改(重复appendChild调用)

每次修改文档树时,都可能触发文档窗口的重绘并更新文档DOM节点关系,这可能很慢.而是将您的追加批量添加到a中DocumentFragment,并将其仅附加到文档DOM一次.

节点查找

如果你已经有了一个内存原型对象要修改它的一部分,你需要导航的DOM查找和是否使用DOM遍历,修改这些作品getElement*,或querySelector*.

通过在创建原型时保留对要修改的节点的引用,将这些搜索保留在内部循环之外.然后,只要您想要克隆原型的几乎相同的副本,请修改已经引用的节点,然后克隆修改后的原型.

示例模板对象

对于它来说,这是一个基本的(可能是快速的)模板对象,说明使用cloneNode和缓存的节点引用(减少字符串解析和节点查找的使用).

为它提供带有类名和data-attr="slotname attributename"属性的"原型"节点(或字符串).类名成为文本内容替换的"插槽"; 具有data-attr成为属性名称设置/替换的插槽的元素.然后,您可以render()使用已定义的插槽的新值为该方法提供对象,并且您将获得已完成替换的节点的克隆.

示例用法位于底部.

function Template(proto) {
    if (typeof proto === 'string') {
        this.proto = this.fromString(proto);
    } else {
        this.proto = proto.cloneNode(true);
    }
    this.slots = this.findSlots(this.proto);
}
Template.prototype.fromString = function(str) {
    var d = document.createDocumentFragment();
    var temp = document.createElement('div');
    temp.innerHTML = str;
    while (temp.firstChild) {
        d.appendChild(temp.firstChild);
    }
    return d;
};
Template.prototype.findSlots = function(proto) {
    // textContent slots
    var slots = {};
    var tokens = /^\s*(\w+)\s+(\w+)\s*$/;
    var classes = proto.querySelectorAll('[class]');
    Array.prototype.forEach.call(classes, function(e) {
        var command = ['setText', e];
        Array.prototype.forEach.call(e.classList, function(c) {
            slots[c] = command;
        });
    });
    var attributes = proto.querySelectorAll('[data-attr]');
    Array.prototype.forEach.call(attributes, function(e) {
        var matches = e.getAttribute('data-attr').match(tokens);
        if (matches) {
            slots[matches[1]] = ['setAttr', e, matches[2]];
        }
        e.removeAttribute('data-attr');
    });
    return slots;
};
Template.prototype.render = function(data) {
    Object.getOwnPropertyNames(data).forEach(function(name) {
        var cmd = this.slots[name];
        if (cmd) {
            this[cmd[0]].apply(this, cmd.slice(1).concat(data[name]));
        }
    }, this);
    return this.proto.cloneNode(true);
};
Template.prototype.setText = (function() {
    var d = document.createElement('div');
    var txtprop = (d.textContent === '') ? 'textContent' : 'innerText';
    d = null;
    return function(elem, val) {
        elem[txtprop] = val;
    };
}());
Template.prototype.setAttr = function(elem, attrname, val) {
    elem.setAttribute(attrname, val);
};



var tpl = new Template('<p data-attr="cloneid id">This is clone number <span class="clonenumber">one</span>!</p>');

var tpl_data = {
    cloneid: 0,
    clonenumber: 0
};
var df = document.createDocumentFragment();
for (var i = 0; i < 100; i++) {
    tpl_data.cloneid = 'id' + i;
    tpl_data.clonenumber = i;
    df.appendChild(tpl.render(tpl_data));
}
document.body.appendChild(df);