Question

我试图扩展DocumentFragment对象。

function DocFragment() {
    this.addHTML = function(html) {
        var div = document.createElement("div");
        div.innerHTML = html;
        while(div.firstChild) this.appendChild(div.firstChild);
    };
}
DocFragment.prototype = document.createDocumentFragment();

var doc = new DocFragment();
doc.addHTML("<b>after</b><i>list</i>");

但我在Illegal Invocation行遇到this.appendChild错误。我知道扩展主机对象是一个坏主意，我只是好奇为什么会出现这个错误？除了将一些方法传递给像function addHTML(doc, html)之类的函数之外，还有其他任何方法可以向DocumentFragment添加一些方法吗？

Answer 1

这或多或少是document.createDocumentFragment()和new DocumentFragment()之间的差异。 document.createDocumentFragment()执行一些无法复制的不透明初始化。

是否有其他适当的方法可以将某些方法添加到DocumentFragment，同时将其传递给function addHTML(doc, html)之类的函数？

从字面上看，你可以扩展它的原型：

DocumentFragment.prototype.addHTML = function (html) {
    // …
};

您还可以采用“jQuery方法”（包装器）：

function DocFragment() {
    this.fragment = document.createDocumentFragment();
}

DocFragment.prototype.addHTML = function (html) {
    // Use this.fragment
};

// Copy properties and methods as necessary

虽然定义addHTML(doc, html)比这两者都要清晰得多。

Answer 2

您可以尝试直接扩展DocumentFragment的原型。

DocumentFragment.prototype.addHTML = function(html) {
    var div = document.createElement("div");
    div.innerHTML = html;
    while(div.firstChild) this.appendChild(div.firstChild);
};

或者如果你对此感到娇气，你可以尝试扩展（在jQuery或Underscore或其他东西中），如下所示：

var DocFragment = _(DocumentFragment).extend();

在这个扩展的DocumentFragment中非法调用的原因是什么？

2 个答案: