§ Fox2.0前端框架-工具介绍

1.数据篮子
2.事件链路
3.事件代理
4.Base64工具

§ 1.数据篮子

fox.bus
fox框架提供了一个数据存储结构为树状结构的数据篮子，分别提供数据存储、数据获取、数据修改和数据删除的接口

API

put 增加数据
get 获取数据
remove 删除数据

例子

/1.数据储存
//一层
var data = {
    id: "01",
    name: "一层数据"
}
//保存数据
fox.bus.put("level", data);
//二层
var data2 = {
    id: "02",
    name: "二层数据"
}
//保存数据
fox.bus.put("level", "level-2-1", data2);
//三层
var data3 = {
    id: "03",
    name: "三层数据"
}
//保存数据
fox.bus.put("level", "level-2-2", "level-3", data3);
//2.数据获取
var data = fox.bus.get("level");
alert("一层数据:" + JSON.stringify(data));
var data2 = fox.bus.get("level", "level-2-1");
alert("二层数据:" + JSON.stringify(data2));
var data3 = fox.bus.get("level", "level-2-2", "level-3");
alert("三层数据:" + JSON.stringify(data3))
//3数据修改
var n=0;
n++;
var data = fox.bus.get("level");
data.name = data.name + ",修改次数:" + n;
var data2 = fox.bus.get("level", "level-2-1");
data2.name = data2.name + ",修改次数:" + n;
var data3 = fox.bus.get("level", "level-2-2", "level-3");
data3.name = data3.name + ",修改次数:" + n;
//4数据删除
fox.bus.remove("level");

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

§ 2.事件链路

fox.EventChain fox框架提供了一个可以让异步事件同步顺序执行的工具类

API

post 把待执行数据加入事件链路
wait 等待事件链路中的事件执行完成
fire 触发下事件链路中的下一个事件执行，如果链路中已经没有事件则执行wait函数
reject 中断事件链路中的事件执行，直接执行wait函数
exception 事件链路调用过程中抛出未捕捉异常后调用

例子

    //定义事件调用链路
    var eventChain = new fox.EventChain();
    
    //链路调用
    eventChain.post(function () {
        //请求服务step 1
        fox.service.request({
            id: "pages_demo_eventchain",
            name: "trade/demo/stepService",
            data: {
                step: 1,
                sign: ''
            },
            callback: function (code, msg, data) {
    
                if (code == 0) {
                    var resData = data["nextStep"];
                    //成功，并调用到下一个节点
                    msg = "step-1";
                    eventChain.fire(code, msg, resData);
                } else {
                    //失败，直接调用wait callback
                    eventChain.reject(code, msg, data);
                }
            }
        });
    }).post(function (preCode, preMsg, preData) {
        var msg = preMsg + " step-2";
        var nextStep = preData + 1;
        //成功，并调用到下一个节点
        eventChain.fire(msg, nextStep);
    
    }).post(function (preMsg, preData) {
        var step = preData;
        //请求服务step 1
        fox.service.request({
            id: "pages_demo_eventchain",
            name: "trade/demo/stepService",
            data: {
                step: step
            },
            callback: function (code, msg, data) {
    
                if (code == 0) {
                    var resData = data["nextStep"];
                    //成功，并调用到下一个节点
                    var message = preMsg + " step-3";
                    eventChain.fire(code, message, resData);
                } else {
                    //失败，直接调用wait callback
                    eventChain.reject(code, msg, data);
                }
            }
        });
    })
    
    //继续加入调用链路
    eventChain.post(function (preCode, preMsg, preData) {
        var step = preData;
        //请求服务step 1
        fox.service.request({
            id: "pages_demo_eventchain",
            name: "trade/demo/stepService",
            data: {
                step: step
            },
            callback: function (code, msg, data) {
                if (code == 0) {
                    var resData = data["nextStep"];
                    var message = preMsg + " step-4";
                    //成功，并调用到下一个节点
                    eventChain.fire(code, message, resData);
                } else {
                    //失败，直接调用wait callback
                    eventChain.reject(code, msg, data);
                }
            }
        });
    
    }).wait(function (preCode, preMsg, preData) {
        if (preCode == 0) {
            success = true;
            console.info(preMsg);
            fox.layer.close(layerIndex);
    
            //调用提交
            submit();
        } else {
            fox.layer.open("失败了，原因：" + preMsg);
        }
    })

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91

§ 3.事件代理

fox.eventproxy fox框架提供了一个观察者/订阅者模式的工具类，可用于消息发送。

API

bind 绑定事件
unbind 解除绑定
once 绑定只触发一次的函数
all 绑定多条件触发函数
trigger 触发事件

例子

//创建event proxy
var ep=new fox.eventproxy();
//绑定事件
ep.bind("hi",function(name){
    alert("hi,"+name);
});
//触发事件
ep.trigger("hi","jc");
ep.trigger("hi","yxt");
//绑定多条件事件
ep.all("love","food",function(name,data){
    alert(name+"喜欢吃"+data);

});
//触发多条件事件
ep.trigger("love","yxt");
ep.trigger("food","榴莲");

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

§ 4.Base64工具

fox.base64 fox框架提供了一个base解码/编码的工具类

API

encode base64编码
decode base64解码

例子

//编码 
let text =“123”;
text=fox.base64.encode(text);

//解码
text=fox.base64.decode(text);

1
2
3
4
5
6

开发规范 →