我想用新方法扩展香草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);
优点和缺点与上面的“缺点”和“优点”相反。
有最佳实践吗?我是否缺少要考虑的利弊?谢谢。