深刻理解Ember-Data特性（上）

写在前面

         最近比较忙，换了新工做还要学习不少全新的技术栈，并给本身找了不少借口来不去坚持写博客。经常具备讽刺意味的是，更多剩下的时间并无利用而更多的是白白浪费，也许这就是青春吧，挥霍吧，这不是我想要的，既然这样，我还要继续写下去，坚持把博客作好，争取进前100博客，在此谨记。

                                                                                                         2015年5月7日深夜，于电脑旁。

文章索引

JS前端框架之Ember.js系列

综述

　　Ember-Data对于Web应用程序来讲是一个ORM Framework。Ember-Data直接做用于服务端数据，容许您更改格式化服务端数据，最小化客户端展示的数据。您能够经过自定义adatpters和serializer来处理服务端的数据。

　　Ember.js核心生态系统/架构图

　　Runtime负责依据Model中的status状态更新View, 以创建一个由Model直接绑定View的一种方式。相似于Backbone.js的Collection，Ember.js中是用App.Store做为数据仓库来函缓存以及加载数据。

 

Metamorph.js

　　即将用HTMLBar代替，Ember团队成员认为此模块是过于“笨重的脚本标签，现阶段咱们使用这些标签追踪Dom中反馈的值，HTMLBar至关于HTML5和Handlebars组成的语法组件。

HTMLBar：http://oscarlodriguez.nl/Labs/htmlbars/#/

Handlebars.js

　　Handlebars 是 JavaScript 一个语义模板库，经过对view和data的分离来快速构建Web模板。它采用"Logic-less template"（无逻辑模版）的思路，在加载时被预编译，而不是到了客户端执行到代码时再去编译， 这样能够保证模板加载和运行的速度。

　　官网地址：http://handlebarsjs.com/

RSVP.js

　　RSVP.js提供一个简单的工具来管理异步代码，简单来讲它是实现了Promises/A+的一个小型框架。

ES6也引入了Promises，当你发起一个异步请求，并绑定了.when(), .done()等事件处理程序时，其实就是在应用promises模式。

　　官网地址：https://github.com/tildeio/rsvp.js

Backburner.js

　　一个重写Ember.js Run Loop的通常框架。

　　做者加入了Ember.js团队：

　　Backburner.js and the run loop.  Erik is joining us from San Francisco and I'm very excited to hear more.

　　Github地址：https://github.com/ebryn/backburner.js

 

1、Ember-Data数据缓存

Ember-Data Model object模型对象对于Ember-Data做为一个服务来定义Model中含有的属性以及属性的类型。

定义Ember-Data模型

　　MainMenu类扩展了DS.Model模型，定义了成员并指定了成员的类型和所属关系，模型中并未定义id属性，id属性是Ember-Data中隐式定义的方便数据仓库(Store)索引数据，若是重写此id属性则会有错误提示。从DS.Model中扩展出本身的Model好处是，能够继承一些列的绑定、监测函数（observers）、和计算属性等API，后续章节会详细分析这些属性。

Ember-Data是一种同一性数据映射

　　一个普通的基于JavaScript的Web应用经过Json或者REST接口得到数据，并将数据保存在DOM树中，虽然这样能快速的更新View，可是开发人员须要确保旧数据将被从DOM树中移除，以保证Web程序性能。

　　Ember-Data经过创建数据仓库来解决这个问题，并将数据缓存起来，而后经过惟一标识“id”来获取和更新数据，Ember-Data确保数据的同一性。

　　下图显示Ember-Data管理它的数据以及同一性映射是如何工做的：

　　第一次请求id为ABC的数据时，Ember-Data仓库中并无数据，Ember-Data返回一个带有id和Status标识的“空数据”，同时向服务器发起请求。当收取到服务器返回值时，Ember-Data先将数据缓存下来，而后将变动的结果通知View（或者能够说View自动监听了Model的变化，稍后会作模型绑定分析）。

　　第二次发起一样的请求时，Ember-Data发现其仓库内含有这样的数据，则直接返回其数值，而再也不向服务器发起请求。

模型之间的关联关系

　　因为模型之间的关系一般是散乱的、纠结的、关联的、非标准的等，Ember-Data经过提供功能和集成点来确保你能将这些关联的结构更好的组织起来。

　　Ember-Data经过惟一标识id来确保组织的关系，下图来显示Ember-Data是如何经过Id来管理组织之间的关系的：

　　默认状况下，RESTAdapter指望你的Key是能是camelized风格，首字母要小写，id的值要大写，而且若是返回的数据类型是数组或列表，则应该加后缀s。

你还可能看到“children”中并无真正的数据，而仅仅只是含有指示到子类数据的id，Ember-Data经过id来查找子元素的值。

　　Question： 什么子类的parent要绑定到父类？

　　答：仅仅是数据结构上的定义。

模型的之中的状态和事件

　　正由于大多数Ember-Data在程序中的行为是异步的，Ember-Data的模型内置了状态管理器，来维护数据状态，当数据发生改变时。Ember-Data在内部使用这些状态，来向Web程序提供数据。例如，当你想在界面上使用加载滚动条时，这些方法/属性将变的很是有用。

　　并且，经过扩展DS.Model，Ember内置了转换函数能使开发者能在Controller或者View中调用这些功能。

　　Ember-Data 的状态：

　　注意：这些属性还能够组合使用，例如当isDirty和isDeleted都为true时表示：本地数据已删除，但还为收到服务端传来的删除确认信息。

　　Ember-Data 事件列表：

　　你能够经过 Model.on(‘didLoad’, function() { console.log(“Loaded!”)});来订阅事件通知，至关于在didLoad上注册一个事件以便监听Model发生的变化。

　　下图是一个部分的状态流程图：

　　当请求数据时，状态为isLoading，当数据返回到数据仓库中，状态为isLoaded，若是本地对数据作修改则状态变动为isDirty状态，当保存数据时，状态为isSaving, 服务端返回OK（例如http 200），状态由isSaving变动为isLoaded。或者isError。

　　以上仅仅是经常使用的API，更多详情请参考：http://emberjs.com/api/data/classes/DS.Store.html

 

未完待续，请参考《深刻理解Ember-Data特性（下）》