使用 HTML5 File API 实现客户端 log（2）
|
- UID
- 1066743
|
使用 HTML5 File API 实现客户端 log（2）
客户端 log 设计根据服务器端 log 的功能，客户端 log 主要实现设置 log 输出的级别：1 表示记录错误信息、2 表示记录警告信息、3 表示记录一般信息、4 表示记录调式信息。提供 info、error、 warn、debug 等方法便于开发人员在程序中输出 log 信息。最后需要对 log 信息进行格式化，方便开发人员根据 log 内容调试客户端应用程序。本文中的 code 是在 Dojo 框架下实现的，运行时需要引入 Dojo。以下示例示例代码在 Chrome 16.0 中通过测试。
首先，在构造函数中初始化 log 需要的属性，logLevel 代表当前 log 需要记录信息的级别，indent 代表方法调用的深度。初始化 SPACE、MSGMAP 以及 METHODMAP 常量并且添加相应的 get、set 方法用来改变 logLevel，以及判断当前 log 级别是不是 debug 的 isDebugEnabled 方法。
清单 4. html5.Log 类实现：初始化属性1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| dojo.provide("html5.Log");
dojo.require("dojo.date.locale");
dojo.declare("html5.Log", null, {
SPACE:4,
MSGMAP:{"1":"ERROR","2":"WARNING","3":"INFO","4":"DEBUG"},
// 映射 log 级别到 console 中的方法名称
METHODMAP:{"1":"error","2":"warn","3":"info","4":"debug"},
constructor: function() {
//1 表示记录错误信息，2 表示记录警告信息，3 表示记录一般信息，4 表示记录调式信息
this.logLevel = 1;
this.indent = 0;
},
getLogLevel: function() {
return this.logLevel;
},
setLogLevel: function(logLevel) {
this.logLevel = logLevel;
},
isDebugEnabled: function() {
return this.logLevel >= 4;
}
});
|
然后，仿照服务器端 log 的设计，加入相应的 error、info、warn、debug、entry、exit 等方法。
清单 4. html5.Log 类实现：添加记录 log 内容的方法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
| dojo.declare("html5.Log", null, {
// 记录错误信息
error: function(location, message, extra) {
this._record(1, location, message, extra);
},
// 省略 info，warn，debug 方法，方法参数和方法主体和 error 方法类似。
// 进入一个函数
entry: function(location, extra) {
this._record(-1, location, "Entry", extra);
this.indent += this.SPACE;
}
// 省略 exit 方法，具体实现参考附件中的源代码。
_record: function(level, location, message, extra) {
var logEntry = {
level: level,
time: new Date(),
loc: location,
msg: message,
extra: extra,
indent: this.indent
};
if (level <= this.logLevel) {
var logInfo = this._formatLogEntry(logEntry);
// 根据 log 级别映射到 console 中的不同方法，把信息输出到浏览器控制台
if(this.METHODMAP[level+""]){
console[this.METHODMAP[level+""]](logInfo);
}
else{
console.log(logInfo);
}
}
}
});
|
最后，根据自己的需要加入格式化 log 信息内容的方法。
清单 4. html5.Log 类实现-添加记录 log 内容的方法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
| dojo.declare("html5.Log", null, {
_formatLogEntry: function(logEntry) {
var result = dojo.date.locale.format(logEntry.time,
{datePattern: "yyyy-MM-dd", timePattern: "HH:mm:ss "});
for ( var i = 0; i < logEntry.indent; i++) {
result += " ";
}
if(logEntry.level>=0){
result += this.MSGMAP[logEntry.level+""]+ " - ";
}// 在每条记录前加入 log 的时间已经 log 的级别
result += logEntry.loc;
if (logEntry.msg) {
result += " - " + this._formatObject(logEntry.msg);
}
if (logEntry.extra) {
result += " - " + this._formatObject(logEntry.extra);
}
result += "\r\n";
return result;
},
// 格式化 Object 类型信息
_formatObject: function(data) {
if (dojo.isObject(data)) {
return dojo.toJson(data);
} else {
return data;
}
}
});
|
|
|
|
|
|
|
