动手学WeX5:windowContainer组件-极轻量的类iframe组件

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.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