JQueryMobile开发Cordova时多页应用模式

男娘i 2022-08-09 01:47 164阅读 0赞

在Cordova官网上推荐开发Cordova手机时使用单页模式，结合JQueryMobile时，发现有点不知道如何实施单页模式，如果把所有页面都写在主页中，那主页将会很大，大到不可维护，可是如何才可以做才可以利用JQueryMobile中的ajax导航优势呢？本文结合自己开发的一个项目，简单介绍一下JQueryMobile开发多页应用模式的方式。  
JQueryMobile的基本页面框架就是有很多“page”组成，每一个page会由框架加载到页面中，其他页面将不可见。除了“page”外还有“panel”和“dialog”可以实现页面的浮动效果。  
div带有data-role=”page”属性，将是一个page，那么如何把这些页面分开到不同的html文件中呢？其实很简单：把不同的page写到不同的html文件中，在页面切换时，直接使用就有href做跳转就可以了，也可以通过js跳转：

$(':mobile-pagecontainer').pagecontainer("change", "reader.html", {
       transition:"slidefade"});

老的版本使用changeto方法，1.4.5版本提示该方法已经过时，就不再此处在做说明。  
通过JQueryMobile加载的子页面时不需要在“page”外写多余的代码，这些代码不会被加载（只有“page”的内容会通过框架插入到当前dom中），如果是子页面需要的js或css，可以添加到page的代码中，如：

<div data-role="page">
    <script> //这里的代码会在页面加载时执行 </script>
    <script src="js/test.js"></script>
    </div>

或全部添加到首页的页面中，这样也可以加快页面在用户触发的速度。  
在Cordova中，推荐单页模式的理由是页面切换时，会需要重新加载设备驱动的js，这样会比较慢，具体可以参考Cordova的官网[最佳实践][Link 1]。

这样就可以合理的组织多个页面了。

[Link 1]: http://cordova.apache.org/docs/en/5.0.0/guide_next_index.md.html#Best%20Practices