DRY属性选择

DRY attribute selection

本文关键字：选择 属性 DRY      更新时间：2023-09-26

假设页面上有一个元素：

<div data-name='foo'>

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

我不知道你如何定义"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.

我不知道这与"Don't Repeat Yourself"有什么关系，但如果你没有对此节点的缓存引用，你就必须使用那个相当冗长的调用。

至少为节点提供一个id可能是个好主意。与该属性选择器相比，它的DOM查询运行得很快。但毕竟，将引用存储在变量中仍然是最快的技术，比如

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

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

myNode.data( 'name' );

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

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

（未测试）

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

最好识别一个特定的ID（甚至一个类）来帮助选择器引擎并限制DOM的搜索量。

只要你不到处重复（即缓存结果），我真的看不出你怎么能得到更多的DRY。

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

从技术上讲，你还没有重复自己。

相关文章：