无法将 html 元素周围的代理传递给 appendChild

Question

我写了一个瘦包装器，它传递了一个由document.createElement创建的节点并添加了一些方法。 这个包装器是用代理实现的。 我所做的只是捕捉一些吸气剂。

  return new Proxy(node, {
    get (target, prop) {
      if (prop === 'node') return target

      if (wFuncs[prop]) {
        return Reflect.get(target, wFuncs[prop]).bind(target)
      }

      return Reflect.get(target, prop)
    }
  })

我本来希望能够将这样的代理传递给appendChild ，因为它仍然是Node的一个实例，并且具有来自 html 元素的所有属性和方法。 但是，appendChild 表示传递的元素不是节点：

TypeError：无法在“Node”上执行“appendChild”：参数 1 不是“Node”类型

关于如何解决这个问题的任何想法？

Answer 1

我们可以重新声明全局 appendChild 行为。 像这样：

1. 创建内部__element属性，返回一个真实的节点

return new Proxy(node, {
        get (target, prop) {
          if (prop === 'node') return target
          if (prop === '__element') return node
    
          if (wFuncs[prop]) {
            return Reflect.get(target, wFuncs[prop]).bind(target)
          }
    
          return Reflect.get(target, prop)
        }
      });

2. 更改全局 appendChild

Node.prototype.appendChild = function (el) {
  if (el["__element"]) {
    return _appendChild.call(this, el["__element"]);
  } else {
    return _appendChild.call(this, el);
  }
};