为什么jQuery Mobile使用数据角色属性而不是类

为什么是data

他们可以简单地使用role作为属性(像其他框架一样)，但这将使生成的HTML无效。因此，每个属性名都添加了一个data-。

为什么不是类

我认为这样做的主要原因是尽可能地将观点与逻辑分开。在较大的项目中，CSS和JavaScript不是由同一个人编写的。

它提供了对强大的样式技术的大量控制，特别是与jquery ui结合使用时。我使用jquery移动版，我使用他们的工具轻松制作主题滚动，现在当我使用data-role-header, footer listview等元素时。我有很好看的页面没有努力。您可以在代码中引入数百个数据角色属性，以便轻松创建统一的、用户友好的页面。我个人喜欢data-role - page属性，以便在单个HTML页面中创建多个视图。它们很容易使用，所以了解它们的最好方法就是和它们一起玩。

请在这里查看数据角色的解释

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

jQueryMobile向页面添加了一个加载事件处理程序，该处理程序处理DOM查找各种data-xxx属性。当它找到这些元素时，它不仅仅是对元素进行样式化。