DRY属性选择

Question

说我在页面上有一个元素：

<div data-name='foo'>

获取属性值的最佳方法是什么？还有比$('[data-name]').attr('data-name')或$('[data-name]').data('name')还要干的东西吗？

Answer 1

我不知道这与“不要重复自己”有什么关系，但是如果你没有对这个节点的缓存引用，你就必须使用它，而不是详细的，调用。

对节点至少有一个id可能是个好主意。与该属性选择器相比，DOM的查询快速点亮。但毕竟，它仍然是在变量中存储引用的最快技术，比如

var myNode = $('[data-name]');

然后在整个应用程序中使用该变量

myNode.data( 'name' );

Answer 2

我不知道你如何定义“DRY” ...
if (x < 0) x = 1不是“DRY”，因为你写了两次x？

无论如何使用当前的DOM结构，没有没有。选择器效率低，这更重要！

您可以为元素指定一个id，使代码更快。

<div id='foo' data-name='foo'> </div>

...

$('#foo').data('name'); // That's more like it.

Answer 3

你可以有一个插件做这样的事情。不过，我不确定额外的开销是否值得。

function getData(varName) {

  var selector = '[data-' + varName + ']';
  return $(selector).data(varName);

}

（未经测试）

Answer 4

没有标记限定符（例如div[data-name]），您的选择器效率非常低，因为它必须遍历整个DOM以检查匹配元素。

最好识别一个特定的ID（甚至是一个类）以帮助选择引擎并限制必须搜索多少DOM。

Answer 5

只要你不在任何地方重复，（即缓存结果），我真的不知道你怎么能得到更多的干。

var name = $('[data-name]').data('name');

你在技术上还没有重复自己。