預覽ExtJS 4.0的新功能（六）：讀寫器/Opeartion預覽ExtJS 4.0的新功能（六）：讀寫器/Opeartion

許久未更新Blog了，跟大家說聲不好意思，要不是工作特忙，以及遊戲特吸引人，不然早就寫完了，呵呵。當然還離不開夜兄的好言鼓勵，一路有大夥總比一個人不知所然強多了。

下面内容大多源自翻譯……

Ext.data.Reader

相信我們并不陌生Reader。雖然Ext 4.0的reader依然發揮着它的解析原始資料的職能，主要是轉換特定的資料結構，不過由于新加入資料模型的緣故，整體出發仍需要Reader配合。由于新的 需求被提出，Reader也進行了重構，就是今天我們所看到的新Reader類！

Reader負責解析加載到Model或Store的資料，通常值的是AJAX請求完畢後的那些資料。要告訴Reader類怎麼工作，實際就是在配置Model或Sotre的時候說明清楚Reader該怎麼做。參閱它們的文檔或者更好。

Reader可以按照 Ext.data.Association 的定義為每個model所設定的規則讀取複雜多層的資料。如下一個例子充分說明了怎麼在一個财務CRM中靈活地透析模型與資料之間操作。首先時定義一些模型：

Edit 2011-9-22 示例代碼可能與最新版本的 Ext Model 有差別，但不影響主幹意思——感謝 Thanks to QiuQiu/太陽。

Ext.regModel("User", {

fields: [

'id', 'name'

],

hasMany: {model: 'Order', name: 'orders'},

proxy: {

type: 'rest',

url : 'users.json',

reader: {

type: 'json',

root: 'users'

}

});

Ext.regModel("Order", {

'id', 'total'

hasMany : {model: 'OrderItem', name: 'orderItems', associationKey: 'order_items'},

belongsTo: 'User'

Ext.regModel("OrderItem", {

'id', 'price', 'quantity', 'order_id', 'product_id'

belongsTo: ['Order', {model: 'Product', associationKey: 'product'}]

Ext.regModel("Product", {

hasMany: 'OrderItem'

看上去工作量不少，我們隻需要知道，使用者有許多張訂單，其中每張訂單有不同的貨物組成。它們的實體資料示範如下：

{

"users": [

"id": 123,

"name": "Ed",

"orders": [

"id": 50,

"total": 100,

"order_items": [

"id" : 20,

"price" : 40,

"quantity": 2,

"product" : {

"id": 1000,

"name": "MacBook Pro"

},

"id" : 21,

"price" : 20,

"quantity": 3,

"id": 1001,

"name": "iPhone"

]

傳回的JSON層數很多，包括有全部使用者（出于示範目的暫且一個）以及使用者下面的全部訂單（示範一個）以及每張訂單裡面具體有什麼貨品（示範兩個），最後就是Product關聯與OrderItem。于是，我們可以這樣地讀取和使用資料：

var store = new Ext.data.Store({

model: "User"

store.load({

callback: function() {

//得到的使用者

var user = store.first();

console.log("Orders for " + user.get('name') + ":")

//列出使用者的訂單

user.orders().each(function(order) {

console.log("Order ID: " + order.getId() + ", which contains items:");

//列出每張訂單的貨物

order.orderItems().each(function(orderItem) {

// 貨品資料已經有了，是以我們可以getProduct同步資料。一般而言我們用異步的版本（請參閱{@link Ext.data.BelongsToAssociation}）

var product = orderItem.getProduct();

console.log(orderItem.get('quantity') + ' orders of ' + product.get('name'));

運作上述代碼的結果會如下：

Orders for Ed:

Order ID: 50, which contains items:

2 orders of MacBook Pro

3 orders of iPhone

Writer首次出現在Ext 3.0的API，目的是在針對寫操作時，提供一個健全的API。Writer在4.0中得到加強和改善。

用戶端如何“寫”資料？這裡的“寫”隻是為了友善描述頁面上的資料發生了變化，需要儲存到服務端的這麼一個過程。Ext API中，對應的就有Read 讀的這麼一個過程。CRUD是一個極簡潔的抽象過程，Read/Writer也是抽象出的一種普通動作。Store記錄的資料沒有被儲存的話，仍是用戶端上記憶體反映的資料。我們必須透過一些定義良好的界面類将資料儲存到服務端之中、資料庫之中。這時Writer就發揮作用了。整體API中，Writer的發生過程與Request、Operation有關。

Writer通常為ServerProxy其子類所使用。該類的作用是讓Operation與Ext.data.Request之間産生關系，具體說就是根據Operations修改請求對象。例如 Ext.data.JsonWriter會根據配置項參數格式化操作對象及其Ext.data.Model執行個體。配置項參數來自哪裡？原來是來自JsonWriter的構造器參數。

Writer的關鍵方法便是write()，該方法接受有一個Request類型對象的參數，實際上是經過Request、Operation對象的records屬性，擷取到基于JSON結構的記錄實體，收集要“寫入”的那些資料，然後再通過模闆方法getRecordData()轉換資料格式，儲存到writeRecords()中（writeRecords()也是一個模闆方法）。故是以，用戶端的資料必須轉換為特定的格式發送到服務端的。目前，Writer下面提供了兩個子類JsonWriter和XMLWriter，代表可以支援JSON/XML的這兩種經典資料格式。

另外一點，Writer終端的服務端對象并不包括LocalStorge本地儲存。

單個Operation類表征了Proxy在進行單個讀或者寫的時候的具體操作，多個Operation可以批處理為一個Batch（Ext.data.Batch）。Operation對象用于激活Stores和Proxy之間操作，但是必須提出，開發人員通常不會直接和Operation對象打交道，也就是Ext API會内部使用Operation。