模块化异步加载

[xspider]

<<返回目录

由于SPA类应用的特殊性，为了提高首屏可操作性的速度，大部分的模块都可以使用异步加载来完成。

异步加载框架可以使用常见的seajs或百度的FIS异步加载包。Chassis本身不包含这类框架。Chassis对异步加载框架的需求仅是：能异步的获取代码并执行，对是否满足AMD/CMD没有要求。

在使用异步加载之前，需要先做一个简单的配置，以指定异步加载框架及指定异步加载的路径。

F.load = seajs.use;

//如果需要特殊的指定加载路径规则，可以这样
Chassis.load.config.ruler = function( pkg ){
                return '../test/data/' + pkg;
};

下面展示subview异步加载的一个例子：

(function($){

Chassis.PageView.sayhello = Chassis.PageView.extend({

    el: '#sayhello_page'

    ,init: function(options){
        var me = this,opt;

        opt = $.extend({}, options);

        //异步加载subview
        me.prepend('say_header',opt);
        me.setup('sayhello_content',opt);

        /* 这样写就不能使用异步和按需加载
        me.setup(new rocket.subview.sayhello_header(
            $.extend({}, options)
            ,me
        ));

        me.setup(new rocket.subview.sayhello_content(
            $.extend({}, options)
            ,me
        ));
        */

        // render异步子模块,也可以这样写:me.renderAsyncSubView(['say_header','sayhello_content']);
        me.renderAsyncSubView();
    }

});

})(Zepto);

异步加载唯一的要求就是：不要自己生成subview的实例，交给框架来做。

再比如SubPage也是如此：

(function($){

Chassis.SubView.say_content = Chassis.SubView.extend({

    className: 'say_page_content'

    ,init: function(options){
        var me = this,
            title = options.title,
            subView,
            spm;

        this.spm = new Chassis.SubPageMgr({
          owner: this,
          max: 15,
          klass: 'say_content_detail' //rocket.subview.say_content_detail
        });
    }

    , onBeforePageIn : function(){
        this.$el.show();

    }

});

<<返回目录