时间戳

首页 > 解决方案 > JavaScript：导入模块或向“文档”添加功能？

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

问题描述

我想用新方法扩展 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();

优点：

缺点：

方法 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);

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

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

标签： javascriptweb-applicationsfrontend

解决方案

刚刚发现一篇深入的文章分析了为什么不推荐方法 A：http : //perfectkills.com/whats-wrong-with-extending-the-dom，那么要点是：

  1. 缺乏规范。该标准不要求Document和Element和其他人被暴露。

  2. 宿主对象没有规则（DOM 对象是宿主对象）：它们的行为依赖于实现。

  3. 名称冲突。

  4. 性能开销。

  5. 浏览器中的错误，主要在 IE 和某些版本的 Safari 中。

推荐阅读