Question

jquery mobile实现原理，在网上也找不到。谁能简单分析一下。在一个标签里面简单的添加很多

jquery mobile实现原理，在网上也找不到。谁能简单分析一下。在一个标签里面简单的添加很多个data-xxx属性便可以改变所显示的样式是怎么实现的，如果只能添加一个属性还好办，但貌似对自定义属性数量没有限制。比如<a>在里面添加data-role:button和data-icon:home就能形成一个带图标的按钮，这是如何实现的。我查源代码就是看不出来，就连[data-role=button]都找不到，真费脑筋。每当我看到jm简单地就表现出很炫的效果都会想怎么用纯css3和js实现它，可是连它的根本原理都不太懂。麻烦高手解释下

Answer 1

当你学会了css3 html5 以及移动端的JS框架。你就不屑去用qjm了。jqm优点是兼容性强。弱点就是速度太慢冗余代码太多一个项目哪需要那么多功能。现在很多框架实现选择性的组合生成一个真正适用于自己的版本 如 zepto.js 和jqmobi（这个不是jquerymobile哈，目前是速度最快的一 个 框架）。

我用各种js框架都试着做过app。结果jqm是最慢的一个，其他的也达不到理想的速度。后面决定自己写js和css。结果就是ios app打开速度由JQM的6秒左右提升为0.8秒的秒开。

原理：jqm先遍历dom元素，对每个绑定data-xxxx的属性进行事件绑定,里面有句代码是这样写的

b.getAttribute&&(d=b.getAttribute("data-"+a.mobile.ns+c);
------------------------------------------
tapToggleBlacklist:"a, button, input, select, textarea, .ui-header-fixed, .ui-footer-fixed, .ui-flipswitch, .ui-popup, .ui-panel, .ui-panel-dismiss-open",hideDuringFocus:"input, textarea, select"

对于不同的role对应不同的规则 而这些role存在于上述的一个list里。

追问

jqm确实是太庞大了，有时候根本用不到那么多功能却不得不载入整个jquery-mobile文件，好几百kb。我用它不是拿来编写自己的网站，而是长研究它的实现原理好自己手工做出来。css3和js基本掌握了，目前刚接触jqm框架，到这里才感到有点困难

追答

你要想研究就研究jqmobi吧 这个 框架更清晰，目前是最好的移动框架

Answer 2

HML5 + CSS3