JavaScript：导入模块或向“文档”添加功能？

Question

我想用新方法扩展 vanilla DOM 对象，例如document.createElement()通过定义一个新方法来createElementWithAttrs()扩展，或者扩展Element但以下哪两个是最佳实践？

方法A

（就像Chrome DevTools 是如何做到的，但可能是因为代码在 ES2015 之前很久就继承自 WebKit）

将新方法添加到现有 DOM 类原型中。

// dom.js

Document.prototype.createElementWithClass = (tagName, className) => { ... };

Element.prototype.findEnclosingShadowRoot = () => { ... };

// probably a few more

// someScriptName.js

const e1 = document.createElementWithClass(...);

...

const shadow = e2.findEnclosingShadowRoot();

优点：

简洁直观，因为它们可以像本地 DOM 的一部分一样使用

缺点：

必须dom.js用<script>标签插入HTML

有时会让读者感到困惑（包括我自己，因为时间长了我可能会忘记）。

方法B：

在 ES 模块中定义它们。

// dom.js

export const createElementWithClass = (tagName, className) => { ... };

export const findEnclosingShadowRoot = (element) => { ... };

// probably a few more

// someScriptName.js

import * as dom from './dom.js';

const e1 = dom.createElementWithClass(...);

...

const shadow = dom.findEnclosingShadowRoot(e2);

优点和缺点与上面的“缺点”和“优点”相反。

有最佳实践吗？我是否错过了一些需要考虑的优点/缺点？谢谢。

Answer 1

刚刚找到了一篇深入分析为什么不推荐方法 A 的文章：http&nbsp;:&nbsp;//perfectkills.com/whats-wrong-with-extending-the-dom，然后要点是：缺乏规范。该标准不要求Document，并Element和其他人被暴露。宿主对象没有规则（DOM 对象是宿主对象）：它们的行为取决于实现。名称冲突。性能开销。浏览器中的错误，主要是在 IE 和某些版本的 Safari 中。