自定义属性 - 是还是不是？

javascript html xhtml custom-attribute

2022-08-30 00:29:49

最近，我越来越多地阅读有关人们在HTML标记中使用自定义属性的信息，主要是为了嵌入一些额外的数据位以用于javascript代码。

我希望收集一些关于使用自定义属性是否是一种好习惯的反馈，以及一些替代方案是什么。

它似乎可以真正简化服务器端和客户端代码，但它也不符合W3C标准。

我们是否应该在 Web 应用中使用自定义 HTML 属性？为什么或为什么不呢？

对于那些认为自定义属性是一件好事的人来说：使用它们时要记住哪些事项？

对于那些认为自定义属性是坏事的人来说：你用什么替代方案来完成类似的事情？

更新：我最感兴趣的是各种方法背后的推理，以及为什么一种方法比另一种方法更好的观点。我认为我们都可以想出4-5种不同的方法来完成同样的事情。（隐藏元素，内联脚本，额外类，解析ID信息等）。

更新 2：看起来HTML 5属性功能在这里有很多支持（我倾向于同意，它看起来像一个可靠的选择）。到目前为止，我还没有看到太多反驳这个建议的方式。使用此方法是否有任何问题/陷阱需要担心？或者它只是对当前W3C规范的“无害”无效？data-

答案 1

HTML 5 显式允许以开头的自定义属性。因此，例如，是有效的。由于它受到标准的正式支持，我认为这是自定义属性的最佳选择。而且它不需要你用黑客来重载其他属性，所以你的HTML可以保持语义。data<p data-date-changed="Jan 24 5:23 p.m.">Hello</p>

来源：http://www.w3.org/TR/html5/dom.html#embedding 自定义不可见数据与数据*属性

答案 2

以下是我最近一直在使用的一种技术：

<div id="someelement">

    <!-- {
        someRandomData: {a:1,b:2},
        someString: "Foo"
    } -->

    <div>... other regular content...</div>
</div>

注释对象与父元素相关联（即#someelement）。

这是解析器：http://pastie.org/511358

要获取任何特定元素的数据，只需调用 parseData，并引用作为唯一参数传递的该元素：

var myElem = document.getElementById('someelement');

var data = parseData( myElem );

data.someRandomData.a; // <= Access the object staight away

它可以比这更简洁：

<li id="foo">
    <!--{specialID:245}-->
    ... content ...
</li>

访问它：

parseData( document.getElementById('foo') ).specialID; // <= 245

使用它的唯一缺点是它不能与自闭合元素一起使用（例如），因为注释必须在元素内才能被视为该元素的数据。<img/>

编辑：

这种技术的显著优点：

易于实施
不会使 HTML/XHTML 失效
易于使用/理解（基本 JSON 表示法）
不显眼，语义比大多数替代品更干净

以下是解析器代码（从上面的 http://pastie.org/511358 超链接复制，以防它在 pastie.org 上不可用）：

var parseData = (function(){

    var getAllComments = function(context) {

            var ret = [],
                node = context.firstChild;

            if (!node) { return ret; }

            do {
                if (node.nodeType === 8) {
                    ret[ret.length] = node;
                }
                if (node.nodeType === 1) {
                    ret = ret.concat( getAllComments(node) );
                }
            } while( node = node.nextSibling );

            return ret;

        },
        cache = [0],
        expando = 'data' + +new Date(),
        data = function(node) {

            var cacheIndex = node[expando],
                nextCacheIndex = cache.length;

            if(!cacheIndex) {
                cacheIndex = node[expando] = nextCacheIndex;
                cache[cacheIndex] = {};
            }

            return cache[cacheIndex];

        };

    return function(context) {

        context = context || document.documentElement;

        if ( data(context) && data(context).commentJSON ) {
            return data(context).commentJSON;
        }

        var comments = getAllComments(context),
            len = comments.length,
            comment, cData;

        while (len--) {
            comment = comments[len];
            cData = comment.data.replace(/\n|\r\n/g, '');
            if ( /^\s*?\{.+\}\s*?$/.test(cData) ) {
                try {
                    data(comment.parentNode).commentJSON =
                        (new Function('return ' + cData + ';'))();
                } catch(e) {}
            }
        }

        return data(context).commentJSON || true;

    };

})();