javascript - 我如何扩展一个 javascript 对象，以便在 native 没有 outerHTML 的浏览器中，我可以定义它？

Question

我找到了这个函数(虽然我忘了在哪里):

function outerHTML(node){
    // if IE, Chrome take the internal method otherwise build one
  return node.outerHTML || (
      function(n){
          var div = document.createElement('div'), h;
          div.appendChild( n.cloneNode(true) );
          h = div.innerHTML;
          div = null;
          return h;
      })(node);
}

但此函数通过调用 outerHTML(my_element) 而不是 my_element.outerHTML 来工作

我希望能够扩展一个 javascript DOM 元素对象，使其具有 outerHTML 元素，但如果存在则仍使用 native 元素。我该怎么做？

我想这样做的主要原因是因为 Firefox 本身没有 outerHTML 方法，但如果可用的话，我仍然想使用 native 实现，因为它们已经过全面测试，我觉得我可以相信他们。

更新:@Raynos 建议我不要对 outerHTML 执行上述操作，我应该做一些类似于 outerHTML 规范的事情。我找到了这个: How do I do OuterHTML in firefox?并且它不执行 .cloneNode，这会导致 FireFox 8.0.1 中的错误。
所以，根据@Raynos，我的解决方案是这样的:

if (!("outerHTML" in HTMLElement.prototype)) {
    Object.defineProperty(HTMLElement.prototype, "outerHTML", {
        get: getOuterHTML
    });
}


function getOuterHTML(){
    var parent = this.parentNode;
    var el = document.createElement(parent.tagName);
    el.appendChild(this.cloneNode(true));
    var shtml = el.innerHTML;
    return shtml;
}

Answer 1

你通常会做这样的事情:

if (!("outerHTML" in document.body)) {
    Object.defineProperty(Element.prototype, "outerHTML", {
        get: getOuterHTML,
        set: setOuterHTML
    });
}

然后您阅读 outerHTML specification并编写实现它的 getOuterHTML 和 setOuterHTML 函数。

注意:我强烈建议不要天真地实现不符合规范的 outerHTML 属性。当您的“版本”与 native 版本不同时，这将导致您在维护方面出现问题。特别是如果您向您的版本添加专有扩展或额外的“功能”

请注意，Object.defineProperty 在旧版浏览器中未定义。您可能需要使用 es5-shim 中的垫片