javascript - Why does jQuery Mobile use data-role attributes instead of classes? - Stack Overflow

admin管理员组

文章数量:1225556

This may be a naive question, but I'm learning jQuery Mobile and unsure why everything is related to a data-role attribute. It seems that even times when the role is related to the style, they are using data-role over class

I understand that for semantics, data-role makes sense in a lot of cases but it just seems to be abused here. Wouldn't that kind of lookup also be slower?

Why do they use data-role over class?

Thanks for any insight.

This may be a naive question, but I'm learning jQuery Mobile and unsure why everything is related to a data-role attribute. It seems that even times when the role is related to the style, they are using data-role over class

I understand that for semantics, data-role makes sense in a lot of cases but it just seems to be abused here. Wouldn't that kind of lookup also be slower?

Why do they use data-role over class?

Thanks for any insight.

• javascript
• jquery-mobile

Share Improve this question Follow edited May 7, 2013 at 1:02 Dave Stein asked May 7, 2013 at 0:45 Dave SteinDave Stein 9,3161616 gold badges6262 silver badges120120 bronze badges 8

• It's unlikely it's due to speed. It may be better to edit your question so that instead of asking "is it faster?", it just asks "why do they do it this way?" (to which "it is faster" may be a valid answer) – doppelgreener Commented May 7, 2013 at 0:52
• It's probably slower (but by how much, and does it even matter?) than classes for CSS, as class selectors are likely more optimized - however, they perform different roles so choose the correct one. – user2246674 Commented May 7, 2013 at 0:52
• That was my original phrasing ;) I thought it was too subjective. I may just have to change it back. – Dave Stein Commented May 7, 2013 at 0:53
• @user2246674 I would think speed doesn't matter for desktop in most cases, but on mobile you can't always be so lucky, where even amount of DOM nodes can slow down a site – Dave Stein Commented May 7, 2013 at 0:54
• @DaveStein That's what performance tests are for: "by how much, and does it even matter?" Unless a lookup is performed on the data value, there ought to be no performance issue here at all. Accessing the class (or data attribute) for a specific element should have identical performance characteristics. – user2246674 Commented May 7, 2013 at 0:54

 |  Show 3 more comments

4 Answers 4

Sorted by: Reset to default 12

Why data

They could simply use role as an attribute (like other frameworks do), but this would make the resulting HTML invalid. Therefore a data- is added to every attribute name.

Why not classes

I think the main reason for that is to separate view from logic as far as it is possible. In larger projects, CSS and JavaScript are not written by the same person.

It provides a lot of control over powerful styling techniques especially when combined with jquery ui. I use jquery mobile, I used their tool to easily make a theme roller and now when I use elements like data-role-header, footer listview. I have great looking pages with no effort. There are hundreds of data-role attributes you can bring into your code to easily create uniform, user friendly pages. I personally like the data-role - page attribute to create multiple views in a single HTML page. They are easy to use so the best way to learn about them is to play with them.

Please find the explanation of data-roles here.

data-role attribute is used to control the behaviour of the widget of element. For example in case of button you can use input type="button" (no data-role="button" attribute required in this case, as this is standard behaviour of this element) but you can use a element, and then you need to explicitly provide it:

<a href="" data-role="button"></a>

So for me it's rather useful solution, as buttons behavior on mobile devices can be same for different elements. You just need to provide data-role attribute, and jQuery will do the rest for you.

This is the quotation from main jQuery Mobile website:

jQuery mobile framework takes the "write less, do more" mantra to the next level: Instead of writing unique apps for each mobile device or OS, the jQuery mobile framework allows you to design a single highly-branded web site or application that will work on all popular smartphone, tablet, and desktop platforms.

They want to style every control you have in the same way, so write less, do more approach is fulfilled. So jQuery Mobile adds same styling for all elements with the same role to make things look the same way, but it doesn't mean you can't change it. It just means that they care about good look of your website, and they are aware that every button should be similar to others.

Also the page I mentioned earlier says:

The jQuery Mobile framework uses HTML5 data- attributes to allow for markup-based initialization and configuration of widgets.

So you are reading HTML and you know how elements will behave without looking to CSS file - which I think is cool if you're not front-end dev. Of course front-end dev can overwrite CSS, but he must follow the rules, e.g. if data-inline is set to true he should style it regarding that elements must naturally follow this rule (be inline).

jQueryMobile adds a load event handler to the page, which processes the DOM looking for various data-xxx attributes. When it finds those, it does more than just stylize the elements.

In many cases it creates a type of widget tied to the data-role. For example, a <div data-role="header"> is turned into a toolbar widget, the creation of which may extensively modify the DOM within that element.

For some of the simpler widgets, like buttons, folks have seen that not much happens other than some classes get added, so why not just shortcut the process and do that directly? That can work, but it isn't future-proof. At different points in history, different versions of jQM had created buttons with different DOM structures. So I personally think it's best not to shortcut jQM, and let it process the data-attributes as it sees fit.

That being said, it would still have been possible to create widgets identified by classes rather than data-attributes, which was how people used to do these things before jQM. But then there might be an expectation that there would be CSS associated with those classes as well. Use of the data- attributes makes it clear that this is a structural/role thing rather than just styling.

本文标签： javascriptWhy does jQuery Mobile use datarole attributes instead of classesStack Overflow