Question

我想检查库对传递给它的视频元素有什么作用，所以我天真地做到了：

cosnt videoElement = new Proxy(document.querySelector('video'), {
    get(target, key) {
        const name = typeof key === 'symbol'? key.toString() : key;
        console.info(`Accessing video.${ name }`)
        return target[key];
    }
});

但是我得到一个错误：

TypeError：无法在“节点”上执行“包含”：参数1不是“节点”类型。

有没有办法使这项工作成功？

编辑：我已经了解了一些知识，并以此将我的代理更新为休假：

cosnt videoElement = document.querySelector('video');
cosnt proxyElement = new Proxy(videoElement , {
    get(target, key) {
        if (key == '___element___') {
            return video;
        }

        const name = typeof key === 'symbol'? key.toString() : key;
        console.info(`Accessing video.${ name }`);
        const value = video[key];
        if (value instanceof Function) {
            return video[key].bind(video);
        } else {
            return video[key];
        }
    },
    set(target, key, value) {
        const name = typeof key === 'symbol'? key.toString() : key;
        console.info(`Writing video.${ name } = ${ value }`);
        video[key] = value;
        return true;
    }
});

它是用于调试的，因此我编辑了编译后的代码，并用element.___element___替换了所有DOM操作引用。

接下来，我发现通过代理调用函数似乎存在问题，因此我添加了.bind(video)部分。

最后设置值被抛出。因此，我不得不用直接视频参考替换目标（事实上，我肯定用视频替换了所有目标参考），这使它起作用了……我不确定为什么或如何，但是确实如此。 / p>

问题是：

这真的应该是吗？（document.body.contains(myProxyElement)部分）
在代理内部进行设置时，将值设置为引发视频元素抛出异常，这是一个错误吗？（第三点，也有点，我想它已经连接了）

奖金：游乐场

const video = document.querySelector('video');
const proxy = new Proxy(video, {
  get(target, key) {
    console.log(`Getting video.${typeof key === 'symbol'? key.toString() : key}`);
    const value = video[key];
    if (value instanceof Function) {
      return value.bind(video);
    } else {
      return value;
    }
  },
  set(target, key, value) {
    console.log(`Setting video.${typeof key === 'symbol'? key.toString() : key} =`, value);
    video[key] = value;
    return true;
  }
});

proxy.muted = true;
proxy.play();
proxy.controls = true;
try {
  console.log(document.body.contains(proxy));
} catch (e) {
  console.error('DOM operation failed', e);
}

video { max-width: 100%; }

<video src="//vjs.zencdn.net/v/oceans.mp4">

Answer 1

如注释中已经提到的那样，调用Proxy时Node对象不会自动转换为document.body.contains(proxy)。

因此，您可以设置一个特定的密钥，该密钥将返回代理的目标：

const video = document.querySelector('video');
const proxy = new Proxy(video, {
  get(target, key) {
        const value = video[key];
        if (value instanceof Function) {
        return value.bind(video);
        } else if (key == 'target') {
        return target;
      } else {
        return value;
        }
  },
  set(target, key, value) {
    target[key] = value;
    return true;
  }
});

然后您可以这样做：

console.log(document.body.contains(proxy.target));

修改：

这真的应该是吗？（ document.body.contains（myProxyElement）部分）：

是的，我看不到其他方法。

在代理内部设置时设置视频元素抛出的值看起来很奇怪，这是一个错误吗？（第三点，我想也是已连接）：

由于我无法重现此问题，因此很难说。也许尝试将new Proxy(video, ...替换为new Proxy({}, ...，然后将视频设置为proxy.video = video（您还必须更新get和set中的逻辑），然后看看表现如何？

代理HTMLElement

1 个答案: