预览ExtJS 4.0的新功能(五):焕然一新的Store/Proxy

接上文

Proxy

Ext.data.Proxy 是一个十分关键的数据通讯类。Proxy 直译“代理”,可数据怎么能够代理?有点不通!Proxy 到底指的是什么意思呢?

依小弟浅见,定义 Proxy 就是定义数据源,至少 Ext 中 AjaxProxy/ScriptProxy/LocalProxy/SessionProxy 表现如此。当 Store 要为Ext.data.Model4 加载或者保存数据的时候,必须通过这个 Proxy 类。具体说,Proxy的操作就是将所有最终的数据操作视作为增、删、改、查四种,即Create、Read、Update或Delete。这四个操作分别映射了create(), read(), update() 和destroy()。不同的Proxy子类的任务就是要逐个去具体化这些CRUD是什么了,然后才返回到Store。而CRUD方法中,都期待一个Ext.data.Operation
对象的独占参数传入。……Operation 是什么?Opeartion 是4.0的新内容,封装了 Stroe 将要执行的动作信息、要修改的Ext.data.Model 实例等等。 在完成阶段,每个 CRUD 方法皆支持异步的回调函数。

API的实现中,Proxy可分为ServerProxy和ClientProxy两大类:

Server Proxy就是通过Request发送数据到远端;Client Proxy的意思是在客户端保存本地的数据。下面就展开作介绍。

Ext.data.ServerProxy(AjaxProxy)

ServerProxy是AjaxProxy和ScriptTagProxy这个两个类的超类。一般来说AjaxProxy是典型情况下最常用的Proxy,页面代码中设定参数,经过AJAX管道从服务端取得数据。AjaxProxy只针对同源的页面。不能脱离本页面的范围进行跨域(CrossDomain)获取数据。要进行跨域获取数据则使用ScriptTagProxy。理想情况下,应该称ServerProxy为HttpProxy,因为这是涵盖所有HTTPProxy的超类——但在Ext4.0中作了调整,HttpProxy则矮化到只是AjaxProxy的简写。原本3.x中的HttpProxy到这里却变为ServerProxy。

ScriptProxy的差别与旧版不大,原理上也是采用script tag进行变相的跨域,缺点是只适合JSON数据格式的时候。关于跨越的方案,我们还可以多看看Ext.util.JSONP这个类。

Ext中如何REST式Web资源?

如果需要进行RESTful的风格应用,我们可以在AjaxProxy的“GET/POST”基础上增加“PUT/DELETE”,充分利用这四个HTTP动词,对此,Ext的实现就是Ext.data.ResetProxy。ResetProxy中所提供的'create','read','update' and'destroy'分别对应着POST、GET、PUT、DELETE方法(注意此处与AjaxProxy.actionMethods的不同,AjaxProxy.actionMethods限定在GET/POST操作内完成。)。也就是说,ResetProxy管理着数据的API,除了创、见、变、灭的这四种CRUD操作进行了定义之外,还分别将这些操作映射到了RESTful的HTTP方法:GET、POST、PUT和DELETE。

其中Ext.data.RestProxy.actionMethods一项应保持不变除非使用全局Ext.override()的方法覆盖默认值,另外也可以用重写getMethod(由Ext.data.AjaxProxy继承得到)来代替。总之,我们还可以扩展其他的HTTP动词。鉴于RestProxy代码行数比较少,特贴出如下:

/**
* @author Ed Spencer
* @class Ext.data.RestProxy
* @extends Ext.data.AjaxProxy
*/
Ext.data.RestProxy = Ext.extend(Ext.data.AjaxProxy, {
actionMethods: {
create : 'POST',
read : 'GET',
update : 'PUT',
destroy: 'DELETE'
},

api: {
create : 'create',
read : 'read',
update : 'update',
destroy: 'destroy'
}
});

与旧版3.3的Ext.data.Api比较(参见3.x的介绍),虽然都是围绕REST而设,但新版ResetProxy代码行数大幅减少,之所以这样,初步判断是合理地发挥了OO方法论所带来的结果(对比一下旧版Api是单例的设计)。

Ext.data.ClientProxy(MemoryProxy/WebStorageProxy)

Ext.data.ClientProxy是为客户端而设的存储基类(因为ClientProxy是基类,请不要直接使用)。它的子类有Ext.data.MemoryProxy和Ext.data.WebStorageProxy,这两个子类的主要用途如下:

  • MemoryProxy是内存中proxy,所以一刷新浏览器的话,就没有了本地数据。也就是MemoryProxy内的都是指内存中的数据,一旦刷新页面数据将不复存在。通常来说不会直接使用到这个类,什么时候使用呢?比如一个User模型和来源不同的数据,它们之间的结构不是十分吻合,我们便可以灵活使用MemoryProxy和JsonReader作转换,然后加载到Store中去。
  • WebStorageProxy是Ext.data.LocalStorageProxy及Ext.data.SessionStorageProxy 的基类,它使用了HTML5新型的ley/value客户端存储方案来保存Ext.data.Model实例,达到离线持久化之目的。实例化WebStorageProxy的过程中,如果浏览器不支持HTML5客户端存储方案,就立刻抛出一个异常。

如UML图所示,WebStorageProxy有标准的CRUD方法;MemoryProxy只有read()方法;但它们都有clear()方法,这个方法会删除掉客户端的使所有记录数据,包括像IDs的这样的支持数据。下面是利用Memory作转换的一个例子:

Edit 2011-9-22 示例代码可能与最新版本的 Ext Model 有区别,但不影响主干意思——感谢 Thanks to QiuQiu/太阳。

// 这时Store中所使用的模型。
Ext.regModel('User', {
fields: [
{name: 'id', type: 'int'},
{name: 'name', type: 'string'},
{name: 'phone', type: 'string', mapping: 'phoneNumber'}
]
});
// 此数据并不是与我们上面定义的模型所吻合,就是phone字段必须映射为phoneNumber。
var data = {
users: [
{
id: 1,
name: 'Ed Spencer',
phoneNumber: '555 1234'
},
{
id: 2,
name: 'Abe Elias',
phoneNumber: '666 1234'
}
]
};
// 注意如何设置reader中的“root: 'users'”,看看是怎么对应上面的数据结构的。
var store = new Ext.data.Store({
autoLoad: true,
model: 'User',
data : data,
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'users'
}
}
});

前提提到,WebStorageProxy 有两个子类,它们是:

  • LocalStorageProxy:以 HTML5 本地存储为服务对象。
  • SessionStorageProxy:以 HTML5 Session 存储为服务对象。

再次强调,无论 LocalStorageProxy 还是 SessionStorageProxy 都是涉及新型的 HTML5 功能的,所以假设浏览器不支持 HTML5 的功能,WebStorageProxy 的构造函数立刻就会抛出一个异常。使用本地存储的时候,需要一个独一无二的 ID 作为存放全部记录对象的 KEY,并且切记送入的 ID 必须是独一无二的,否则调用过程将是不稳定的。如果没有送入 ID,则 storeId 会视为 ID。如果什么 ID 都没有将会抛出一个异常。

Proxy 总是结合 Ext.data.Store 使用的,另外你也可以直接地创建 Proxy 的,如下两例:

new Ext.data.Store({
proxy: {
type: 'localstorage',
id : 'myProxyKey'
}
});
// 直接创建
new Ext.data.LocalStorageProxy({
id : 'myOtherProxyKey'
});

新提供的 WebStorageProxy 包括了离线(offline)的任务,除了 WebStorageProxy,4.0的 Ext 还提供 WebSqlProxy 使得存储客户端可以借助 SQL 语句来完成。不过现在没有发现 WebSqlProxy 的源码,估计到最终发布才会看见了。

Store/Proxy小结

Data 变化很大,可列举很多的陈述,这儿提出一个小地方:新的 Ext.data.TreeStore/Ext.data.TreeReader 引入。Ext.Tree不再使用TreeLoader的绑定数据形式,那是旧3.x之前的形式。其实没有必要为Tree组件单独而设一种不同的数据模型。Ext4 意识到这点,在这次发布中就可以看到Tree统一归Store的数据源。

如此这类的还有其他的吧~

话说核心团队成员EdSpencer是ExtJS4的架构设计者,他在SenchaCon大会上负责Ext的架构、新特性的演讲,另外Ext.data.*即就是出自他手的。借此处说话的机会,我觉得应该客气地多谢他,不管怎么人家也是开源的。我们看到的是Ext.data.*得到了重新编写,形成这样的API局面,个人认为这是4.0其中变化最大的一项,并且是迷人的地方。诚如官方RoadMap所说的“A rewrite of the Ext.datapackage with a brand new architecture
and enormous newcapabilities”果然名不虚传。

Data部分还有戏。Ext.data.Operation实际上说的是CRUD操作,也就是介乎于Store与Proxy之间的CRUD操作。而Ext.data.Batch是Opeartion的集合形式,把多个Operation打包起来就成为了Batch。另外还有reader/writer,下一期有机会再展开讨论。

转载请注明出处Ext中文网http://www.ajaxjs.com)。

时间: 2024-07-29 09:09:34

预览ExtJS 4.0的新功能(五):焕然一新的Store/Proxy的相关文章

预览ExtJS 4.0的新功能(六):读写器/Opeartion

 转载请注明出处Ext中文网 (http://www.ajaxjs.com ).   预览ExtJS 4.0的新功能(六):读写器/Opeartion 许久未更新Blog了,跟大家说声不好意思,要不是工作特忙,以及游戏特吸引人,不然早就写完了,呵呵.当然还离不开夜兄的好言鼓励,一路有大伙总比一个人不知所然强多了. 下面内容大多源自翻译-- Ext.data.Reader 相信我们并不陌生Reader.虽然Ext 4.0的reader依然发挥着它的解析原始数据的职能,主要是转换特定的数据结构,不过

预览ExtJS 4.0的新功能(二):客户端的对象关系映射(ORM)

4.0之前,Ext 的功能已经十分丰富,数据层却难以令人满意.作为 UI 框架,数据层可能不是重点,但明显攸关到业务顺利的展开与否.然而,3.0 之后,虽然过增加了 Ext.data.Api/REST/Direct 等的新协议,但无论 3.0 还是 2.0,Ext.data.* 底层仍维持 1.0 的对象模型.越来越多的新协议和新机制加入到 Ext.data.*后,反而造成 API 逾加凌乱.这样就有了改造 data 的必要了.可喜的是,4.0 中已经重构 Ext.data.* 部分,重点解决旧

预览ExtJS 4.0的新功能(四):焕然一新的Store/Proxy

焕然一新的Store/Proxy 转载请注明出处Ext中文网 (http://www.ajaxjs.com) . 上期讲到,Ext JS4 可以允许我们定义业务模型之间的关系(Association),在浏览器客户端就可以描述我们的业务模型如何,甚至灵活调用域对象(Domain Object)也不是一件难事.可是如果没用实体数据,业务模型也只是"空壳",缺了内容也不存在什么"UI 数据绑定"一说.当然,Ext 中,我们可以为 Model 调入与之 Schmea 匹配

预览ExtJS 4.0的新功能/新特性(一):渲染组件的方式

转载请注明出处Ext中文网(http://www.ajaxjs.com). ExtJS 3.3的下一个版本就是4.0.--什么!?您不知道?那就让我们为你展开新一段的 Ext 之旅吧! 一.渲染组件的方式 话说 ExtJS Roadmap(新版本线路图)其中重要的一项就是"Rearchitected component rendering system - smaller, faster and simpler than ever before",重新编制组件的渲染架构,目标是比以前更

预览ExtJS 4.0的新功能(三):客户端数据层的革新:引入ActiveRecord模式

转载请注明出处Ext中文网 (http://ajaxjs.com). Ext JS 4最强大的机能之一就是将模型的关系映射链接到一起.在 Ext 4 数据模型中,这种链接关系是通过关联操作(associations)来完成的.在应用中定义不同物件的关系是非常自然的.比如说,在一个食谱数据库中,一条食谱可能会有多条评论,多条评论又可能为同一作者所写,而作者又可以创造多条食谱.透过定义这种链接关系可以让你以更直观地更强大的方式去操纵数据. 一.预备知识 首先是 belongTo 管关联.何谓"bel

ASP.NET 2.0的新功能

ASP.NET 2.0的新功能 ASP.NET 2.0提高ASP.NET通过增加一些新的特点. -------------------------------------------------- ------------------------------ 改进ASP.NET 2.0中 ASP.NET 2.0的目的是使Web开发更容易和更快. 设计目标为ASP.NET 2.0 : 提高生产率,消除70 %的代码 使用相同的控制,所有类型的设备 提供一个更快更好的Web服务器平台 简化汇编和安装

《圣殿祭司的ASP.NET4.0专家技术手册》----1-2 .NET 4.0平台新功能概览

1-2 .NET 4.0平台新功能概览 圣殿祭司的ASP.NET4.0专家技术手册 .NET平台版本从1.0.1.1.2.0.3.0.3.5不断演进.最新4.0版的重要改进如下: NET Framework 4.0 Visual C# 2010 Visual Basic 2010 Visual F# 2010(或F# 2.0) 新的CLR 4.0运行时 DLR动态语言运行时(Dynamic Language Runtime) ASP.NET 4.0 ASP.NET MVC 2.0(最新版为4.0

《圣殿祭司的ASP.NET4.0专家技术手册》----2-1 C# 4.0语言新功能

2-1 C# 4.0语言新功能 圣殿祭司的ASP.NET4.0专家技术手册 C# 4.0新增的语言功能,除了命名实参和可选实参(VB早已支持)较为常用,其他功能几乎是从动态基础衍生出来的便利性或灵活性,新功能如下: 命名实参和可选实参(Named and Optional Arguments): Dynamic动态类型(Dynamic Type): 共变量与反变量(Covariance and Contravariance): Office可程序性支持(Office Programmabilit

Android Studio 3.0 引入新功能,支持Kotlin语言

除了 Android 8.1 Oreo 开发者预览版,Google 今日还正式发布了 Android Studio 3.0 ,为其 IDE 引入了一系列新功能. Android Studio 3.0 专注于加速 Android 应用开发,包含大量更新内容,主要分为三个功能块,包括: 一套用于快速诊断性能问题的新的应用程序分析工具 支持 Kotlin 编程语言 用于加速在最新的 Android Oreo API 上开发的新工具 更新概述: 开发 Kotlin 编程语言支持 -- 正如谷歌在 Goo