这可能是一个天真的问题，但我正在学习jQuery Mobile并且不确定为什么所有内容都与data-role属性相关。似乎即使角色与样式相关，他们也使用data-role而不是class
我理解，对于语义，data-role在很多情况下都有意义，但它似乎在这里被滥用了。这种查找不会更慢吗？
为什么他们使用data-role而不是类？
感谢您的任何见解。
答案 0 :(得分：6)
data 他们可以简单地使用role作为属性（就像其他框架一样），但这会产生
结果HTML无效。因此，data-会添加到每个属性名称。
我认为，主要的目的是尽可能将视图与逻辑分开。在较大的项目中，CSS和JavaScript不是由同一个人编写的。
答案 1 :(得分：0)
它提供了对强大样式技术的大量控制，特别是与jquery ui结合使用时。我使用jquery mobile，我使用他们的工具轻松制作主题滚轮，现在当我使用像data-role-header，footer listview这样的元素时。我毫不费力地看起来很棒。您可以在代码中添加数百个数据角色属性，以轻松创建统一，用户友好的页面。我个人喜欢data-role-page属性来在单个HTML页面中创建多个视图。它们易于使用，因此了解它们的最佳方法是与它们一起玩。
答案 2 :(得分：0)
请查看数据角色here的说明。
data-role属性用于控制元素小部件的行为。例如，如果是按钮，您可以使用input type="button"（在这种情况下不需要data-role="button"属性，因为这是此元素的标准行为）但您可以使用a元素，然后您需要明确提供：
<a href="" data-role="button"></a>
所以对我来说这是一个非常有用的解决方案，因为移动设备上的按钮行为对于不同的元素可以是相同的。您只需要提供data-role属性，jQuery将为您完成剩下的工作。
这是主jQuery Mobile网站的引用：
jQuery移动框架采用“少写，做多”的口头禅 下一级：而不是为每个移动设备编写独特的应用程序或 操作系统，jQuery移动框架允许您设计单个 高品牌的网站或应用程序，适用于所有流行的 智能手机，平板电脑和桌面平台。
他们希望以相同的方式为您拥有的每个控件设置样式，以便实现write less, do more方法。因此，jQuery Mobile为具有相同角色的所有元素添加相同的样式，以使事物看起来相同，但这并不意味着您无法更改它。这只是意味着他们关心您网站的美观，并且他们知道每个按钮应该与其他按钮相似。
我前面提到的页面也说：
jQuery Mobile框架使用HTML5数据属性来实现 基于标记的小部件初始化和配置。
因此，您正在阅读HTML，并且您知道元素在不查看CSS文件的情况下的行为 - 如果您不是前端开发人员，我认为这很酷。当然前端开发人员可以覆盖CSS，但他必须遵守规则，例如如果data-inline设置为true，那么他应该设置样式，因为元素必须遵循此规则（inline）。
答案 3 :(得分：0)
jQueryMobile为页面添加了一个加载事件处理程序，它处理DOM以查找各种data-xxx属性。当它找到那些时，它不仅仅是对元素进行样式化。
在许多情况下，它会创建一种与数据角色绑定的窗口小部件。例如，＆lt; div data-role =“header”＆gt;被转换为工具栏小部件，其创建可以广泛地修改该元素中的DOM。
对于一些比较简单的小部件，比如按钮，人们已经看到除了添加一些类之外没有太多的事情发生，所以为什么不直接简化进程并直接执行呢？这可行，但不是面向未来的。在历史的不同阶段，不同版本的jQM创建了具有不同DOM结构的按钮。所以我个人认为最好不要快捷方式jQM，让它按照自己的意愿处理数据属性。
话虽这么说，仍然可以创建由类而不是数据属性标识的小部件，这是人们在jQM之前用来做这些事情的方式。但是，可能会有人期望会有与这些类相关的CSS。使用数据属性可以清楚地表明这是结构/角色，而不仅仅是样式。