1. 为什么还值得花一小时了解jQuery Mobile如果你最近接手了一个移动端老项目大概率会在代码里撞见满屏的>!DOCTYPE html html head meta charsetutf-8 meta nameviewport contentwidthdevice-width, initial-scale1 titlejQuery Mobile 快速入门/title link relstylesheet hrefhttps://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css script srchttps://code.jquery.com/jquery-1.11.3.min.js/script script srchttps://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js/script /head body ... /body /html注意两个细节。一是顺序先引 jQuery 核心库再引 jQuery Mobile顺序反了页面直接报错二是版本jQuery Mobile 1.4.5 官方推荐搭配 jQuery 1.x 使用很多老项目用的是 1.10.x 或 1.11.x。如果你贪新用了 jQuery 3.x会发现大量 API 行为对不上这个问题我后面单独讲反正在快速入门阶段就照 1.11.x 来。另一个重点是mobileinit事件。jQuery Mobile 在初始化流程里预留了配置钩子但你必须在jquery.mobile.min.js加载之前绑定它所以正确的顺序应该是jQuery → 绑定 mobileinit → jQuery Mobile。切忌把这个绑定放在 document ready 里那时框架早就跑完了。script srchttps://code.jquery.com/jquery-1.11.3.min.js/script script $(document).on(mobileinit, function() { $.mobile.defaultPageTransition slide; }); /script script srchttps://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js/script2.2 页面标准骨架page、header、content、footer接下来是最核心的页面结构。一个 jQuery Mobile 页面被规定为容器 三个区div>div>a hrefdetail.html查看详情/a这里藏着两个重要规则。第一被 AJAX 拉进来的外部页面里非 page 容器外的头部信息全部丢失比如新页面的title不会更新、新页面里的script基本不会按你预期执行。第二如果你想让某些链接强制走完整页面跳转——比如跳到一个不兼容 jQuery Mobile 的页面或者需要刷新整站状态——给链接加relexternal或>a href#about>$.mobile.pageContainer.pagecontainer(change, #about, { transition: slide, changeHash: true });1.4.x 时代统一用pagecontainer这个 widget 来做编程式导航以前版本里的$.mobile.changePage()虽然还能用但已经属于旧接口新写的维护代码建议用pagecontainer(change, ...)。3.4 页面生命周期事件踩坑前的必修课多页模式带来一个老手都绕不开的问题事件该挂在哪。普通 jQuery 项目里你会很习惯地在$(document).ready()里初始化所有东西但在 jQuery Mobile 里同一个文档里有很多页面被切换、被加载document.ready只在首次加载时触发一次后面 AJAX 进来的页面根本不会再次触发它。所以官方推荐的做法是把业务初始化代码挂到页面生命周期事件上。一套页面从生成到消失经历的主要事件顺序如下pagebeforecreate页面 div 被识别但尚未创建任何 widgetpagecreate页面里的组件正在进行初始化pageinit页面初始化完成官方推荐在这里做自己的初始化pagebeforeshow页面即将显示pageshow页面已经完全显示pagehide/pagebeforehide页面被隐藏阶段。最常用的两个是pagecreate做一次性初始化和pageshow每次显示都要刷新状态。标准写法是事件委托$(document).on(pagecreate, #home, function() { // 只在页面创建时执行一次 console.log(home 初始化); }); $(document).on(pageshow, #home, function() { // 每次切回首页都会执行适合刷新数据 loadList(); });直接在具体 DOM 元素上绑pagecreate是无效的必须委托到 document 上原因很简单元素可能是 AJAX 之后才进 DOM 的直接绑不上去。4. 高频组件速览从按钮到表单4.1 按钮一个>a href#page2>ul>ul>div>!-- 滑块 -- div>div classui-grid-a div classui-block-a左列/div div classui-block-b右列/div /divui-grid-a是两列ui-grid-b三列ui-grid-c四列对应的块分别是ui-block-a、ui-block-b…… 栅格类名是固定的不会因为列数变化而改变字母起点。折叠面板适合做问与答、展开详情代码简单div>a href#myPopup>a href#tips>$(document).on(swipeleft, .cards, function() { $(this).next().show(); });5.2 事件绑定的正确姿势给元素绑定事件时务必用事件委托的方式把 handler 挂到 document 上而不是直接挂在目标元素上// 推荐 $(document).on(tap, #btn-submit, function() { submitOrder(); }); // 不推荐元素可能晚于绑定出现 $(#btn-submit).on(tap, function() { submitOrder(); });原因和上一节说的一样jQuery Mobile 的页面 div 可能是 AJAX 加载后动态插入的直接绑定的代码执行时元素还不存在。事件委托利用事件冒泡不管元素什么时候出现只要事件冒泡到 document 都能被捕获。这个习惯一旦养成能省掉后面一大半的为什么没反应排查时间。5.3 tap 与 click 的差异和幽灵点击移动端浏览器在触摸屏上处理 click 事件时通常会等 300 毫秒左右确认你是不是要双击缩放这个延迟让 click 手感迟钝。jQuery Mobile 的 tap 事件通过监听 touchend 在手指离开瞬间触发手感好很多。但它也引入了另一个经典问题如果同时绑了 tap 和 click或者 tap 触发后浏览器又在下层元素上补发了一个 click幽灵点击会出现点了按钮触发两次跳转。老项目中遇到点一次页面跳了两下的 bug十有八九跟它有关。排查思路是看事件绑定里有没有同时绑了 tap 和 click或者 tap 事件处理时是否把默认行为完全拦截了。必要时可以加一个延迟锁$(document).on(tap, #btn-next, function() { if ($(this).data(locked)) return; $(this).data(locked, true); $.mobile.pageContainer.pagecontainer(change, #page2); setTimeout(function() { $(#btn-next).data(locked, false); }, 500); });这个锁思路在双事件、快速重复点击的场景里都管用。5.4 区块翻新让动态内容走一遍增强流程结合 5.2再补一个动态内容的经典操作。当你用 JS 往页面里 append 了一段新的列表 HTML 时它会变成没有样式的裸列表因为框架加载时的增强流程早就跑完了。解决办法是在新内容插入后对容器执行一次增强$(#some-list).html(newHtml); $(#some-list).enhanceWithin();enhanceWithin()是 1.4 以后推荐的写法它会把容器内部所有带>div>.ui-icon-custom { background-image: url(icons/custom.png); background-size: 18px 18px; background-color: transparent; }组件上一写>$(#amount).val(60).slider(refresh); $(#notify).prop(checked, true).flipswitch(refresh); $(#city).html(newOptions).selectmenu(refresh);也有一个通用兜底调用 refresh 前先确保元素已经被增强过否则会报cannot call methods on slider prior to initialization之类的方法不存在错误。7.6 低端安卓的过渡动画掉帧flip、pop 这类 3D 过渡动画在低端 Android WebView 上经常掉帧表现为页面切换时白屏或卡顿。排查时先把页面里同时运行的 CSS 动画、图片懒加载因素排除再考虑把全局过渡改成 none 或 fade$(document).on(mobileinit, function() { $.mobile.defaultPageTransition none; });fade 只做透明度过渡开销小很多none 则最干净配合项目本身的加载提示效果也不差。7.7 一个保命的启动配置习惯最后说个维护老项目的习惯接手的第一个下午先不要急着改页面把所有页面的事件绑定清单、主题色板、jQuery 核心版本、是否使用 AJAX 导航这几项记下来。我会在mobileinit里统一把全局切换动画、页面加载提示、按钮点击延迟这些参数配置好再开始动业务代码。原因是这套框架的坑有很强的全局性一个配置能同时影响几百个页面先定底后改局部风险最小。我个人的做法是在这个启动配置里顺手把$.mobile.loader.prototype.options.textVisible这些细节也看一眼很多后期诡异的问题最后都回溯到某个全局配置被业务代码改乱了。对 jQuery Mobile 这种强约定框架理解默认行为比急着写特殊逻辑更重要把框架的脾气摸透维护起来才会顺。