javascript - 寻找正确的模式来扩展 DOMElements

Question

我是 js 新手，需要使用自定义方法和数据扩展 dom 元素。

对于数据，我使用 html 中内置的数据集属性。对于方法我不知道该怎么做。

是否有众所周知的最佳实践来实现这一目标？

Answer 1

围绕 DOM 元素创建包装对象并与它们交互，而不是直接与 DOM 元素交互，这是扩展元素功能的最佳方式，也是 jQuery 和许多其他库所采用的方法。一些库(尤其是 Prototype)直接扩展了 DOM 原型(prototype)，但这是 bad idea而且不可靠。

这是一个简单的包装示例:

function createElementWrapper(el) {
    return {
        element: el,
        hide: function () {
            el.style.display = "none";
        }
    };
}

var bodyWrapper = createElementWrapper(document.body);
bodyWrapper.hide();