Javascript 包装DOM元素或使用实用程序类

我正在开发一个用于创建UI组件的自定义js库，我想知道（并理解）以下两种方法的影响：

（下面的代码只是为了说明概念）

第一种方法是封装元素：

function wrapElement(id) {
    var el = document.getElementById(id);
    return {
        el:el,
        hide:function() {
          // set el.style.display to 'none'
        },
        show:function() {
           // set el.style.display to ''
        },
        getSize:function() {
           // get the size of the el
        }   
    }
}

var myEl = wrapElement('abc');
myEl.hide();

第二种方法是通过实用程序类操纵元素：

var ElementUtil = {
    get:function(id) {
        return document.getElementById(id);
    },
    hide:function(el) {
        // set the el.style.display to 'none'
    },
    show:function(el) {
        // set the el.style.display to ''
    },
    getSize:function(el) {
        // get the size of the el
    }
}

var myEl = ElementUtil.get('abc');
ElementUtil.hide(myEl);

如果我们考虑内存消耗和性能，上面哪一个更好

（请注意：我不想使用预先存在的库，如jQuery等）

---

非常感谢您的建议或指导。

第一个解决方案将占用更多内存。每次包装对象时，都会创建一个指向元素“el”加上3个函数的额外指针。每次包装ID时都要创建这些函数

---

第二种解决方案只创建一次函数，并将指向元素的指针返回给调用者，因此节省了更多的内存和时间。

我采用第一种方法，比较

ElementUtil.hide（myEl）；ElementUtil.show（myEl）

类似于

wraplement（'abc'）.hide（）.show（）

我对第一种方法的关注是，如果我有许多需要操作的元素，那么我将创建很多“开销”对象。对此有何看法？您可以使用构造函数并与所有实例共享原型中的方法。我一直认为，通过向原型添加自定义行为来扩展DOM元素是一件不好的事情，而且并不总是跨浏览器兼容的！因此，如果我使用第二个选项，那么除了将el.mydata={..}添加到元素本身之外，我没有保存给定元素的元信息的真正方法。这样做有什么坏处吗？jQuery就是这么做的，但是他们花了很多时间编写这个库来帮助防止内存泄漏。他们还选择了你的混合方法。他们没有保留一个元素，而是保留了一个集合（这是经常使用的！），但随后他们将方法放入原型（或其他对象）中，这样它们就不会在每次包装时都被创建。我倾向于使用第二种方法。唯一让我担心的是附加的事件处理程序。特别是当元素被移除的时候，你一定要关心，因为这是一个很大很大的任务。我很好奇为什么你这么反对jQuery，因为它提供了你所说的所有功能，而且它已经调试和测试了很多年。或者任何其他已经这样做的图书馆。另外，如果你觉得我的回答有用，请接受。谢谢你的回答。我计划构建一个新的js应用程序框架（是的，我们需要另一个：-）。目前我正在调查各种可能性。我绝对不反对jquery。我读到angular正在使用它的精简版本。因为我不打算支持较旧的浏览器，所以我想知道这个事件在多大程度上会成为一个问题。