深入了解Dojo Data

深碍√TFBOYSˉ_ 2022-04-18 00:36 228阅读 0赞

# 深入了解Dojo Data #

——译自[http://www.sitepen.com/blog/2010/10/13/dive-into-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 = \[ \{ "id": "AF", "name":"Africa", "type":"continent", "population":"900 million", "area": "30,221,532 sq km" \}, \{ "id": "AS", "name":"Asia", "type":"continent", "population":"1 billion", "area": "25,428,192 sq km" \}, \{ "id": "OC", "name":"Oceania", "type":"continent", "population":"21 million", "area": "15,928,294 sq km" \}, \{ "id": "EU", "name":"Europe", "type":"continent", "population":"56 million", "area": "25,928,294 sq km" \}, \{ "id": "NA", "name":"North America", "type":"continent", "population":"100 million", "area": "90,928,294 sq km" \}, \{ "id": "SA", "name":"South America", "type":"continent", "population":"102 million", "area": "78,928,294 sq km" \}, \{ "id": "AN", "name":"Antarctica", "type":"continent", "population":"998", "area": "102,928,294 sq km" \} \];  
小提示：可以到[jsonlint.org][] 验证JSON格式的正确性。  
  
JsonRestStore需要与一个数据服务相连。本例中我们只创建一个模拟服务。注意为了简单起见，我们将省略"query"这个参数，返回所有的数据项。

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

下一步，我们用一个服务函数和一个目标URL来创建JsonRestStore。同样，对于这个例子而言我们将省略"target"参数。这个残水对于今后开发真正的REST服务非常重要，但现在暂时不需要。  
jsonStore = new dojox.data.JsonRestStore(\{ service: mockService, target: ‘/some/url’ \});  
  
JsonRestStore适用于比较大型的数据集。对于这种数据集，你往往不想（或根本不可能）高效地将其完全传送到客户端。JsonRestStore能够很好地处理与服务器端的交互。  
  
最后，我们来声明一个dojox.grid.DataGrid。我们将用它显示数据。  
<table jsid="grid" store="jsonStore" query="\{name:’\*'\}" dojoType="dojox.grid.DataGrid" class="grid"> <thead> <tr> <th field="name" width="auto">Name</th> <th field="population" width="auto">Population</th> <th field="area" width="auto">Area</th> </tr> </thead> </table>  
![0_1289218506JVd7.gif][]  
同样的JsonRestStore也能够同时为一个dijit.form.ComboBox提供数据：  
<input dojoType="dijit.form.ComboBox" store="jsonStore" searchAttr="name"></input>  
![0_128921849738As.gif][]  
看，把同一份数据用于不同的UI小部件就是这么简单！  
  
接下来，我们用一个XmlStore来换下这个JsonRestStore，看看转换数据格式有多简单。数据文件如下：

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

然后，创建XML数据存储器：

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

XmlStore是一个客户端的数据存储器，用于读取XML数据源。它由Dojo官方提供并包含在DojoX子项目中。XmlStore为基本的XML数据（一种常用的数据交换格式）提供读/写接口。XmlStore可以用于一般的XML文档，因此非常有用。存储器的设计是你可以通过覆盖其部分方法来自定义读/写数据的行为。  
  
最后，将它交给DataGrid。

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

同时，更新ComboBox：

我们不需要修改关于Grid和ComboBox的任何代码，就能让它们继续工作。唯一需要做的改动，就是声明一个数据源，并将它设置为grid的输入。我们不需要操心任何关于数据获取、解析、以及管理的事情，数据存储器的API做了所有的工作！  
  
除此之外还有其他许多有用的数据存储器，包括CsvStore，FileStore，FlickrStore，JsonQueryRestStore，PersevereStore，ServiceStore，WikipediaStore，等等。如果需要一个完整列表，请参见dojox.data目录  
  
Dojo Data是一个强大而灵活的工具。数据存储器使得切换前端组件和后端实现都变得很容易，不需要改变许多代码。因此我们可以为同一个数据存储器很方便地更换前端Diji部件，另外，同一个数据存储器也能由页面上的多个Dijit部件、图表或grid同时使用。  
  
更多相关资源：

*  [RESTful JSON + Dojo Data][RESTful JSON _ Dojo Data]
 *  [Easy Exploration of Dojo Data Stores][]
 *  [Web Service to dojo.data Store in 4 Easy Steps][]

[http_www.sitepen.com_blog_2010_10_13_dive-into-dojo-data]: http://www.sitepen.com/blog/2010/10/13/dive-into-dojo-data/
[jsonlint.org]: http://jsonlint.org/
[0_1289218506JVd7.gif]: /images/20220418/9dbf41d3000747c1a7c1c5683e3b41d2.png
[0_128921849738As.gif]: /images/20220418/facd3537d56647c4bd375b61bde08908.png
[RESTful JSON _ Dojo Data]: http://www.sitepen.com/blog/2008/06/13/restful-json-dojo-data/
[Easy Exploration of Dojo Data Stores]: http://www.sitepen.com/blog/2009/01/14/store-explorer/
[Web Service to dojo.data Store in 4 Easy Steps]: http://www.sitepen.com/blog/2008/06/25/web-service-data-store/