如何扩展javascript对象,以便在本机上没有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元素,但如果存在则仍然使用本机元素.我怎么做？

我想这样做的主要原因是因为Firefox本身没有outerHTML方法,但是我仍然希望使用本机实现(如果可用),因为它们已经过彻底测试,我觉得我可以信任它们.

更新:@Raynos建议我不要为outerHTML做上面的事情,而且我应该做一些类似于outerHTML规范的事情.我发现了这个: 我如何在firefox中做OuterHTML？ 并且它没有.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规范以及实现它的编写getOuterHTML和setOuterHTML函数.

注意:我强烈建议不要天真地实现outerHTML不符合规范的属性.当您的"版本"与本机版本的工作方式不同时,这将导致维护问题.特别是如果您在您的版本中添加了专用扩展或额外的"功能"

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