Chinaunix首页 | 论坛 | 博客
  • 博客访问: 396544
  • 博文数量: 69
  • 博客积分: 1984
  • 博客等级: 上尉
  • 技术积分: 953
  • 用 户 组: 普通用户
  • 注册时间: 2007-03-28 00:43
个人简介

学无所长,一事无成

文章分类

全部博文(69)

文章存档

2015年(19)

2014年(14)

2013年(9)

2012年(17)

2010年(10)

我的朋友

分类: JavaScript

2014-07-13 00:10:39

原文:http://dojotoolkit.org/documentation/tutorials/1.10/intro_dojo_store/
难度等级:中级 Dojo版本:1.10

为什么使用 Dojo Object Store?

将各类关系进行分离是一个组织良好,管理有序的程序的基本方面,对web 应用而言数据模型同用户界面的分离尤其重要(在 MVC 架构中用户界面一般被定位作为视图 view 和控制器controller )。Dojo  Object Store 架构建立了一个统一的数据交互接口,其思想受到 HTML5 对象存储 API 的启发。这套 API 有助于实现松耦合的程序设计,分散在代码不同地方的 widgets 和用户界面可以通过数据进行交互,有利于统一管理。

Dojo Object Store 接口允许你开发和使用封装良好的组件,他们可以很容易的连接不同的 data providers(译注:指各种 store)。Dojo Object Store 是一套API,其有多种实现叫做 store。store 包括内存 store,JSON/REST store,传统的 dojo.data store,以及 store 包裹器(提供额外功能)。

起步

我们从最简单的 store  dojo/store/Memory 开始。我们可以简单的将一个对象数组(array of objects)传入构造器 constructor,然后我们就可以操作它了。一旦 store 创建好,我们就可以使用 query 方法进行查询了。最简单的查询方式就是传入一个对象,包含 名/值对,用于指明查询需求。query 方法返回一个对象或是带 forEach  方法的数组(当然也带 map 和 filter 方法)。

  1. require(["dojo/store/Memory"],
  2.     function(Memory){
  3.  
  4.         var employees = [
  5.             {name:"Jim", department:"accounting"},
  6.             {name:"Bill", department:"engineering"},
  7.             {name:"Mike", department:"sales"},
  8.             {name:"John", department:"sales"}
  9.         ];
  10.         var employeeStore = new Memory({data:employees, idProperty: "name"});
  11.         employeeStore.query({department:"sales"}).forEach(function(employee){
  12.             // this is called for each employee in the sales department
  13.             alert(employee.name);
  14.         });
  15.  
  16. });

这里例子会针对销售部每个员工 alert 其名字。

View Demo

继续深入,我们学习在 store 中创建一个新的对象,以及删除对象:

  1. // add a new employee
  2. employeeStore.add({name:"George", department:"accounting"});
  3. // remove Bill
  4. employeeStore.remove("Bill");



我们可以提取对象并更新对象。store 中的对象就是简单普通的 JavaScript 对象,我们可以直接访问和修改其属性(如果修改了属性,一定要调用 put() 保存变动):

  1. // retrieve object with the name "Jim"
  2. var jim = employeeStore.get("Jim");
  3. // show the department property
  4. console.log("Jim's department is " + jim.department);
  5. // iterate through all the properties of jim:
  6. for(var i in jim){
  7.     console.log(i, "=", jim[i]);
  8. }
  9. // update his department
  10. jim.department = "engineering";
  11. // and store the change
  12. employeeStore.put(jim);

继续讨论查询,我们可以添加额外的参数给 query。我们传递第二个参数,限制结果对象的数量,对结果对象排序等。第二个参数可以是个对象,包含 start 和 count 属性,可以限制结果数。限制结果集合对数据量很大,需要分页的 widget(如 grid) 非常重要,我们可以随时按需请求下一页。第二个参数可以包含一个 sort 属性,用来限定 query 按什么字段,什么顺序进行排序。

  1. employeeStore.query({department:"sales"}, {
  2.     // 结果会按照部门排序
  3.     sort:[{attribute:"department", descending: false}],
  4.     // starting at an offset of 0
  5.     start: 0,
  6.     // 限制结果只包含 10 个对象
  7.     count: 10
  8. }).map(function(employee){
  9.     // return just the name, mapping to an array of names
  10.     return employee.name;
  11. }).forEach(function(employeeName){
  12.     console.log(employeeName);
  13. });


内存 store 是同步模式的 store,所有操作都是直接返回的(返回duixia)。

dojo/store/JsonRest

另一个广泛使用的 store 是 JsonRest store,它可以代理委派各种不同的 store 操作(actions)到 server 端, which delegates the various store actions to your server using standards-based HTTP/REST with JSON.。store 的操作直接对应 HTTP GET, PUT, POST, 和 DELETE 等方法。server 端对应的动作(interaction),可以参考这篇文档 JsonRest documentation.

这是一个典型的异步 store。异步 store 上的方法调用会返回 promise。如何使用 promise 呢,我们在返回的 promise 上添加回调函数就行了。

  1. require(["dojo/store/JsonRest"],
  2.     function(JsonRest){
  3.             employeeStore = new JsonRest({target:"/Employee/"});
  4.             employeeStore.get("Bill").then(function(bill){
  5.                 // 当获取到 Bill 时调用一次
  6.             });
  7. });


We can also use Deferred.when() (as exposed via the dojo/_base/Deferred module) to work with methods that may be synchronous or asynchronous, for consistent behavior regardless of implementation.

These examples demonstrate how to interact with stores. We can now start building widgets and components that interact with stores in a way that is free from dependence on a particular implementation. We can also plug our stores into existing components that use stores.

For example, the StoreSeries adapter allows us to use a store as the data source for a chart. Most components that use a store require that you provide the query that the component should use to query the store:

  1. // Note that while the Default plot2d module is not used explicitly, it needs to
  2. // be loaded to be able to create a Chart when no other plot is specified.
  3. require(["dojox/charting/Chart", "dojox/charting/StoreSeries" /*, other deps */,
  4.         "dojox/charting/plot2d/Default"],
  5.     function(Chart, StoreSeries /*, other deps */){
  6.         /* create stockStore here... */
  7.  
  8.         new Chart("lines").
  9.             /* any other config of chart */
  10.             // now use a data series from my store
  11.             addSeries("Price", new StoreSeries(
  12.                 stockStore, {query: {sector:"technology"}}, "price")).
  13.             render();
  14.  
  15. });


Another important concept in the Dojo store architecture is composing functionality by layering store wrappers. Dojo comes with a few store wrappers that add functionality, including a caching wrapper, and an observable wrapper that fires events for data changes.

本地存储 - Local storage

Dojo 1.10 在 dojox 中添加了本地存储 dojo/store providers,可以支持 IndexedDB 和 WebSQL。

dstore: dojo/store 的未来

新的  package 是 dojo/store 的继任者,自 Dojo 1.8+ 启用,规划成为 Dojo 2 的 API。如果你才开始使用 Dojo ,我们建议你好好看看 dstore。

小结

The Dojo Object Store implementation available since 1.6 is a useful tool available to us to help us keep a clean separation of concerns between our data and our user interfaces. It provides a straight-forward API, allowing for easy development of custom stores. Review the reference guide and post below for more information.

附加资源

阅读(1531) | 评论(0) | 转发(0) |
给主人留下些什么吧!~~