一、为什么需要 jQuery Mobile 的页面模型在传统 Web 开发中一个页面通常对应一个 HTML 文件跳转意味着浏览器重新加载文档。而 jQuery Mobile 面向的是移动端单页应用式的体验它把页面拆成一个个data-rolepage容器通过 Ajax 加载和 CSS 转场动画完成“页面切换”让用户感觉像原生 App 一样顺滑。理解 jQuery Mobile 的页面模型是掌握整个框架的第一步。本文将从页面结构、多页面文档、Ajax 导航、转场动画、页面事件到常见坑点配合大量可直接运行的代码示例逐一讲解。二、环境准备jQuery Mobile 依赖 jQuery引入顺序必须是先 jQuery 后 jQuery Mobile。下面是最小可用的 HTML 骨架!DOCTYPE html html langzh-CN head meta charsetutf-8 meta nameviewport contentwidthdevice-width, initial-scale1, maximum-scale1, user-scalableno 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 div>div>body !-- 页面一 -- div>!-- index.html -- a hrefabout.html>a hrefreport.pdf>$(document).on(mobileinit, function () { $.mobile.ajaxEnabled false; $.mobile.hashListeningEnabled false; $.mobile.linkBindingEnabled false; });注意mobileinit必须在 jQuery Mobile 脚本加载之前绑定否则配置不会生效。因此这段代码要放在 jQuery 之后、jQuery Mobile 之前。六、页面转场动画转场动画通过data-transition指定常用值包括fade、slide、slideup、slidedown、pop、flip、turn、flow、none。a href#detail>$(document).on(mobileinit, function () { $.mobile.defaultPageTransition slide; $.mobile.defaultDialogTransition pop; });还可以用 JavaScript 主动切换页面并指定转场$.mobile.changePage(#detail, { transition: slide, reverse: false, changeHash: true });实践建议移动端低端设备上flip、turn这类 3D 转场容易掉帧优先使用slide或fade。七、页面生命周期事件jQuery Mobile 为页面定义了一组事件理解它们的触发顺序非常重要。以 Ajax 加载一个外部页面为例顺序大致为flowchart TD A[pagebeforeload] -- B[pageload] B -- C[pagebeforechange] C -- D[pagebeforecreate] D -- E[pagecreate] E -- F[pageinit] F -- G[pagebeforehide 旧页面] G -- H[pagebeforeshow 新页面] H -- I[pagehide 旧页面] I -- J[pageshow 新页面]下面是一个监听页面事件的完整示例$(document).on(pagecreate, #detail, function () { console.log(detail 页面已创建控件已增强); }); $(document).on(pageinit, #detail, function () { console.log(detail 页面初始化完成适合绑定事件); }); $(document).on(pageshow, #detail, function (e, ui) { console.log(detail 页面显示来源页面, ui.prevPage ui.prevPage.attr(id)); }); $(document).on(pagehide, #detail, function () { console.log(detail 页面被隐藏); });常见误区在pagecreate之前操作控件可能拿到的是未增强的原始 DOM而pageinit在 1.4 之后已不推荐用于新代码官方建议统一使用pagecreate。八、动态创建页面在单页应用中页面内容常常来自接口。动态插入 page 后必须调用trigger(create)或page()让 jQuery Mobile 增强其中的控件。function renderUserPage(user) { var html [ div>// 关闭某个页面的缓存 $.mobile.pageContainer.pagecontainer(remove, #detail); // 强制重新加载当前页面 $.mobile.pageContainer.pagecontainer(load, detail.html, { reload: true });也可以在链接上声明不缓存a hrefdetail.html data-ajaxtrue data-dom-cachefalse详情/a对于数据变化频繁的列表页推荐在pageshow中重新拉取数据并局部刷新而不是依赖整页缓存。十、常见坑点与最佳实践重复 id多页面文档中 id 必须全局唯一否则changePage会定位到错误页面。脚本位置页面内的script在 Ajax 加载时不会自动执行需要放在全局脚本中并通过事件绑定。事件重复绑定页面被缓存后再次显示不会重新执行pagecreate若在pageshow中绑定事件务必先off再on。固定头部遮挡内容使用data-positionfixed时给 content 增加顶部内边距避免第一行被 header 盖住。返回按钮优先使用data-relback直接写死href会在深层导航时产生错误的历史栈。十一、小结jQuery Mobile 的页面模型围绕data-rolepage展开单文件多页面适合轻量场景Ajax 导航适合模块化拆分转场动画和页面事件则决定了交互质感。掌握 page 容器结构、changePage、生命周期事件和缓存策略这四件事基本就能覆盖绝大多数移动端页面开发需求。虽然如今更多项目转向 Vue、React 等现代框架但 jQuery Mobile 在存量项目维护、快速原型和低依赖场景中依然有它的价值。理解它的页面机制也有助于我们对比理解现代前端路由的设计思路。
一、为什么需要 jQuery Mobile 的页面模型在传统 Web 开发中一个页面通常对应一个 HTML 文件跳转意味着浏览器重新加载文档。而 jQuery Mobile 面向的是移动端单页应用式的体验它把页面拆成一个个data-rolepage容器通过 Ajax 加载和 CSS 转场动画完成“页面切换”让用户感觉像原生 App 一样顺滑。理解 jQuery Mobile 的页面模型是掌握整个框架的第一步。本文将从页面结构、多页面文档、Ajax 导航、转场动画、页面事件到常见坑点配合大量可直接运行的代码示例逐一讲解。二、环境准备jQuery Mobile 依赖 jQuery引入顺序必须是先 jQuery 后 jQuery Mobile。下面是最小可用的 HTML 骨架!DOCTYPE html html langzh-CN head meta charsetutf-8 meta nameviewport contentwidthdevice-width, initial-scale1, maximum-scale1, user-scalableno 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 div>div>body !-- 页面一 -- div>!-- index.html -- a hrefabout.html>a hrefreport.pdf>$(document).on(mobileinit, function () { $.mobile.ajaxEnabled false; $.mobile.hashListeningEnabled false; $.mobile.linkBindingEnabled false; });注意mobileinit必须在 jQuery Mobile 脚本加载之前绑定否则配置不会生效。因此这段代码要放在 jQuery 之后、jQuery Mobile 之前。六、页面转场动画转场动画通过data-transition指定常用值包括fade、slide、slideup、slidedown、pop、flip、turn、flow、none。a href#detail>$(document).on(mobileinit, function () { $.mobile.defaultPageTransition slide; $.mobile.defaultDialogTransition pop; });还可以用 JavaScript 主动切换页面并指定转场$.mobile.changePage(#detail, { transition: slide, reverse: false, changeHash: true });实践建议移动端低端设备上flip、turn这类 3D 转场容易掉帧优先使用slide或fade。七、页面生命周期事件jQuery Mobile 为页面定义了一组事件理解它们的触发顺序非常重要。以 Ajax 加载一个外部页面为例顺序大致为flowchart TD A[pagebeforeload] -- B[pageload] B -- C[pagebeforechange] C -- D[pagebeforecreate] D -- E[pagecreate] E -- F[pageinit] F -- G[pagebeforehide 旧页面] G -- H[pagebeforeshow 新页面] H -- I[pagehide 旧页面] I -- J[pageshow 新页面]下面是一个监听页面事件的完整示例$(document).on(pagecreate, #detail, function () { console.log(detail 页面已创建控件已增强); }); $(document).on(pageinit, #detail, function () { console.log(detail 页面初始化完成适合绑定事件); }); $(document).on(pageshow, #detail, function (e, ui) { console.log(detail 页面显示来源页面, ui.prevPage ui.prevPage.attr(id)); }); $(document).on(pagehide, #detail, function () { console.log(detail 页面被隐藏); });常见误区在pagecreate之前操作控件可能拿到的是未增强的原始 DOM而pageinit在 1.4 之后已不推荐用于新代码官方建议统一使用pagecreate。八、动态创建页面在单页应用中页面内容常常来自接口。动态插入 page 后必须调用trigger(create)或page()让 jQuery Mobile 增强其中的控件。function renderUserPage(user) { var html [ div>// 关闭某个页面的缓存 $.mobile.pageContainer.pagecontainer(remove, #detail); // 强制重新加载当前页面 $.mobile.pageContainer.pagecontainer(load, detail.html, { reload: true });也可以在链接上声明不缓存a hrefdetail.html data-ajaxtrue data-dom-cachefalse详情/a对于数据变化频繁的列表页推荐在pageshow中重新拉取数据并局部刷新而不是依赖整页缓存。十、常见坑点与最佳实践重复 id多页面文档中 id 必须全局唯一否则changePage会定位到错误页面。脚本位置页面内的script在 Ajax 加载时不会自动执行需要放在全局脚本中并通过事件绑定。事件重复绑定页面被缓存后再次显示不会重新执行pagecreate若在pageshow中绑定事件务必先off再on。固定头部遮挡内容使用data-positionfixed时给 content 增加顶部内边距避免第一行被 header 盖住。返回按钮优先使用data-relback直接写死href会在深层导航时产生错误的历史栈。十一、小结jQuery Mobile 的页面模型围绕data-rolepage展开单文件多页面适合轻量场景Ajax 导航适合模块化拆分转场动画和页面事件则决定了交互质感。掌握 page 容器结构、changePage、生命周期事件和缓存策略这四件事基本就能覆盖绝大多数移动端页面开发需求。虽然如今更多项目转向 Vue、React 等现代框架但 jQuery Mobile 在存量项目维护、快速原型和低依赖场景中依然有它的价值。理解它的页面机制也有助于我们对比理解现代前端路由的设计思路。
