Question

我正在开发一个用于创建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这样的预先存在的库）

非常感谢任何建议或指示。

Answer 1

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

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

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

1 个答案: