`
LiYunpeng
  • 浏览: 938340 次
  • 性别: Icon_minigender_1
  • 来自: 大连
社区版块
存档分类
最新评论

关于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文件很明确的分到具体的文件中,也方便管理
分享到:
评论

相关推荐

    jquery mobile页面跳转后样式丢失js失效的解决方法

    用ajax跳转的时候,从a.html跳转到b.html后,b.html的css以及js都失效了。 ...由于jqm的ajax跳转的时候,只会把b.html中内的内容加载进dom,而外的代码都不会加载,所以导致在外的js和css都失效了。

    超实用的jQuery代码段

    超实用的jQuery代码段精选近350个jQuery代码段,涵盖页面开发中绝大多数要点、技巧与方法,堪称史上最实用的jQuery代码参考书,可以视为网页设计与网站建设人员的好帮手。《超实用的jQuery代码段》的代码跨平台、跨...

    jQueryMobile_PluginMultiPage:一个用于在运行时显示页面的jQuery Mobile插件,以JSON格式加载的Ajax

    jQuery Mobile插件多页##一个jQuery Mobile插件,用于在运行时显示页面,Ajax以JSON格式加载####由Carmel Schvartzman 该jQuery Mobile插件是以下教程的随附工具: : ### חיתוח:כרמלשוורצמן

    锋利的jQuery(第2版).单东林、张晓菲、魏然(带详细书签)

    《锋利的jQuery(第2版)》循序渐进地对jQuery的各种函数和方法调用进行了介绍,读者可以系统地掌握jQuery的选择器、DOM操作、事件和动画、AJAX应用、插件、jQuery Mobile、jQuery各个版本变化、jQuery性能优化和技巧...

    jquery插件使用方法大全

    做一个像Gmail一样的动态加载通知条,用jquery就那么简单。两个函数接受的参数除了快慢等,还可以接收整型,作为渐入或淡出的完成时间,单位为MS。 编辑本段plugin  这也是一个插件的时代。 jquery插件给我的感觉...

    jQuery基础教程(第四版)

    第2章讲述如何通过jQuery中的选择符表达式及DOM遍历方法,在页面中的任何地方找到想要的元素。这一章将展示如何使用各种选择符表达式为页面中的不同元素添加样式,其中一些是通过纯CSS方式做不到的。 第3章介绍如何...

    谷歌CDN交换到微软CDN-crx插件

    ajax.googleapis.com/ajax/libs/jquerymobile/1.2.3/jquery.mobile.min.js3) ajax.googleapis.com/ajax/libs/jqueryui/1.2.3/jquery-ui.min.js4) ajax.googleapis.com/ajax/libs/jqueryui/1.2.3/themes/*/jquery-ui....

    jquery-mobile-player:基于jQuery的移动音乐播放器

    项目实现的功能及所用知识播放器的基础操作,上一首,下一首(顺序播放、随机播放、单曲循环),播放暂停,滑动时间轴的歌词定位初始handlebar模板渲染音乐列表数据,下拉滚动加载音乐列表数据。歌曲列表可添加喜爱...

    Livro-Dominando-JavaScript-com-jQuery:密码之家-精通jQueryJavaScript

    10-jQuery Mobile 11-JavaScript中的面向对象 12-一点点函数式编程 13-为jQuery创建插件 14-更好地使用jQuery的技巧 15-接下来是什么? 1-简报 列表: http : //forum.casadocodigo.com.br/ 书库: ...

    高级java笔试题-ama:《节点全栈》问我

    模块化加载seajs\requirejs\commonjs mvc/mvvm Bootstrap jQuery/Extjs/Dojo/Mootools/Yui Backbone Angular 移动端 h5/localstorage/websocket/canvas phonegap/cordova 是否具备编写原生插件能力 优化:fastclick...

    XML 讲解和分析

    JavaScript ▪ HTML DOM ▪ DHTML ▪ VBScript ▪ AJAX ▪ jQuery ▪ JSON ▪ E4X ▪ WMLScript Serv脚本 SQL ▪ ASP ▪ ADO ▪ PHP .NET Microsoft.NET ▪ ASP.NET ▪ .NET Mobile 多媒体 SMIL ▪ SVG 扩展阅读...

Global site tag (gtag.js) - Google Analytics