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

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

• 頁面跳轉(zhuǎn)及傳參
• 數(shù)據(jù)請求
• 數(shù)據(jù)存儲

數(shù)據(jù)請求

bui.ajax(option)

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

參數(shù): option 是一個對象

option.url

• Type: string
• Detail: url地址

option.data

• Type: object
• Detail: 請求的參數(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);
})

還有依賴請求,順序請求等, 查看更多ajax技巧

模板渲染

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

使用 $ 渲染示例:

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

渲染一個列表:

list.js

// 示例數(shù)據(jù),正常由請求返回
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ù)存儲

bui.storage(option)

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

參數(shù): option 是一個對象

option.local

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

option.size

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

示例1: 字符存儲

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

示例2: 對象存儲

// 存儲2條json數(shù)據(jù)
var storage2 = bui.storage({size:2});
    // 通過id字段判斷數(shù)據(jù)是否重復(fù),如果有重復(fù)的ID,則會替換掉之前的數(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ù)組, 可以通過 names[0] 獲取到內(nèi)容.
    console.log(names) // ["bui"]
// 獲取對象
var users = storage2.get("user");
    // 最后存儲的數(shù)據(jù)在前面 
    console.log(users) // [{id:"u2",name:"bui"},{id:"u1",name:"hello"}]

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

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

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