BUI 數(shù)據(jù)交互

BUI里面有3種數(shù)據(jù)交互.

• 頁(yè)面跳轉(zhuǎn)及傳參
• 數(shù)據(jù)請(qǐng)求
• 數(shù)據(jù)存儲(chǔ)

數(shù)據(jù)請(qǐng)求

bui.ajax(option)

數(shù)據(jù)請(qǐng)求 bui.ajax API 數(shù)據(jù)請(qǐng)求的跨域處理,請(qǐng)查看調(diào)試章節(jié).

參數(shù): option 是一個(gè)對(duì)象

option.url

• Type: string
• Detail: url地址

option.data

• Type: object
• Detail: 請(qǐng)求的參數(shù),默認(rèn):{}

option.method

• Type: string
• Detail: 默認(rèn): GET

示例:

bui.ajax({
    url: "",
    data: {}
}).then(function(res){
    // 成功回調(diào)
    console.log(res)
},function(res,status){
    // 失敗回調(diào)
    console.log(status);
})

還有依賴請(qǐng)求,順序請(qǐng)求等, 查看更多ajax技巧

模板渲染

這里你熟悉$的jQuery及Dom操作都可以直接在bui.ready里面使用, 工程里面可以支持ES6 的模板.

使用 $ 渲染示例:

這些屬于jQuery的基礎(chǔ)操作, 更多知識(shí)請(qǐng)自行學(xué)習(xí).

渲染一個(gè)列表:

list.js

// 示例數(shù)據(jù),正常由請(qǐng)求返回
var data = [{
        name: "hello"
    },{
        name: "bui"
    }];


// 聲明列表模板
var templateList = function (data) {
    var html = '';


    data.forEach(function(el,index){
        html += `<li class="bui-btn">${el.name}</li>`;
    })


    return html;
}


var listTpl = templateList(data);


// $渲染
$("#list").html(listTpl);

list.html

<ul id="list"></ul>

數(shù)據(jù)存儲(chǔ)

bui.storage(option)

bui.storage 是基于 localStorage 及 sessionStorage 封裝的, 主要解決兩者之間的API統(tǒng)一問(wèn)題, 并且支持JSON存儲(chǔ), 以及支持限制多少條數(shù)據(jù)等問(wèn)題, 常用來(lái)做歷史記錄. 默認(rèn)返回的是一個(gè)數(shù)組.

參數(shù): option 是一個(gè)對(duì)象

option.local

• Type: boolean
• Detail: 設(shè)置是否為本地存儲(chǔ),默認(rèn):true 為localStorage, false 則為 sessionStorage

option.size

• Type: number
• Detail: 限制存儲(chǔ)多少條數(shù)據(jù),默認(rèn):1

示例1: 字符存儲(chǔ)

// 存儲(chǔ)1條數(shù)據(jù)
var storage = bui.storage();
    storage.set("name","hello");
    // 第2個(gè)會(huì)覆蓋第1個(gè)
    storage.set("name","bui");

示例2: 對(duì)象存儲(chǔ)

// 存儲(chǔ)2條json數(shù)據(jù)
var storage2 = bui.storage({size:2});
    // 通過(guò)id字段判斷數(shù)據(jù)是否重復(fù),如果有重復(fù)的ID,則會(huì)替換掉之前的數(shù)據(jù)
    storage2.set("user",{id:"u1",name:"hello"},"id");
    storage2.set("user",{id:"u2",name:"bui"},"id");

示例3: 結(jié)合示例1,示例2 獲取數(shù)據(jù)

// 獲取字符串
var names = storage.get("name");
    // names 為數(shù)組, 可以通過(guò) names[0] 獲取到內(nèi)容.
    console.log(names) // ["bui"]




// 獲取對(duì)象
var users = storage2.get("user");
    // 最后存儲(chǔ)的數(shù)據(jù)在前面 
    console.log(users) // [{id:"u2",name:"bui"},{id:"u1",name:"hello"}]

注意: bui.storage 不管存什么數(shù)據(jù),獲取到的內(nèi)容都在一個(gè)數(shù)組里面.

如果想要取到存進(jìn)去的值, 可以這樣

// 獲取第一個(gè)值
var name = storage.get("name",0);
    console.log(name) // "bui"