SUI Mobile 异步 AJAX 加载页面执行 JavaScript 脚本 - 文章教程

SUI Mobile 异步 AJAX 加载页面执行 JavaScript 脚本

发布于 2017-09-18 字数 2132 浏览 3101 评论 0

SUI Mobile 是一个比较好用的移动端开发框架,里面包含了很多个组件,几乎涵盖了手机端的基本特效,其自带的 路由 功能简直用起来不要太爽,这也是我一直使用它的原因。

SUI Mobile 异步 AJAX 异步加载页面执行 JavaScript 脚本

不过再好的插件也有一些 缺点,或者说这并不是 SUI Mobile 的缺点,只是框架的约定和我们以往编写代码的方式有点不同,其实你能想到的问题,框架的作者也基本想到了,可能在开发文档里面没有写明。

SUI Mobile 的路由功能,能够在当前页面 异步加载 另外的页面,不需要我们做任何配置,框架给我们自动完成,只要两个页面都遵循框架的格式编写,那就基本没有问题。

这里就会遇到一个经常遇到的问题,那就是异步加载的 JS 会不执行,其实这个问题早在 SUI Mobile 的常见问题里面提到,作者也给出了相应的解决方法,但是可能很多开发者不知道到底该怎么写。

切换到的新页面中的 js 不执行

由于浏览器安全性考虑的限制以及可能的 js 重复执行或覆盖的问题,目前是不支持运行 ajax 载入的页面里面的 js 的。

解决方法:所有页面都引用相同的 js,而这个 js 里面包含了所有的逻辑,事件部分使用委托来绑定。

SUI Mobile 官方有一个示例,细心的朋友可能会发现,里面也是通过路由加载页面,但是里面的一些JS插件照样能够执行,仔细看看作者写的 DEMO 就能明白怎么回事。

作者是将所有的 JS 事件都写到一个文件里面,然后每个页面都引用,这样所有的页面都是相同的执行脚本,然后通过给每个页面设置不同的页面 ID,然后判断改执行那段 JS 脚本。

$(document).on("pageInit", "#page-flow-picker", function(e, id, page) {
    $("#datetime-picker").datetimePicker({
      toolbarTemplate: '<header class="bar bar-nav">\
      <button class="button button-link pull-right close-picker">确定</button>\
      <h1 class="title">选择日期和时间</h1>\
      </header>'
    });
});

#page-flow-picker 就是需要被加载页面的PageID,给根元素绑定一个页面初始化完成的事件,也就是SUI的加载事件,完成以后执行下面的代码。

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2583 文章
29 评论
84935 人气
更多

推荐作者

Jay

文章 0 评论 0

guowei007

文章 0 评论 0

2668157715

文章 0 评论 0

HY阳

文章 0 评论 0

想挽留

文章 30 评论 3