深刻理解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特性（下）》