深入瞭解Dojo Data

深入瞭解Dojo Data

——譯自http://www.sitepen.com/blog/2010/10/13/dive-into-dojo-data/

 

使用Dojo Data有助於快速建立Web應用的介面，且易於嵌入各種資料來源。它在使用者介面與底層資料之間提供了一層抽象層，使得使用者介面開發人員能夠專註於UI的開發，而無需擔心資料庫、伺服器、或者資料格式的唯一性。

在接下來的例子裡，我們將用一個JsonRestStore為DataGrid提供資料。然後，我們將用一個XmlStore替換這個JsonRestStore，以顯示UI和資料來源的解耦所帶來的便利。

資料以JSON的方式表示：

dataItems = [<br /> { "id": "AF", "name":"Africa", "type":"continent",<br /> "population":"900 million", "area": "30,221,532 sq km" },<br /> { "id": "AS", "name":"Asia", "type":"continent",<br /> "population":"1 billion", "area": "25,428,192 sq km" },<br /> { "id": "OC", "name":"Oceania", "type":"continent",<br /> "population":"21 million", "area": "15,928,294 sq km" },<br /> { "id": "EU", "name":"Europe", "type":"continent",<br /> "population":"56 million", "area": "25,928,294 sq km" },<br /> { "id": "NA", "name":"North America", "type":"continent",<br /> "population":"100 million", "area": "90,928,294 sq km" },<br /> { "id": "SA", "name":"South America", "type":"continent",<br /> "population":"102 million", "area": "78,928,294 sq km" },<br /> { "id": "AN", "name":"Antarctica", "type":"continent",<br /> "population":"998", "area": "102,928,294 sq km" }<br />];
小提示：可以到jsonlint.org
驗證JSON格式的正確性。

JsonRestStore需要與一個資料服務相連。本例中我們只建立一個類比服務。注意為了簡單起見，我們將省略"query"這個參數，返回所有的資料項目。

var mockService = function(query){<br /> var d = new dojo.Deferred();<br /> d.fullLength = dataItems.length;<br /> d.callback(dataItems);<br /> return d;<br />};

 

下一步，我們用一個服務函數和一個目標URL來建立JsonRestStore。同樣，對於這個例子而言我們將省略"target"參數。這個殘水對於今後開發真正的REST服務非常重要，但現在暫時不需要。
jsonStore = new dojox.data.JsonRestStore({<br /> service: mockService,<br /> target: ‘/some/url’<br />});

JsonRestStore適用於比較大型的資料集。對於這種資料集，你往往不想（或根本不可能）高效地將其完全傳送到用戶端。JsonRestStore能夠很好地處理與伺服器端的互動。

最後，我們來聲明一個dojox.grid.DataGrid。我們將用它顯示資料。
<table jsid="grid" store="jsonStore" query="{name:’*'}" dojoType="dojox.grid.DataGrid" class="grid"><br /> <thead><br /> <tr><br /> <th field="name" width="auto">Name</th><br /> <th field="population" width="auto">Population</th><br /> <th field="area" width="auto">Area</th><br /> </tr><br /> </thead><br /></table>

同樣的JsonRestStore也能夠同時為一個dijit.form.ComboBox提供資料：
<input dojoType="dijit.form.ComboBox" store="jsonStore" searchAttr="name"></input>

看，把同一份資料用於不同的UI小組件就是這麼簡單！

接下來，我們用一個XmlStore來換下這個JsonRestStore，看看轉換資料格式有多簡單。資料檔案如下：

<continents><br /> <continent><br /> <name>Africa</name><br /> <population>900 million</population><br /> <area>30,221,532 sq km</area><br /> </continent><br /> <continent><br /> <name>Asia</name><br /> <population>1 billion</population><br /> <area>25,428,192 sq km</area><br /> </continent><br /> <continent><br /> <name>Oceania</name><br /> <population>21 million</population><br /> <area>15,928,294 sq km</area><br /> </continent><br /> <continent><br /> <name>Europe</name><br /> <population>56 million</population><br /> <area>25,928,294 sq km</area><br /> </continent><br /> <continent><br /> <name>North America</name><br /> <population>100 million</population><br /> <area>90,928,294 sq km</area><br /> </continent><br /> <continent><br /> <name>South America</name><br /> <population>102 million</population><br /> <area>78,928,294 sq km</area><br /> </continent><br /> <continent><br /> <name>Antarctica</name><br /> <population>998</population><br /> <area>102,928,294 sq km</area><br /> </continent><br /></continents>

 

然後，建立XML資料存放區器：

xmlStore = new dojox.data.XmlStore({<br /> url: ‘continents.xml’,<br /> label: ‘name’<br />});

 

XmlStore是一個用戶端的資料存放區器，用於讀取XML資料來源。它由Dojo官方提供並包含在DojoX子項目中。XmlStore為基本的XML資料（一種常用的資料交換格式）提供讀/寫介面。XmlStore可以用於一般的XML文檔，因此非常有用。儲存空間的設計是你可以通過覆蓋其部分方法來自訂讀/寫資料的行為。

最後，將它交給DataGrid。

<table jsid="grid" store="xmlStore" dojoType="dojox.grid.DataGrid" class="grid"><br /> <thead><br /> <tr><br /> <th field="name" width="auto">Name</th><br /> <th field="population" width="auto">Population</th><br /> <th field="area" width="auto">Area</th><br /> </tr><br /> </thead><br /></table>

 

同時，更新ComboBox：

<input dojoType="dijit.form.ComboBox" store="xmlStore" searchAttr="name"></input>

 

我們不需要修改關於Grid和ComboBox的任何代碼，就能讓它們繼續工作。唯一需要做的改動，就是聲明一個資料來源，並將它設定為grid的輸入。我們不需要操心任何關於資料擷取、解析、以及管理的事情，資料存放區器的API做了所有的工作！

除此之外還有其他許多有用的資料存放區器，包括CsvStore，FileStore，FlickrStore，JsonQueryRestStore，PersevereStore，ServiceStore，WikipediaStore，等等。如果需要一個完整列表，請參見dojox.data目錄

Dojo Data是一個強大而靈活的工具。資料存放區器使得切換前端組件和後端實現都變得很容易，不需要改變許多代碼。因此我們可以為同一個資料存放區器很方便地更換前端Diji組件，另外，同一個資料存放區器也能由頁面上的多個Dijit組件、圖表或grid同時使用。

更多相關資源：

• RESTful JSON + Dojo Data
• Easy Exploration of Dojo Data Stores
• Web Service to dojo.data Store in 4 Easy Steps