smartjs - DataManager 場景示例分析 - 數據懶加載

發一張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的條件，查詢user
user.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的條件，查詢user
user.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會在下一版中發佈，到時會有不少豐富的例子。