smartjs - DataManager 情境樣本分析 - 資料懶載入

標籤：style   class   blog   code   http   color   

發一張policy的參數圖設定圖：

 

情境1 - 資料的懶載入/消極式載入

在很多時候，為了提高網頁的載入速度，減少不必要的開銷，會將頁面的資料拆分成幾個部分，首先載入呈現可視地區內的資料，然後剩下來的會在需要的時候在進行載入。

而這種按需載入的資料又分為兩種：

　　1.按照需要進行載入；可以是由某個動作觸發來引起，比如：tab，查看更多等；

　　2.採用緩衝的方式；對後續動作的預知，提前將後續的資料載入進來，放入到緩衝中；等需要的時候能提供快速的響應；比如：很多igrid的滾動分頁

 

那麼來看一下在dataManager如何快速簡單的完成這兩種方式，首先以一個使用者資訊關聯項目為的例子：

//服務端的user資料轉成前端model資料var userData = {    id: 1,    name: "user1",    age: 20,    role: "tester"，    //關聯projectid    projectId： 1}//項目資料的model資料var projectData = {    id: 1    name: "smartjs",    ver： "0.3"}

第一種按需載入方式：

//建立一個object的對象var user = dataManager.create("object", {    //設定主鍵欄位    key : "id",    //get動作的策略    get: {        //定義資料服務        dataServices: {            //ajax資料服務            dsType: "ajax",            //預設的請求url地址；根據id查詢            url: "services/user/{id}",            //field規則映射            fieldMapping: {                //project的查詢地址                project: "services/project/{projectId}"            }        }    }})//首先通過id=1的條件，查詢useruser.get({    //設定查詢參數，預設匹配key欄位    params : 1,    //執行成功，資料填充到dm，並執行成功方法    success : function(result){        //進行資料渲染        renderUser(result);    }})//當需要查詢項目資訊時user.get({    //查詢的欄位；dm會根據field匹配到fieldMapping的ajax設定，從而拿到資料    field : "project",    //執行成功，資料填充到dm，並執行成功方法    success : function(result){        //進行資料渲染        renderProject(result);    }})

使用了兩個get的方法，第一個查詢user資訊，第二個查詢project資訊；project查詢會根據field找到fieldMapping對於的配置，根據dm內部的資料格式化url參數，然後在發送請求

 

第二種緩衝方式

如果採用緩衝方式，預期在查詢玩user後，想延遲2s在載入project資訊，那麼應該怎麼做？答案是:使用dataManager的trigger

var user = dataManager.create("object", {    //設定主鍵欄位    key: "id",    //get動作的策略    get: {        //定義資料服務        dataServices: {            //ajax資料服務            dsType: "ajax",            //預設的請求url地址；根據id查詢            url: "services/user/{id}"        },        //定義觸發器        trigger: [{            name: "get project",            //延遲2s            delay: 2000,            field: "project",            dataServices: {                //ajax資料服務                dsType: "ajax",                //project的查詢地址                url: "services/project/{projectId}",            },            //觸發器執行成功，資料填充到dm資料的project欄位中，並執行成功方法            success: function(result) {                //進行資料渲染                renderProject(result);            }        }]    }})//首先通過id=1的條件，查詢useruser.get({    //設定查詢參數，預設匹配key欄位    params: 1,    //執行成功，資料填充到dm，並執行成功方法    success: function(result) {        //進行資料渲染        renderUser(result);    }})

 

從例子中可以看到，不需要定義field的映射；而是通過設定trigger來完成；trigger會在get動作時觸發（預設的策略為有從dataServices請求時觸發）；延遲2s發送ajax請求拿到資料，執行trigger的success

 

結尾

目前提供的都是一些虛擬碼，大家可以看下處理的思路；dataManager-object、table，tree和還有很多的dataService都還沒完成；想這樣使用的話，還得等一段時間。

現在貼出來也是想拋磚引玉，大家有比較好的情境也可以說一下，看dataManager能否支援。

 

不過dataManager的引擎已經完成了初步。有興趣的同學可以自己根據引擎建立出適合自己使用的資料管理和資料服務。

當然等後面SmartJs功能完善後，使用會比例子中更加簡單，而且功能也更加強大。

 

後面還會介紹 “資料自動同步”，“多資料服務通訊”，“訊息訂閱”幾個情境，對於使用的最多的table類型的資料就不多做介紹了，因為dataManager-table會在下一版中發布，到時會有很多豐富的例子。