我正在尝试向 JavaScript DOM 添加简单的函数，例如一个addClass函数，我首先使用以下代码实现了它：
Element.prototype.addClass = function(className) {
this.className += ' ' + className;
};
然而，经过大量阅读（http://perfectionkills.com/whats-wrong-with-extending-the-dom/很好），由于多种原因，这似乎是扩展 DOM 的一种糟糕方式。
上述文章指出：
整个 DOM 扩展混乱的最常见替代方案之一是对象包装器
这很好，如果你想扩展 DOM，显然普遍的共识是使用对象包装器。问题是我在任何地方都找不到任何关于你如何实际使用对象包装器来扩展 DOM 的好例子......
任何人都可以给我一个如何做到这一点的例子吗？也许使用上面的代码？
Object wrappers are more expensive than extensions because you need to create a new object, but they are safer.
A simple implementation that wraps only a single element could look like this:
(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;
}
})();
Then you could make a new wrapper, and to be more efficient, you could reuse it with various elements.
var wrp = wrap(document.body);
wrp.addClass("foo");
wrp.swap(document.body.firstElementChild);
wrp.addClass("bar");
Another feature you could implement would be to add return this; to all the wrapper methods. That way you could chain your function calls if you like.
var wrp = wrap(document.body);
wrp.addClass("foo")
.swap(document.body.firstElementChild)
.addClass("bar");
You could also implement your wrapper to hold multiple elements at numeric indices like an Array, or better, simply hold an Array of elements.
我认为 jQuery 是对象包装器的一个重要例子。主要是你只是使用它$(domElement)来获得一些额外的功能。
你可以这样做：
var wrapper = function(el){
return {
go: function(){
console.log('go with', el);
}
}
};
wrapper(someEl).go();