最近我读到越来越多关于人们在HTML标记中使用自定义属性的文章,主要是为了在javascript代码中嵌入一些额外的数据。

我希望收集一些关于使用自定义属性是否是一种好的实践的反馈,以及有哪些替代方案。

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

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

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

对于那些认为自定义属性是坏事的人:您使用什么替代方法来完成类似的事情?

更新:我最感兴趣的是各种方法背后的原因,以及为什么一种方法比另一种方法更好。我认为我们都可以想出4-5种不同的方法来完成同样的事情。(隐藏元素,内联脚本,额外的类,从id解析信息,等等)。

更新2:似乎HTML 5数据属性特性在这里有很多支持(我倾向于同意,它看起来是一个可靠的选项)。到目前为止,我还没有看到对这个建议的反驳。使用这种方法有什么问题/陷阱需要担心吗?或者仅仅是对当前W3C规范的“无害”的无效?


当前回答

这是我最近在用的一个技巧:

<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;

    };

})();

其他回答

不。试试这样做:

<div id="foo"/>

<script type="text/javascript">
  document.getElementById('foo').myProperty = 'W00 H00! I can add JS properties to DOM nodes without using custom attributes!';
</script>

我认为使用现有的XHTML特性而不破坏任何东西或扩展名称空间没有问题。让我们来看一个小例子:

<div id="some_content">
 <p>Hi!</p>
</div>

如何在没有附加属性的情况下向some_content添加附加信息?像下面这样添加另一个标签怎么样?

<div id="some_content">
 <div id="some_content_extended" class="hidden"><p>Some alternative content.</p></div>
 <p>Hi!</p>
</div>

它通过您选择的定义良好的id/扩展名“_extended”及其在层次结构中的位置来保持关系。我经常将这种方法与jQuery一起使用,而不是实际使用Ajax之类的技术。

对于复杂的web应用程序,我将自定义属性放在所有地方。

对于更多面向公众的页面,我使用“rel”属性,并将我所有的数据转储为JSON,然后用MooTools或jQuery解码:

<a rel="{color:red, awesome:true, food: tacos}">blah</a>

我试图坚持HTML 5数据属性最近只是“准备”,但它还没有自然地到来。

在我看来,自定义属性不应该被使用,因为它们不具有有效性。除此之外,你可以为一个元素定义很多类,比如:

<div class='class1 class2 class3'>
    Lorem ipsum
</div>

我没有使用自定义属性,因为我输出的是XHTML,因为我希望数据能够被第三方软件机器读懂(不过,如果我愿意,我也可以扩展XHTML模式)。

作为自定义属性的替代品,我发现id和class属性(例如,在其他答案中提到的)足够了。

另外,考虑一下这个:

如果额外的数据既能被人读又能被机器读,那么就需要使用(可见的)HTML标记和文本进行编码,而不是作为自定义属性。 如果它不需要人类可读,那么也许可以使用不可见的HTML标记和文本进行编码。

有些人例外:他们允许自定义属性,在运行时通过Javascript在客户端添加到DOM中。他们认为这是可以的:因为自定义属性只在运行时添加到DOM, HTML不包含自定义属性。