模块

一个典型的模块结构如下

export default {
    name : '',
    data:{},
    //视图渲染函数
    render:()=>tmp //tmp为外部引入的模板文件
    //生命周期函数
    //onCreated(){},
    //onReady(){},
    //onShow(){},
    //...
    //业务逻辑函数
    //otherFunc(){}     
}

name

name 对应的是路由配置的hash 名 比如路由项为list，那么这里的name 则为 list

//router
export default {
    list:(res)=>{
        require(['./list.js'],res)
    }
}

//list.js
export default {
    name:'list'
}

data

data 定义 一个模块的初始值，这里所有的字段都会被双向绑定模块捕获到并进行 getter 和 setter 的 改造

data:{
    page:1,
    items:{},
    isTrue:true
}

render

render 函数 用于返回 一个tmplate 模板字符串

//es5
render:function () {
    return tmp
}

//es6
render:()=>tmp

生命周期函数

onCreated

onCreated 在模块被初始化时候被调用，也就是模块被懒加载完毕后触发

onReady

onReady 在被插入dom 时候 调用

onShow

onShow 在页面切换动画调用完毕后触发，也就是push 到主视口

onUpdata

onUpdata 在页面数据发生改变，也就是重现dom diff 后 触发

onUnload

onUnload 在页面被销毁时调用，页面滚动到窗口右边缘之后自动销毁

onReload

当一个页面被推出后，重现显露出来的页面会触发这个事件

自定义业务逻辑函数

直接命名书写即可，事件则需要在模板中通过n:event指令绑定

//template
<div n:click="setSomething"></div>


//module
export default {
    name:'list',
    data:{},
    setSomething(ev) {
        //可以获取 ev 对象
    }    
}

一个典型的module 文件结构

//引入外部 模板文件
import tmp from './index.na';
//引入ajax request的模块
import request from '../../utils/request';

export default {
    name: 'productDetail',
    data:{
        id:'',
        item:''
    },
    //渲染视图
    render() {
        return tmp
    },
    //生命周期
    onCreated(query) {
        let that = this;

        that.data.id = query.id;

        request.send('getcon', {
            type: 'product',
            fn: 'nocallback',
            id: that.data.id
        }, function (res) {
            that.data.item = res.data
        });
    },
    //自定义函数
    goback() {
       this.router.goback();
    }
}