日期:2014-05-16  浏览次数:20491 次

关于JQuery Mobile动态Ajax加载页面及JS的方案
首先 JQuery Mobile

有单页面模式和多页面模式
在多页面模式的情况下,可能会选择把页面都分在多个html文件中



缺点
通过ajax来切换页面中的body标签里边的内容
而在body里面写<script>标签的话,会少了两部页面的执行
pagecreate和pageinit两个时间都无法获取
除非写到首页的Header里面,才能监听到页面的两个事件
但是,把所有页面的JS都卸载Header里面或者外部JS,首次就加载,会增加首次加载文件的大小,并且会产生多余的加载,在没有用到的页面也被加载进来



下面是个人的解决方案


1.首先对于页面切换,使用changePage来执行,并且可以传递参数来确定是跳转到哪个页面
当然,pagebeforechange事件也能获取到跳转文件的扩展名,不过还是觉得自己传参数靠谱

2.监听pagebeforechange事件,来处理页面切换之前处理,然后通过自己传的页面参数来判断,要跳转到的页面,然后根据自己需求来加载JS文件

3.动态加载JS文件,通过JQuery 的getScript方法来加载JS

(在监听事件的时候,可能考虑到,加载JS,后,导致内存增加
但是http://stackoverflow.com/questions/5108002/how-to-delete-script-loaded-by-getscript
上面写,getScript,不是相当于load了一个script,他是下载后来直接运行,所以不需要考虑这个问题,不过,这块还有待于确认)


优点
这样就避免了加载JS文件大又能捕捉到page页面的create 和 init事件以及处理其他的内容
而且可以把JS文件很明确的分到具体的文件中,也方便管理