JavaScript:导入模块或向“文档”添加功能?

时间:2019-11-11 05:55:56

标签: javascript web-applications frontend

我想用新方法扩展香草DOM对象,例如通过定义新方法document.createElement()扩展createElementWithAttrs()或扩展Element,但以下两种方法中的最佳做法是?

方法A

(就像Chrome DevTools does it一样,但这可能是因为代码是从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一样被使用

缺点:

  • 必须在HTML中插入带有dom.js标签的<script>
  • 有时会使读者感到困惑(包括我自己,因为经过很长一段时间我可能会忘记)。

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

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

有最佳实践吗?我是否缺少要考虑的利弊?谢谢。

1 个答案:

答案 0 :(得分:0)

刚刚找到了一篇深入的文章,分析了为什么不推荐使用方法A http://perfectionkills.com/whats-wrong-with-extending-the-dom,然后要点是:

  1. 缺乏规范。该标准不需要公开DocumentElement及其他。

  2. 主机对象没有规则(DOM对象是主机对象):它们的行为取决于实现。

  3. 名称冲突。

  4. 性能开销。

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