定义特性-是啊或不?

https://stackoverflow.com/questions/992115

13-09-2019
|

题

最近我已经阅读更多的和更多的人使用自定属性在其HTML tags，主要用于的目的嵌入了一些额外的数据用于javascript code.

我希望可以收集一些反馈是否使用自定属性是一个很好的做法，并且还有什么一些替代品。

这似乎是它真的可以简化既侧服务器和客户的代码，但它也不是W3C的标准。

我们应该使用的定义HTML特性，在我们的网络应用程序？为什么或者为什么不呢？

对于那些认为自定属性的一个良好的事情：都有些什么事，要记住当使用他们？

对于那些认为自定属性都是不好的事情：什么选择你用来完成类似的东西吗？

更新： 我最感兴趣的推理背后的各种方法，以及分为什么一个方法是比另一种更好。我认为，我们所有人都可以来4-5个不同的方式来完成同样的事情。(隐藏的因素，内联脚本，额外的课程，分析的信息，从身份证，等等)。

更新2： 它似乎是HTML5 data- 属性特征有很多的支持(和我倾向于同意，它看起来像一个坚实的选项)。到目前为止，我还没有看到太多的反驳这个建议。是否有任何问题/缺陷的担心使用这种方法?或是它只是一个'无害'宣告无效前W3C specs?

解决方案

HTML5明确允许自定属性的，开始 data.因此，例如， <p data-date-changed="Jan 24 5:23 p.m.">Hello</p> 是有效的。因为它的正式支持一个标准，我想这是最好的选择，对于定义属性。它不需要你超负荷的其他属性攻击，所以你HTML可以留语义。

资料来源： http://www.w3.org/TR/html5/dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes

其他提示

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

<div id="someelement">

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

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

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

这是解析器： 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;

    };

})();

您可以创建任何属性，如果你指定的模式为您的网页。

例如：

前页

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:addthis="http://www.addthis.com/help/api-spec">
...
<a addthis:title="" addthis:url="" ...>

的Facebook （甚至标记）

<html xmlns:og="http://opengraphprotocol.org/schema/" xmlns:fb="http://www.facebook.com/2008/fbml">
...
<fb:like href="http://developers.facebook.com/" width="450" height="80"/>

要避免使用的自定义属性的最简单方法是使用现有的属性。

使用有意义的，相关的类名。结果例如，做这样的事情：type='book'和type='cd'，代表书籍和光盘。类是多的代表有什么更好的东西的为的。

e.g。 class='book'

在过去

我已经使用了自定义属性，但说实话，是不是真的有必要为他们，如果你利用现有的属性在语义上有意义的方式。

要给予更具体的例子，假设你有一个网站给予链接到不同类型的商店。您可以使用以下内容：

<a href='wherever.html' id='bookstore12' class='book store'>Molly's books</a>
<a href='whereverelse.html' id='cdstore3' class='cd store'>James' Music</a>

CSS样式可以使用类似：

.store { }
.cd.store { }
.book.store { }

在我们看到，无论是链接到商店（相对于该网站上的其他不相关的链接）和一个是CD商店，而另一个是一个书店上述示例。

嵌入数据在dom和使用元数据对于 jQuery.

所有好的插件支持的元数据的插件(允许每个标签选择)。

它还允许无限复杂的数据/数据结构，以及作为关键的价值对。

<li class="someclass {'some': 'random,'json':'data'} anotherclass">...</li>

或

<li class="someclass" data="{'some':'random', 'json': 'data'}">...</li>

或

<li class="someclass"><script type="data">{"some":"random","json":"data"}</script> ...</li>

然后，得到的数据，像这样：

var data = $('li.someclass').metadata();
if ( data.some && data.some == 'random' )
alert('It Worked!');

我看到在使用现有的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类似技术。

我没有使用自定义属性，因为我正在输出 XHTML，因为我希望数据可由第 3 方软件机器读取（尽管，如果我愿意，我可以扩展 XHTML 架构）。

作为自定义属性的替代方案，我主要寻找 id 和 class 属性（例如正如其他答案中提到的）足够了。

另外，请考虑一下：

如果额外的数据既是人类可读的又是机器可读的，那么需要使用（可见的）HTML 标签和文本而不是自定义属性对其进行编码。
如果它不需要人类可读，那么也许可以使用以下方式对其进行编码 无形的 HTML 标签和文本。

有些人例外：它们允许自定义属性，在运行时通过客户端的 Javascript 添加到 DOM。他们认为这是可以的：由于自定义属性仅在运行时添加到 DOM，因此 HTML 不包含自定义属性。

不然。尝试这样的事情，而不是：

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

我们已经有了一个基于Web的编辑器，HTML理解的一个子集 - 一个非常严格的子集（即了解几乎普遍地通过邮件客户端）。我们需要表达的东西像<td width="@INSWIDTH_42@">在数据库中，但我们不能有，在DOM，否则浏览器在运行编辑器，怪胎（或更可能吓坏了比它可能在自定义属性焦虑不安）。我们想拖和下降，因此将其纯粹的DOM出局了，因为是jQuery的.data()（额外的数据没有得到正确复制）。我们可能还需要额外数据一起走在.html()乘坐。最终我们决定在编辑过程中使用<td width="1234" rs-width="@INSWIDTH_42@">，然后当我们发布这一切，我们会删除width，做一个正则表达式搜索和摧毁s/rs-width=/width=/g。

在第一的家伙写的大部分，这是对这个问题的验证纳粹用尽一切方法，以避免我们的自定义属性，但最终默许在没有其他似乎为我们所有的要求工作。它帮助时，他意识到，自定义属性永远不会出现在的电子邮件的我们没有考虑class按照我们的额外数据，但决定这将是两两害相权就越大。

我个人的喜欢的有干净的东西，并通过验证程序等，但作为一个公司职员我要记住，我的主要职责是推进公司的原因（让尽可能多的钱尽可能快地可能的话），而不是我的技术纯度自私的欲望。工具应该为我们工作;不是我们他们。

我认识的人都反对，但我想出了这个超短期的解决方案。如果你想使用自定义属性，像“雷”这样的例子：

<a href="test.html" mine-one="great" mine-two="awesome">Test</a>

然后你就可以运行该代码来获得一个物体后面，就像jquery.data（）一样。

var custom_props = {} ;
$.each($(".selector")[0].attributes, function(i,x) {
    if (this.specified && x.name.indexOf("mine-") !== -1) 
        self.new_settings[x.name.replace("modal-","")] = x.value;
});

规格：创建ASP.NET TextBox控件，其动态地自动格式化其作为一个文本数据属性“DecimalSeparator”和“ThousandsSeparator”，使用JavaScript 点击搜索结果这些性质从控制为JavaScript传输的一种方式是具有控制渲染出的自定义属性：

<input type="text" id="" decimalseparator="." thousandsseparator="," />

自定义属性容易由JavaScript访问。而同时使用的元素与自定义属性页不会验证，该页面的呈现会不会影响。点击搜索结果我只时，我想简单的类型，如字符串和整数关联到HTML与JavaScript中使用的元素使用这种方法。如果我想使HTML元素更容易识别，我会使用的的类和 ID 的属性。

我使用的自定义字段的所有例如时间

有关复杂的网络应用程序，我滴所有的地方自定义属性。

有关更多面向公众的网页我用的是“相对”属性，并且有倾倒的JSON我的所有数据，然后通过MooTools或jQuery的解码：

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

我想坚持使用HTML 5点的数据属性最近只是“准备”，但它不是天生呢。

自定义属性，在我的愚见，不应该被使用，因为它们不验证。替代的是，可以定义为单个元件的许多类，如：

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

许可以下： CC-BY-SA 和归因

不隶属于 StackOverflow