W3Cschool
恭喜您成為首批注冊用戶
獲得88經(jīng)驗(yàn)值獎勵
BUI里面有3種數(shù)據(jù)交互.
數(shù)據(jù)請求 bui.ajax API 數(shù)據(jù)請求的跨域處理,請查看調(diào)試章節(jié).
參數(shù): option 是一個對象
string
url地址
object
請求的參數(shù),默認(rèn):{}
string
默認(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>
bui.storage
是基于localStorage
及sessionStorage
封裝的, 主要解決兩者之間的API統(tǒng)一問題, 并且支持JSON存儲, 以及支持限制多少條數(shù)據(jù)等問題, 常用來做歷史記錄. 默認(rèn)返回的是一個數(shù)組.
參數(shù): option 是一個對象
boolean
設(shè)置是否為本地存儲,默認(rèn):true 為localStorage, false 則為 sessionStorage
number
限制存儲多少條數(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"
Copyright©2021 w3cschool編程獅|閩ICP備15016281號-3|閩公網(wǎng)安備35020302033924號
違法和不良信息舉報電話:173-0602-2364|舉報郵箱:jubao@eeedong.com
掃描二維碼
下載編程獅App
編程獅公眾號
聯(lián)系方式:
更多建議: