页面组合

如果我们想制作单页应用(SPA, single page application),或者“搭积木式”的把小页面组合为大页面。就需要把子页面组合到父页面里运行。比如我们前面制作了简单的hello.w页面。要把hello页面组合到父页面中打开,有什么方法呢?我们先写一个父页面例子(parent.w),parent.w没有特别的js代码。

parent.w

  1. <?xml version=“1.0” encoding=“utf-8”?>
  2. <div xmlns=“http://www.w3.org/1999/xhtml” xid=“window” class=“window”
  3. component=“$UI/system/components/justep/window/window”>
  4. <h3>父页面</h3>
  5. <h5>下面是通过iframe组合打开hello.w</h5>
  6. <iframe src=“hello.w”/>
  7. <h5>下面是通过windowContainer组件组合打开hello.w</h5>
  8. <div component=“$UI/system/components/justep/windowContainer/windowContainer” src=“hello.w”/>
  9. </div>

 


define(function(require) {
    var $ = require("jquery");
    var justep = require("$UI/system/lib/justep");
    var WindowContainer = require("$UI/system/components/justep/windowContainer/windowContainer");

    var Model = function() {
        this.callParent();
    };

    Model.prototype.button1Click = function(event) {
        var w = this.getElementByXid('window');
        for ( var i = 0; i < 10; i++) {
            var hello = new WindowContainer({
                parentNode : w,
                src : '$UI/practice/hello.w'
            });

            ////hello.$domNode.data('i', i);
            //hello.on("onLoad", function(event) {
            //  event.source.getInnerModel().sayHello(event.source.$domNode.data('i'));
            //});
        }
    };

    Model.prototype.button2Click = function(event){
        var w = this.getElementByXid('window');
        for ( var i = 0; i < 10; i++) {
          $('<iframe src="hello.w"></iframe>').appendTo('#'+this.getIDByXID('window'));
        }
    };

    return Model;
});

 

例子parent.w运行起来的效果如图:

parent

parent.w展示了两种组合页面的方法:

  • 通过html的iframe标签(代码第9行)
  • 通过windowContainer组件(代码第12行)

两种方法都两种方法都满足了功能性需求。注意两种方法都通过src属性指向了hello.w,这儿”hello.w”用的是相对引用 。因为parent.w和hello.w在同一个目录,当然也可以绝对引用(src = “$UI/practice/hello.w”),有兴趣的同学可以试试。

通过iframe嵌入页面,这是html的标准方法,封装和隔离的效果也很好,使用也很简单,为啥WeX5还要另外提供windowContainer组件来实现嵌入页面这种方法呢?通过iframe嵌入页面是把子页面完整独立地嵌入到父页面中,子页面会重复加载父页面已经加载过的公用js和css库,这种方法方法的好处是封装隔离性好,但性能低,内存占用高,另外在移动浏览器里使用iframe还存在一些坑。web开发的最佳实践都会建议尽量避免使用iframe

好吧,那就尽量不用iframe吧,但是组合页面的需求却很普遍,特别是在单页应用(SPA)里会大量用到,组合式页面开发模式也好处多多。有没有可以像iframe那样方便地组合页面但没有性能和内存占用问题的方法呢?WeX5的windowContainer就是尽量达成这个目的方法。通过windowContainer组件来嵌入页面本质上是把页面作为一个相对独立的页面片段(html片段)插入到父页面中,子页面就不会重复加载和父页面公用的js和css库,这样组合的性能就很高,内存占用很低。我们把这种方法称为片段组合。但是如果仅仅是把多个页面片段简单组合拼装在一起,页面片段间就可能存在冲突(html里的ID冲突、js里的变量冲突、css冲突),这样会对开发会带来很多限制和麻烦。要解决多页面片段的冲突问题,需要框架提供支持才行,WeX5就提供了这样的支持。这个特性也是WeX5的一个重要优势,很多框架没有提供组合式页面开发的支持。为了能够更直观体验和理解windowContainer嵌入页面的性能,请看这篇文章。

页面组合,说得高大上一点,就是页面模块化开发方式,这是前端发展的趋势,是为了达成前端工程师的一个理想,希望搭积木式开发和维护系统,通过组装可复用页面模块得到一个完整的系统。需要注意的是这儿的模块化不仅仅是js和css的模块化,而是整个页面单元(html、js、css)的模块化。

(未完待续)

 

本文由WeX5君整理,WeX5一款开源免费的html5开发工具H5 App开发就用WeX5!

阅读其他app 开发相关文章:http://doc.wex5.com/?p=3443