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会在下一版中发布,到时会有很多丰富的例子。
smartjs - DataManager 场景示例分析 - 数据懒加载的更多相关文章
- JPA数据懒加载LAZY配合事务@Transactional使用(三)
上篇博文<JPA数据懒加载LAZY和实时加载EAGER(二)>讲到,如果使用懒加载来调用关联数据,必须要保证主查询session(数据库连接会话)的生命周期没有结束,否则,你是无法抽取到数 ...
- JPA数据懒加载LAZY和实时加载EAGER(二)
懒加载LAZY和实时加载EAGER的概念,在各种开发语言中都有广泛应用.其目的是实现关联数据的选择性加载,懒加载是在属性被引用时,才生成查询语句,抽取相关联数据.而实时加载则是执行完主查询后,不管是否 ...
- JPA数据懒加载LAZY和实时加载EAGER(转)
原文:https://www.cnblogs.com/MrSi/p/8081811.html 懒加载LAZY和实时加载EAGER的概念,在各种开发语言中都有广泛应用.其目的是实现关联数据的选择性加载, ...
- WPF ListView 数据懒加载
实现方式:当滑动条触底时,加载数据 xaml代码: <ListView ScrollViewer.ScrollChanged="ListView_ScrollChanged" ...
- VUE 实现监听滚动事件,实现数据懒加载
methods: { // 获取滚动条当前的位置 getScrollTop() { let scrollTop = 0 if (document.documentElement && ...
- JPA的懒加载
JPA数据懒加载LAZY和实时加载EAGER(二) 懒加载LAZY和实时加载EAGER的概念,在各种开发语言中都有广泛应用.其目的是实现关联数据的选择性加载,懒加载是在属性被引用时,才生成查询语句 ...
- hibernate懒加载(转载)
http://blog.csdn.net/sanjy523892105/article/details/7071139 懒加载详解 懒加载为Hibernate中比较常用的特性之一,下面我们详细来了解下 ...
- Hibernate懒加载深入分析
Hibernate懒加载深入分析 懒加载可以提高性能吗? 不可以简单的说"能",因为Hibernate的关系映射拖累了SQL的性能,所以想出懒加载来弥补.只是弥补而以,不会超越. ...
- Hibernate中的一级缓存、二级缓存和懒加载(转)
1.为什么使用缓存 hibernate使用缓存减少对数据库的访问次数,从而提升hibernate的执行效率.hibernate中有两种类型的缓存:一级缓存和二级缓存. 2.一级缓存 Hibenate中 ...
随机推荐
- Leetcode 121 Best Time to Buy and Sell Stock 动态规划
由于题意太长,请自己翻译,很容易懂的. 做法:从前向后遍历数组,记录当前出现过的最低价格,作为买入价格,并计算以当天价格出售的收益,作为可能的最大收益,整个遍历过程中,出现过的最大收益就是所求.动态规 ...
- Leetcode 110 Balanced Binary Tree 二叉树
判断一棵树是否是平衡树,即左右子树的深度相差不超过1. 我们可以回顾下depth函数其实是Leetcode 104 Maximum Depth of Binary Tree 二叉树 /** * Def ...
- ArcGIS Server新建主题图服务的步骤
ArcGIS Server新建主题图服务的步骤: 1.修改数据库模型图(PowerDesigner) 2.修改lygis.gdb文件数据库(发布时可以快速把表结构从gdb数据库拷贝到客户服务器的SDE ...
- 使用Nginx负载均衡搭建高性能.NETweb应用程序一
一.遇到的问题 当我们用IIS服务器部署了一个web应用以后,当很多用户高并发访问的时候,客户端响应就会很慢,客户的体验就会很差,由于IIS接受到客户端请求的 时候,就会创建一个线程,当线程达到几千个 ...
- 制作6寸 kindle pdf
设置word 纸张大小为 90mm*117mm 然后保存为 pdf 就好了.
- eoe移动开发社区创始人兼CEO靳岩:开发者缺极客精神
(国内知名Android开发论坛eoe开发者社区推荐:http://www.eoeandroid.com/) [媒体专稿]移动互联网在中国的深入发展已经有5.6个年头,从当初苹果推出iPh ...
- Andriod调用http请求
// 新建HttpPost对象 HttpPost httpPost = new HttpPost( "http://180.153.1.1:8080/mybankGateway/gatewa ...
- nginx location 的配置
一.基本语法:location [=|~|~*|^~] /uri/ { … } 二.分类: 1.基本location:以“ = ”或“ ^~ ”为前缀或者没有任何前缀的 /uri/ 2.正则locat ...
- DataTable 更改在有数据列的类型方法+DataTable 导出excel功能
/// <summary> /// 导出功能 /// </summary> /// <param name="sender"></para ...
- [AX2012 R3]在SSRS报表中使用QR二维码
AX2012是自带生成QR二维码的类,可以很方便的用在SSRS报表中,下面演示如何在RDP的报表中使用二维码,首先从定义临时表开始: 字段URL是要用于二维码的字符串,QrCode是container ...