smartjs - DataManager 场景示例分析 - 数据懒加载

发一张policy的参数图设置图：

 

场景1 - 数据的懒加载/延迟加载

在不少时候，为了提升网页的加载速度，减小没必要要的开销，会将页面的数据拆分红几个部分，首先加载呈现可视区域内的数据，而后剩下来的会在须要的时候在进行加载。

而这种按需加载的数据又分为两种：

　　1.按照须要进行加载；能够是由某个动做触发来引发，好比：tab，查看更多等；

　　2.采用缓存的方式；对后续动做的预知，提早将后续的数据加载进来，放入到缓存中；等须要的时候能提供快速的响应；好比：不少igrid的滚动分页

 

那么来看一下在dataManager如何快速简单的完成这两种方式，首先以一个用户信息关联项目为的例子：

//服务端的user数据转成前端model数据
var userData = {
    id: 1,
    name: "user1",
    age: 20,
    role: "tester"，
    //关联projectid
    projectId： 1
}
//项目数据的model数据
var projectData = {
    id: 1
    name: "smartjs",
    ver： "0.3"
}

第一种按需加载方式：

//建立一个object的对象
var user = dataManager.create("object", {
    //设置主键字段
    key : "id",
    //get动做的策略
    get: {
        //定义数据服务
        dataServices: {
            //ajax数据服务
            dsType: "ajax",
            //默认的请求url地址；根据id查询
            url: "services/user/{id}",
            //field规则映射
            fieldMapping: {
                //project的查询地址
                project: "services/project/{projectId}"
            }
        }
    }
})

//首先经过id=1的条件，查询user
user.get({
    //设置查询参数，默认匹配key字段
    params : 1,
    //执行成功，数据填充到dm，并执行成功方法
    success : function(result){
        //进行数据渲染
        renderUser(result);
    }
})

//当须要查询项目信息时
user.get({
    //查询的字段；dm会根据field匹配到fieldMapping的ajax设置，从而拿到数据
    field : "project",
    //执行成功，数据填充到dm，并执行成功方法
    success : function(result){
        //进行数据渲染
        renderProject(result);
    }
})

使用了两个get的方法，第一个查询user信息，第二个查询project信息；project查询会根据field找到fieldMapping对于的配置，根据dm内部的数据格式化url参数，而后在发送请求

 

第二种缓存方式

若是采用缓存方式，预期在查询玩user后，想延迟2s在加载project信息，那么应该怎么作？答案是:使用dataManager的trigger

var user = dataManager.create("object", {
    //设置主键字段
    key: "id",
    //get动做的策略
    get: {
        //定义数据服务
        dataServices: {
            //ajax数据服务
            dsType: "ajax",
            //默认的请求url地址；根据id查询
            url: "services/user/{id}"
        },
        //定义触发器
        trigger: [{
            name: "get project",
            //延迟2s
            delay: 2000,
            field: "project",
            dataServices: {
                //ajax数据服务
                dsType: "ajax",
                //project的查询地址
                url: "services/project/{projectId}",
            },
            //触发器执行成功，数据填充到dm数据的project字段中，并执行成功方法
            success: function(result) {
                //进行数据渲染
                renderProject(result);
            }
        }]
    }
})
//首先经过id=1的条件，查询user
user.get({
    //设置查询参数，默认匹配key字段
    params: 1,
    //执行成功，数据填充到dm，并执行成功方法
    success: function(result) {
        //进行数据渲染
        renderUser(result);
    }
})

 

从例子中能够看到，不须要定义field的映射；而是经过设置trigger来完成；trigger会在get动做时触发（默认的策略为有从dataServices请求时触发）；延迟2s发送ajax请求拿到数据，执行trigger的success

 

结尾

目前提供的都是一些伪代码，你们能够看下处理的思路；dataManager-object、table，tree和还有不少的dataService都还没完成；想这样使用的话，还得等一段时间。

如今贴出来也是想抛砖引玉，你们有比较好的场景也能够说一下，看dataManager可否支持。

 

不过dataManager的引擎已经完成了初步。有兴趣的同窗能够本身根据引擎建立出适合本身使用的数据管理和数据服务。

固然等后面SmartJs功能完善后，使用会比例子中更加简单，并且功能也更增强大。

 

后面还会介绍 “数据自动同步”，“多数据服务通讯”，“消息订阅”几个场景，对于使用的最多的table类型的数据就很少作介绍了，由于dataManager-table会在下一版中发布，到时会有不少丰富的例子。