Question

我正在尝试向JavaScript DOM添加简单的函数，例如addClass函数，我首先用以下代码实现了它：

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

然而，经过多次阅读（http://perfectionkills.com/whats-wrong-with-extending-the-dom/很好），出于多种原因，这似乎是扩展DOM的一种可怕方式。

上述文章指出：

这整个DOM混乱的最常见替代方案之一扩展名为对象包装器

哪个好，显然普遍的共识是如果你想扩展DOM就使用Object包装器。问题是我无法在任何地方找到关于如何实际使用对象包装器来扩展DOM的任何好例子......

有人能举例说明怎么做吗？也许使用上面的代码？

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");

你也可以实现你的包装器来保存多个元素，如数组索引，或者更好，只需保存一个元素数组。

Answer 2

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

你可以这样做：

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

Answer 3

我认为在javascript中扩展本机行为并不好。

我在您发布extending-built-in-native-objects-evil-or-not

的同一网站上发现了另一篇帖子

所以我会说我不想扩展javascript提供给我们的东西。

使用对象包装器来扩展JavaScripts DOM？

3 个答案: