数据交互

BUI里面有3种数据交互.

• 页面跳转及传参
• 数据请求
• 数据存储

数据请求

bui.ajax(option)

数据请求 bui.ajax API 数据请求的跨域处理,请查看调试章节.

参数: option 是一个对象

option.url

• Type: string
• Detail: url地址

option.data

• Type: object
• Detail: 请求的参数,默认:{}

option.method

• Type: string
• Detail: 默认: GET

示例:

bui.ajax({
    url: "",
    data: {}
}).then(function(res){
    // 成功回调
    console.log(res)
},function(res,status){
    // 失败回调
    console.log(status);
})

还有依赖请求,顺序请求等, 查看更多ajax技巧

模板渲染

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

使用 $ 渲染示例:

这些属于jQuery的基础操作, 更多知识请自行学习.

渲染一个列表:

list.js

// 示例数据,正常由请求返回
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(option)

bui.storage 是基于 localStorage 及 sessionStorage 封装的, 主要解决两者之间的API统一问题, 并且支持JSON存储, 以及支持限制多少条数据等问题, 常用来做历史记录. 默认返回的是一个数组.

参数: option 是一个对象

option.local

• Type: boolean
• Detail: 设置是否为本地存储,默认:true 为localStorage, false 则为 sessionStorage

option.size

• Type: number
• Detail: 限制存储多少条数据,默认:1

示例1: 字符存储

// 存储1条数据
var storage = bui.storage();
    storage.set("name","hello");
    // 第2个会覆盖第1个
    storage.set("name","bui");

示例2: 对象存储

// 存储2条json数据
var storage2 = bui.storage({size:2});
    // 通过id字段判断数据是否重复,如果有重复的ID,则会替换掉之前的数据
    storage2.set("user",{id:"u1",name:"hello"},"id");
    storage2.set("user",{id:"u2",name:"bui"},"id");

示例3: 结合示例1,示例2 获取数据

// 获取字符串
var names = storage.get("name");
    // names 为数组, 可以通过 names[0] 获取到内容. 
    console.log(names) // ["bui"] 
// 获取对象
var users = storage2.get("user");
    // 最后存储的数据在前面 
    console.log(users) // [{id:"u2",name:"bui"},{id:"u1",name:"hello"}]

注意: bui.storage 不管存什么数据,获取到的内容都在一个数组里面.

如果想要取到存进去的值, 可以这样

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