JavaScript:扩展元素原型(prototype)

Question

我看到很多关于扩展 Element 的讨论。据我所知，这些是主要问题:

• 可能会和其他库冲突，
• 它将未记录的功能添加到 DOM 例程中，
• 它不适用于旧版 IE，并且
• 它可能会与 future 的变化发生冲突。

给定一个没有引用其他库的项目，文档更改，并且不在乎历史浏览器:

是否有任何技术理由不扩展 Element 原型(prototype)。这是一个有用的示例:

Element.prototype.toggleAttribute=function(attribute,value) {
    if(value===undefined) value=true;
    if(this.hasAttribute(attribute)) this.removeAttribute(attribute);
    else this.addAttribute(attribute,value);
};

我看过太多关于扩展原型(prototype)的弊端而没有提供合理解释的评论。

注1:上面的例子可能太明显了，因为toggleAttribute是 future 可能添加的那种方法。为了便于讨论，假设它名为 manngoToggleAttribute。

注意 2:我已经删除了该方法是否已经存在的测试。即使这样的方法已经存在，覆盖它也更容易预测。无论如何，我假设这里的要点是方法尚未定义，更不用说实现了。这就是重点。

注意 3:我看到现在有一​​个名为 toggleAttribute 的标准方法，它的行为并不完全相同。经过修改，以上内容将是一个简单的 polyfill。这不会改变问题的重点。

Answer 1

还好吗？技术上是的。您应该扩展 native API 吗？根据经验，没有。不幸的是，答案更为复杂。如果您正在编写像 Ember 或 Angular 这样的大型框架，那么这样做可能是个好主意，因为如果更好的 API 便利性，您的消费者将受益。但如果你只是为自己做这件事，那么经验法则就是不行。

理由是这样做会破坏对该对象的信任。换句话说，通过添加、更改、修改原生对象，它不再遵循任何其他人(包括你 future 的自己)所期望的已被充分理解和记录的行为。

这种风格隐藏了可能不被注意的实现。 这个新方法是什么？，它是一个 secret 的浏览器吗？，它有什么作用？，我发现了一个错误吗？立即向 Google 或 Microsoft 报告此问题？。有点夸张，但重点是 API 的真相现在已经改变，在这种情况下是出乎意料的。它使可维护性需要额外的思考和理解，如果您只是使用自己的函数或包装器对象则不会如此。这也使更改变得更加困难。

相关帖子:Extending builtin natives. Evil or not?

与其试图破坏别人的(或标准的)代码，不如使用您自己的代码。

function toggleAttribute(el, attribute, value) {
  var _value = (value == null ? true : value;
  if (el.hasAttribute(attribute)) {
    el.removeAttribute(attribute);
  } else {
    el.addAttribute(attribute, _value);
  }
};

现在它是安全的、可组合的、可移植的和可维护的。再加上其他开发人员(包括您 future 的自己)不会摸不着头脑，不知道这个没有记录在任何标准或 JS API 中的神奇方法来自哪里。