(视图)View

视图使用说明(`Light.View`)

Lighting中的视图代表一个相对独立的业务单元，也代表了页面展示时的一个屏幕的内容。

异步视图与同步视图

共分为两种视图，异步视图与同步视图。

<view id="index" home="true" /><!--同步视图-->
<view id="index/apply" async="true"/><!--异步视图-->

当视图为异步视图时：视图的关联资源（js资源）是异步引入和调用的。
当视图为同步视图时：视图的关联资源（js资源）是同步引入和调用的。

合理的使用异步视图可以提高页面首屏展示的效率，提高页面的加载速度。

注：无论是同步视图还是异步视图，其关联的html资源都是同步织入的。

视图渲染动画

lighting框架在视图切换时可以添加动画效果，通过animation属性来定义。

;(function () {
    App.defineViewModel("#view1", {
        data: {},
        watch: {},
        methods: {}
    }, {
        animation: {
            in: "slideInRight",
            out: "slideOutRight"
        },
        ready: function () {
        },
        beforeRender: function (params) {
        },
        afterRender: function (params) {
        },
        beforeUnRender: function () {
        },
        afterUnRender: function () {
        }
    });
})();

其中slideInRight,slideOutRight未css3动画，需要将样式定义先引入。

视图生命周期(`Light.View`)

在Lighting中有一个比较重要的观点，视图的生命阶段：初始化(ready)->状态就绪->渲染之前(beforeRender)->页面渲染->渲染之后(afterRender)->服务结束->取消渲染之前(beforeUnRender)->取消渲染->取消渲染之后(afterUnRender)->销毁

应用内的视图是通过Light.defineView 方法定义出来的。

每个阶段都对应了各自不同的生命周期函数。

ready()

参数：无
用法：

当Light.start()以后会以注册顺序依次触发此函数，一般应该以此方法做视图初始化操作。每次视图初次渲染时会执行一次，执行完，再和其他视图切换的时候将不再执行此方法。

示例：

Light.defineView("#view",{
    ready:function(){
        logger.debug("视图ready");
    }
})

beforeRender(params)

参数：{object} params
用法：

当路由切换时，在视图还没展示出来之前，会调用目标视图的beforeRender方法，并将视图参数传入。

示例：

Light.defineView("#view",{
    beforeRender:function(){
        logger.debug("视图beforeRender");
        logger.debug(this.$el.is(":hidden"));
    }
})

第二个日志信息是[Lighting]true可以看出此时的视图是隐藏状态

afterRender(params)

参数：{object} params
用法：

当路由切换时，在视图展示出来后，会调用目标视图的afterRender方法，并将视图参数传入。

示例：

Light.defineView("#view",{
    afterRender:function(){
        logger.debug("视图afterRender");
        logger.debug(this.$el.is(":hidden"));
    }
})

第二个日志信息是[Lighting]false可以看出此时的视图是已经成功显示出来了

beforeUnRender(params)

参数：{object} params
用法：

当路由切换时，视图隐藏，在隐藏之前，会调用当前视图的beforeUnRender方法。

示例：

Light.defineView("#view",{
    beforeUnRender:function(){
        logger.debug("视图beforeUnRender");
        logger.debug(this.$el.is(":hidden"));
    }
})

第二个日志信息是[Lighting]false可以看出此时的视图仍然处于显示状态

afterUnRender(params)

参数：{object} params
用法：

当路由切换时，视图隐藏，在隐藏后，其他视图还未展示出来之前，会调用当前视图的afterUnRender方法。

示例：

Light.defineView("#view",{
    afterUnRender:function(){
        logger.debug("视图afterUnRender");
        logger.debug(this.$el.is(":hidden"));
    }
})

第二个日志信息是[Lighting]true可以看出此时的视图已隐藏

组件框架