不见光就死的ContentPane:原因及解决之道

前端之家收集整理的这篇文章主要介绍了不见光就死的ContentPane:原因及解决之道前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

dijit.layout.TabContainer是非常好用的一款tab组件,而创建每个tab的内容,最常用的就是dijit.layout.ContentPane。ContentPane 可以设置href,载入一块独立的html内容。每次在一个TabContainer中创建多个tab时,总是有一个tab的内容是当前可见的,而其他tab的内容看不见。这儿就出来一个需求:当每个tab包含的内容都很多时(比如显示一张大数据表格),我们并不希望一口气将所有tab的内容在第一时间都下载下来,而是每次只加载当前要显示内容。也就是通常所说的“延迟加载”。

“延迟加载”的功能可以很好地改善用户体验,让网页浏览变得更高效,因此是一个可取的优化方法。但采用上面所说的实现,在某些场景中,却存在一个问题:有些ContentPane不见光就死了。

下面就来说说这个现象,分析原因并提供了一个解决方案。

首先构建一个TabContainer,包含了两个ContentPane。

  1. <input type="button" value="Replace current tabs" onclick="rep();"/><br/>
  2. <div id="container" dojoType="dijit.layout.TabContainer" style="width:1000px;height:400px;">
  3. <div dojoType="dijit.layout.ContentPane" title ="Tab 1 of Rould 1" style="width: 200px;">11111</div>
  4. <div dojoType="Test" title="Tab 2 of Round 1" href="test0727-2.html" preload="false"></div>
  5. </div>

其中Test[1]是一个自定义的ContentPane,功能不变,只是为每个标准生命周期函数加了控制台打印语句,从而便于我们观察它们的加载顺序。Test被设置为延迟加载,从而在不点击第二个tab之前,它的内容不会被加载。可以看到,当刷新整个页面时,firebug的控制台的输出结果,从而证明Test的内容并未被加载:

  1. preamble
  2. constructor
  3. postMixInProperties
  4. buildRendering
  5. cancel
  6. postCreate
  7. startup

当点击按钮“Replace current tabs”时,TabContainer原有的tab会被清除掉,代之以新的tab。

  1. function rep(){
  2. var con = dijit.byId("container");
  3. con.destroyDescendants();
  4. var list = ["dijit.layout.ContentPane","dijit.layout.ContentPane"];
  5. for(var i = 0; i < list.length; i++){
  6. constructor = dojo.getObject(list[i]);
  7. var widget = new constructor({
  8. title: "Tab "+ (i+1) + " of Rould 2"
  9. });
  10. widget.startup();
  11. con.addChild(widget);
  12. }
  13. }

这个时候错误就出现了:
  1. Error: xhr cancelled

从表面意思上来看,这个错误说的是一个xhr请求被取消了。那到底哪里来的xhr请求呢?

其实这要归因于TabContainer的destroyDescendants工作原理。destroyDescendants在运行时,会先销毁当前可见的tab。因此对于一个隐藏tab而言,在被销毁之前,它的显示功能会先被调用。而由于这个tab设置了href,根据延迟加载的原理,这个时候它的内容会通过发出一个xhr请求加载进来。但很不幸地,它的销毁功能紧接着显示功能调用了,而且由于本地代码运行速度大于xhr请求速度,这个刚发出还没来得及完成的xhr请求就被销毁功能取消了。

知道了错误产生的原理,解决方法可以有很多种。为了保持延迟加载,有一种较好的解决方法[2],就是在销毁各个tab时,阻止其显示功能被触发。重写点击“Replace current tabs”按钮的功能如下:

  1. function rep(){
  2. var con = dijit.byId("container");
  3. dojo.forEach(con.getChildren(),function(child){
  4. if(!child.selected){
  5. con.removeChild(child); //con.closeChild(child);
  6. }
  7. });
  8. con.destroyDescendants(); // destroy the final visible tab
  9. var list = ["dijit.layout.ContentPane","dijit.layout.ContentPane"];
  10. for(var i = 0; i < list.length; i++){
  11. constructor = dojo.getObject(list[i]);
  12. var widget = new constructor({
  13. title: "Tab "+ (i+1) + " of Rould 2"
  14. });
  15. widget.startup();
  16. con.addChild(widget);
  17. }
  18. }

参考文献:

[1] dijit.layout.ContentPane 中的标准方法/事件在不同情况下的调用,http://www.jb51.cc/article/p-tjvzxxpl-gd.html

[2] dojo toolkit mailing list,@L_301_1@

猜你在找的Dojo相关文章