Utaoy
Utaoy
  • 发布:2015-04-23 11:43
  • 更新:2015-04-24 11:28
  • 阅读:2032

Head和Body分离架构下的加载顺序和触发事件的问题

分类:MUI

我们采用head和body两个预加载页面作为整个app的通用模板页和内容页。
官方在mui的demo中有一段代码:
bodyWebView.addEventListener('loaded', function() {
setTimeout(function() {
bodyWebView.show();
}, 50);
});

现在有个业务需求:
新闻页面List.html
新闻详情页面Detail.html
点击某条新闻跳转到Detail页面,detail页面通过list页面的新闻ID发出ajax请求获取新闻详情。

list.html中的处理方式为:
bodyWebView.loadURL(detail.html) //内容模板页加载新的detail
headWebView.show(); //框架模板页显示
mui.fire(detailWebView, 'showNews', {id:1}) //触发detail.html中的获取新闻并且显示新闻内容的自定义事件

以上为伪代码,并不一定能执行,但是思路如此。
现在有2个问题:
1.detail.html在被loading的时候,我们就调用mui.fire方法触发事件,有可能detail页面的这个showNews自定义事件还没被加载,导致fire失败。我最后通过定时器的方式延迟fire事件,但是始终觉的不可靠,毕必定这个时间不好控制。
2.官方在如何提升性能避免白屏的教材中说到,若有联网获取数据的行为,建议bodyWebView等待ajax获取完毕之后一起显示出来,可以避免2次加载等待问题。所以上面的执行顺序应该为:
显示headWebView->更改bodyWebView.url为新闻详情页->等待新闻详情页dom结构加载完毕->mui.fire触发新闻详情页的获取数据事件->自定义事件获取服务端数据->显示bodyWebView页面。 思路很清晰,但是代码不知道如何组织,因为我们的真个app的body和header模板页都是在index.html中加载的,可以说是公用的模板页。

希望各位大大能帮忙一下。谢谢

2015-04-23 11:43 分享
已邀请:
DCloud_App_Array

DCloud_App_Array

  1. 监听detailWebView的loaded事件之后再mui.fire(detailWebView, 'showNews', {id:1}),这样就是可靠的。
  2. 思路是正确的,在实现的时候建议减少各页面之间的耦合度,列表(list)页面只与详情页(head)交互,详情页内部再创建内容(body)页面,这样从页面结构到打码实现就会更加清晰。
    这种思路与HelloH5模板应用中的plus/doc.html页面相似,列表项中每个页面文档按钮调用的都是doc页面,根据传入的参数不同载入不同的内容。
  • Utaoy (作者)

    感谢您给出的思路。我们现在采用的这种思路是参考mui的那个app。list.html页面中加载了通用模板,然后整个app都在使用这个模板,这样可以减少webview的创建和打开,而且很好控制。几乎所有的详细页面我们都通过这套模板去load,现在的问题也很严重,也就是你说的耦合度有点高,以至于无法满足不同详情页load之后要做的事情不同

    2015-04-24 15:55

要回复问题请先登录注册