使用对象包装器扩展JavaScript的DOM？

Question

我正在尝试为JavaScript DOM添加简单的功能，例如addClass函数。我首先使用以下代码实现了这个功能：

Element.prototype.addClass = function(className) {
    this.className += ' ' + className;
}; 

然而，在阅读了大量文献之后（http://perfectionkills.com/whats-wrong-with-extending-the-dom/ 是一篇好文章），发现这是一种极为糟糕的扩展DOM的方式，原因有很多。

上面的文章指出：

引用块中：

其中最常见的替代整个DOM混乱的方法是对象包装器

这很好，显然普遍的共识是如果您想扩展DOM，则使用对象包装器。问题在于，我找不到任何好的例子来说明如何实际使用对象包装器来扩展DOM...

有人能给我一个示例吗？也许可以使用上面的代码？

- Sean

---

你为什么需要扩展DOM？你是想添加那些jQuery等库中没有的功能吗？ - Neil

不，这个功能在像jQuery这样的库中很常见（我很确定jQuery有一个addClass函数？），但是我不能在我正在工作的项目中使用库，所以想通过创建一些标准函数来简化我的生活。 - Sean

@SeanDunwoody：你支持哪些浏览器？我最近没有研究过，但我猜自那篇文章写出来以来情况已经平稳了一些。 - user1106925

如果你需要DOM（集合）包装器的示例，请看jQuery。 - Bergi

此外，我知道这只是一个例子，但请记住，新的浏览器在元素上有.classList属性，它是一个具有操作.className属性的方法的对象。 - user1106925

@squint 我支持IE7+，因此有一些我想要规范化/添加功能的事情。 - Sean

Answer 1

对象包装器比扩展更昂贵，因为你需要创建一个新的对象，但它们更安全。

仅封装单个元素的简单实现可能如下所示：

(function() {
    window.wrap = function(el) {
        return new Wrapper(el);
    };

    function Wrapper(el) {
        this.element = el;
    }

    Wrapper.prototype.addClass = function(cls) {
        if (this.element)
            this.element.className += " " + cls;
    }
    Wrapper.prototype.swap = function(el) {
        this.element = el;
    }
})();

然后，您可以创建一个新的包装器，并且为了更高效，您可以将其与各种元素重复使用。

var wrp = wrap(document.body);

wrp.addClass("foo");
wrp.swap(document.body.firstElementChild);
wrp.addClass("bar");

你可以实现的另一个功能是在所有包装方法中添加return this;。这样，如果你喜欢，就可以链接你的函数调用。

var wrp = wrap(document.body);

wrp.addClass("foo")
   .swap(document.body.firstElementChild)
   .addClass("bar");

你也可以实现一个包装器来保存多个数值索引的元素，就像数组一样，或者更好的是，直接保存一个元素数组。

- user1106925

Answer 2

我认为jQuery是一个很好的对象封装的例子。主要你只需要像$(domElement)这样使用它来获得一些额外的功能。

你可以做一些类似的事情：

var wrapper = function(el){
  return {
    go: function(){
      console.log('go with', el);
    }
  }
};
wrapper(someEl).go();

- neo

---

不，这不是“额外”的功能 - 它只是不同的功能。 - Bergi

可能是我没有理解问题，因为您可以简单地按照上述方式实现“addClass”。 - neo

Answer 3

我认为在JavaScript中扩展本地行为并不好。

我在同一网站上找到了另一篇文章，你发布了扩展内置本机对象是邪恶的还是不邪恶的。

因此，我会说我不喜欢扩展JavaScript提供给我们的东西。

- haudoing

---

扩展DOM！= 扩展本地对象。他已经阅读了那篇文章，这就是他提问的原因。无论你喜欢与否，这都不太重要。 - Bergi

我知道这不是同样的东西，但是这篇文章中的下行概念是一样的。我不知道他以前是否阅读过那篇文章，似乎我提供的链接是不同的。 - haudoing

是的，不同且不相关。他在链接中很好地解释了概念缺陷：http://perfectionkills.com/whats-wrong-with-extending-the-dom/。 - Bergi

抱歉，他提供的链接更相关且更详细地描述了这个东西。我的关注点太少了，只考虑到了冲突。 - haudoing