8

这可能是一个幼稚的问题，但我正在学习 jQuery Mobile 并且不确定为什么一切都与data-role属性相关。似乎即使角色与风格相关，他们也会data-role过度使用class

我知道对于语义而言，data-role在很多情况下都是有意义的，但它似乎在这里被滥用了。这种查找不会也更慢吗？

他们为什么使用data-roleover class？

感谢您的任何见解。

4

4 回答 4

11

为什么data

它们可以简单地role用作属性（就像其他框架一样），但这会使生成的 HTML 无效。因此将 adata-添加到每个属性名称。

为什么不上课

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

于 2013-05-07T00:51:20.907 回答
0

它提供了对强大样式技术的大量控制，尤其是与 jquery ui 结合使用时。我使用 jquery mobile，我使用他们的工具轻松制作主题滚轮，现在当我使用 data-role-header、footer listview 等元素时。我毫不费力地拥有漂亮的页面。您可以将数百个数据角色属性引入代码中，以轻松创建统一的、用户友好的页面。我个人喜欢 data-role - page 属性在单个 HTML 页面中创建多个视图。它们易于使用，因此了解它们的最佳方法是与它们一起玩。

于 2013-05-07T00:49:10.557 回答
0

请在此处找到数据角色的说明。

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他应该设置样式，因为元素必须自然地遵循这条规则 (be inline)。

于 2013-05-07T00:56:04.500 回答
0

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

在许多情况下，它会创建一种与数据角色相关联的小部件。例如，一个 <div data-role="header"> 变成了一个工具栏小部件，它的创建可能会广泛地修改该元素内的 DOM。

对于一些更简单的小部件，如按钮，人们已经看到除了添加一些类之外并没有发生太多事情，那么为什么不直接缩短流程并直接执行呢？这可以工作，但它不是面向未来的。在历史的不同阶段，不同版本的 jQM 创建了具有不同 DOM 结构的按钮。所以我个人认为最好不要简化 jQM，让它处理它认为合适的数据属性。

话虽如此，仍然可以创建由类而不是数据属性标识的小部件，这是人们在 jQM 之前所做的这些事情的方式。但随后可能会有与这些类相关联的 CSS 的期望。数据属性的使用清楚地表明这是一个结构/角色的事情，而不仅仅是样式。

于 2016-05-19T20:32:19.430 回答