天天看點

深入了解Ember-Data特性(上)

寫在前面

         最近比較忙,換了新工作還要學習很多全新的技術棧,并給自己找了很多借口來不去堅持寫部落格。常常具有諷刺意味的是,更多剩下的時間并沒有利用而更多的是白白浪費,也許這就是青春吧,揮霍吧,這不是我想要的,既然這樣,我還要繼續寫下去,堅持把部落格做好,争取進前100部落格,在此謹記。

                                                                                                         2015年5月7日深夜,于電腦旁。

文章索引

JS前端架構之Ember.js系列

綜述

  Ember-Data對于Web應用程式來說是一個ORM Framework。Ember-Data直接作用于服務端資料,允許您更改格式化服務端資料,最小化用戶端展現的資料。您可以通過自定義adatpters和serializer來處理服務端的資料。

  Ember.js核心生态系統/架構圖

深入了解Ember-Data特性(上)

  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"(無邏輯模版)的思路,在加載時被預編譯,而不是到了用戶端執行到代碼時再去編譯, 這樣可以保證模闆加載和運作的速度。

深入了解Ember-Data特性(上)

  官網位址: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

一、Ember-Data資料緩存

Ember-Data Model object模型對象對于Ember-Data作為一個服務來定義Model中含有的屬性以及屬性的類型。

定義Ember-Data模型

深入了解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管理它的資料以及同一性映射是如何工作的:

深入了解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來管理組織之間的關系的:

深入了解Ember-Data特性(上)

  預設情況下,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 的狀态:

深入了解Ember-Data特性(上)

  注意:這些屬性還可以組合使用,例如當isDirty和isDeleted都為true時表示:本地資料已删除,但還為收到服務端傳來的删除确認資訊。

  Ember-Data 事件清單:

深入了解Ember-Data特性(上)

  你可以通過 Model.on(‘didLoad’, function() { console.log(“Loaded!”)});來訂閱事件通知,相當于在didLoad上注冊一個事件以便監聽Model發生的變化。

  下圖是一個部分的狀态流程圖:

深入了解Ember-Data特性(上)

  當請求資料時,狀态為isLoading,當資料傳回到資料倉庫中,狀态為isLoaded,如果本地對資料做修改則狀态變更為isDirty狀态,當儲存資料時,狀态為isSaving, 服務端傳回OK(例如http 200),狀态由isSaving變更為isLoaded。或者isError。

  以上僅僅是常用的API,更多詳情請參考:http://emberjs.com/api/data/classes/DS.Store.html

未完待續,請參考《深入了解Ember-Data特性(下)》

作者:Stephen Cui

出處:http://www.cnblogs.com/cuiyansong

版權聲明:文章屬于本人及部落格園共有,凡是沒有标注[轉載]的,請在文章末尾加入我的部落格位址。

如果您覺得文章寫的還不錯,請點選“推薦一下”,謝謝。

繼續閱讀