扩展spa

skylarkjs提供的spa是一个精简的应用框架，为了应对实际开发中的一些复杂场景，skylarkjs同时也提供了一个便利扩展机制。

在slax-config.json中指明spa模块，比如：

{
  "runtime":"...",
  "spaModule": "scripts/helpers/spa",
  "page": "..."
}

skylarkjs自带类型系统，所以可以很方便的实现类继承与重载，spa的扩展就是用到类继承与重载的原理。

define([
    "skylarkjs"
], function(skylarkjs) {
    var spa = skylarkjs.spa,
        router = skylarkjs.router,
        langx = skylarkjs.langx,
        velm = skylarkjs.velm;

    function createEvent(type, props) {
        var e = new CustomEvent(type, props);
        return langx.safeMixin(e, props);
    }
    spa.Application = spa.Application.inherit({
        showPopPage: function(node) {
            this.getPlugin("popPage").controller.show(node);
        },

        hidePopPage: function() {
            this.getPlugin("popPage").controller.hide();
        },

        getPlugin: function(key) {
            return key ? this._plugins[key] : this._plugins;
        }
    });
    spa.Page = spa.Page.inherit({
        init: function(params) {
            params = langx.mixin({
                "routeViewer": "body"
            }, params);

            this._params = params;
            this._$rvc = velm.find(params.routeViewer);
            this._router = router;

            router.on("routed", langx.proxy(this, "refresh"));
        },
        refresh: function() {
            var curCtx = router.current(),
                prevCtx = router.previous(),
                content = curCtx.route.render(curCtx);
            this._$rvc.html(content);
            curCtx.route.trigger(createEvent("rendered", {
                route: curCtx.route,
                content: content
            }));
        }
    });
    return spa;
});

上面的扩展代码实现了两个功能：

1. 为spa添加了popPage功能，在页面中实现类似dialog弹出层的页面功能（提供了两个公共方法：showPopPage，hidePopPage）。
2. 覆盖了原来的page模板渲染的实现方法，使得rendering方法中e.content不仅支持字符串和dom节点还支持query selector对象。

在实际开发场景中，可以将复杂的功能模块通过类继承机制集成到spa中，也可以通过类重载机制覆盖原来默认的实现机制。