因为项目需要有对用户行为进行跟踪的功能,所以就花了几天弄了这么一个小框架。
原本网络上就已有logger.js了(具体当时怎么找的忘记了),这个框架是基于它来写的,基本的思路跟原作者无多大差异,算是一个小拓展把。
基本介绍可以到进入这里看看 https://github.com/log-all/Store
/**
* @author ChenHaihong
*/
(function(_alias) {
var logger = function(level, object, viewType) {
this.level = level;
this.object = object;
this.viewType = viewType;
}
logger.LEVEL_DEBUG = 0;
logger.LEVEL_INFO = 1;
logger.LEVEL_WARN = 2;
logger.LEVEL_ERROR = 3;
logger.LEVEL_FATAL = 4;
logger.LEVEL_LOG = 5;
logger.VIEW_TYPE_ALERT = 0;
logger.VIEW_TYPE_NOALERT = 1;
logger.prototype = {
maxNumber : 0,
Alias : _alias,
Color : {
debug : "black",
info : "green",
error : "red",
warn : "yellow",
fatal : "red",
log : "blue"
},
MethodAlias : {
debug : "调试",
info : "信息",
error : "错误",
warn : "警告",
fatal : "致命",
log : "记录"
},
"" : function() {
},
set : function(j) {
for (var i in j) {
try {
this["set" + i](j[i]);
} catch(e) {
this.fatal(e);
}
}
},
setSetter : function(j) {
for (var i in j) {
if (i == "Alias") {
continue;
}
try {
this["set" + i](j[i]);
} catch(e) {
this.fatal(e);
}
}
this.setAlias(_alias);
},
setAlias : function(a) {
if ( typeof window[a] == 'undefined' || window[a] == null) {
this.Alias = a;
window[a] = this;
} else {
this.fatal('别名“' + a + '”不可用!');
}
},
setMethodAlias : function(j) {
for (var i in j) {
this.MethodAlias[i] = j[i];
}
},
setColor : function(j) {
for (var i in j) {
this.Color[i] = j[i];
}
},
setLevel : function(level) {
this.level = level;
},
setObject : function(o) {
if ( typeof o == "string") {
if (document.getElementById(o) != null) {
this.object = document.getElementById(o);
} else {
this.object = document.body;
}
} else {
this.object = o;
}
},
setViewType : function(type) {
this.viewType = type;
},
setMaxNumber : function(d) {
if ( typeof d == "number" && d >= 0) {
this.maxNumber = d;
this.info("logger.MaxNumber = " + d);
} else {
this.warn("logger.setMaxNumber(param)方法,param必须为正整数!");
}
},
setShortcut : function(b) {
if (b) {
this.onShortcut();
if (this.object) {
this.info("快捷键已经开启!", 1);
}
}
},
getStringTime : function(level) {
var _d = new Date(), _t, _n;
switch(level) {
case logger.LEVEL_DEBUG:
_n = this.MethodAlias["debug"] ? this.MethodAlias["debug"] : "调试";
break;
case logger.LEVEL_INFO:
_n = this.MethodAlias["info"] ? this.MethodAlias["info"] : "信息";
break;
case logger.LEVEL_WARN:
_n = this.MethodAlias["warn"] ? this.MethodAlias["warn"] : "警告";
break;
case logger.LEVEL_ERROR:
_n = this.MethodAlias["error"] ? this.MethodAlias["error"] : "错误";
break;
case logger.LEVEL_FATAL:
_n = this.MethodAlias["fatal"] ? this.MethodAlias["fatal"] : "致命";
break;
case logger.LEVEL_LOG:
_n = this.MethodAlias["log"] ? this.MethodAlias["log"] : "记录";
break;
default:
break;
}
_t = _d.getFullYear() + "-" + (((_d.getMonth() + 1) < 10) ? ("0" + (_d.getMonth() + 1)) : (_d.getMonth() + 1)) + "-" + ((_d.getDate() < 10) ? ("0" + _d.getDate()) : _d.getDate()) + " ";
_t += ((_d.getHours() < 10) ? ("0" + _d.getHours()) : _d.getHours()) + ":" + ((_d.getMinutes() < 10) ? ("0" + _d.getMinutes()) : _d.getMinutes()) + ":" + ((_d.getSeconds() < 10) ? ("0" + _d.getSeconds()) : _d.getSeconds()) + " ";
_t += "-> " + _n + " -> ";
return _t;
},
getScrollValue : function() {
var o = this.object;
return o.scrollHeight <= o.offsetHeight ? 0 : o.scrollHeight;
},
sHelpProcessed : function(s, c) {
return "<label class='logger-label-help' style='color:" + ( c ? c : "black") + " ;'>" + s + "</label>";
},
getMethodHelp : function() {
var _s = "", _l = this.Alias ? this.Alias : _alias;
_s += this.sHelpProcessed("--------------------------------------------");
_s += this.sHelpProcessed("- Common Methods");
_s += this.sHelpProcessed("--------------------------------------------");
_s += this.sHelpProcessed((this.MethodAlias["debug"] ? this.MethodAlias["debug"] : "调试") + " --> " + _l + ".debug()", this.Color["debug"] ? this.Color["debug"] : "black");
_s += this.sHelpProcessed((this.MethodAlias["info"] ? this.MethodAlias["info"] : "信息") + " --> " + _l + ".info()", this.Color["info"] ? this.Color["info"] : "green");
_s += this.sHelpProcessed((this.MethodAlias["warn"] ? this.MethodAlias["warn"] : "警告") + " --> " + _l + ".warn()", this.Color["warn"] ? this.Color["warn"] : "yellow");
_s += this.sHelpProcessed((this.MethodAlias["error"] ? this.MethodAlias["error"] : "错误") + " --> " + _l + ".error()", this.Color["error"] ? this.Color["error"] : "red");
_s += this.sHelpProcessed((this.MethodAlias["fatal"] ? this.MethodAlias["fatal"] : "致命") + " --> " + _l + ".fatal()", this.Color["fatal"] ? this.Color["fatal"] : "red");
_s += this.sHelpProcessed((this.MethodAlias["log"] ? this.MethodAlias["log"] : "记录") + " --> " + _l + ".log()", this.Color["log"] ? this.Color["log"] : "blue");
return _s;
},
getShortcutHelp : function() {
var _h = "";
_h += this.sHelpProcessed("--------------------------------------------");
_h += this.sHelpProcessed("- Shortcut Key");
_h += this.sHelpProcessed("--------------------------------------------");
_h += this.sHelpProcessed("Ctrl + Shift + G --> Check the help.");
_h += this.sHelpProcessed("Ctrl + Shift + L --> Check the log in the console.");
_h += this.sHelpProcessed("Ctrl + Shift + O --> Check the log in the document.body.");
_h += this.sHelpProcessed("Ctrl + Shift + D --> Clear window's log.");
_h += this.sHelpProcessed("Ctrl + Shift + R --> Clear the log saved.");
_h += this.sHelpProcessed("--------------------------------------------");
return _h;
},
showHelp : function() {
var _a = this.sHelpProcessed("--------------------------------------------");
_a += this.sHelpProcessed("Effective Alias:" + this.Alias);
var _t = _a + this.getMethodHelp() + this.getShortcutHelp(), _o = this.object;
_o.innerHTML = _t;
},
onShortcut : function() {
var _this = this;
document.onkeydown = function(ev) {
var _e = ev || event;
if (_e.ctrlKey && _e.shiftKey) {
switch (_e.keyCode) {
//Ctrl + Shift + D --> 清除窗口日志
case 68:
_this.clearConsolesMessage();
break;
//Ctrl + Shift + G --> 查看帮助
case 71:
_this.showHelp();
break;
//Ctrl + Shift + L --> 查看日志
case 76:
_this.showConsolesLogger();
break;
//Ctrl + Shift + O --> 查看日志(document.body)
case 79:
_this.showConsolesLoggerToBody();
break;
//Ctrl + Shift + R --> 清除存储日志
case 82:
_this.clearConsolesLogger();
break;
default:
break;
}
return false;
};
};
},
log : function(s, b) {
this.message(logger.LEVEL_LOG, s, b);
},
debug : function(s, b) {
this.message(logger.LEVEL_DEBUG, s, b);
},
info : function(s, b) {
this.message(logger.LEVEL_INFO, s, b);
},
warn : function(s, b) {
this.message(logger.LEVEL_WARN, s, b);
},
error : function(s, b) {
this.message(logger.LEVEL_ERROR, s, b);
},
fatal : function(s, b) {
this.message(logger.LEVEL_FATAL, s, b);
},
messageProcessed : function(level, s) {
var _this = this, _s = this.getStringTime(level) + s, _t, _c;
switch(level) {
case logger.LEVEL_DEBUG:
_c = _this.Color["debug"] ? _this.Color["debug"] : "black";
break;
case logger.LEVEL_INFO:
_c = _this.Color["info"] ? _this.Color["info"] : "green";
break;
case logger.LEVEL_WARN:
_c = _this.Color["warn"] ? _this.Color["warn"] : "yellow";
break;
case logger.LEVEL_ERROR:
_c = _this.Color["error"] ? _this.Color["error"] : "red";
break;
case logger.LEVEL_FATAL:
_c = _this.Color["fatal"] ? _this.Color["fatal"] : "red";
break;
case logger.LEVEL_LOG:
_c = _this.Color["log"] ? _this.Color["log"] : "blue";
break;
default:
break;
}
_t = "<logger class='logger-label-default' style='color: " + _c + ";'>" + _s + "</logger>";
return _t;
},
message : function(level, s, b) {
var _s = this.messageProcessed(level, s);
if (b == null || b == 2) {
this.showMessage(level, this.object, _s);
this.saveConsolesLogger(_s);
} else if (b == 1) {
this.showMessage(level, this.object, _s);
} else if (b == 3) {
this.saveConsolesLogger(_s);
}
},
showMessage : function(level, o, s) {
if (level >= this.level) {
if (o != null) {
_h = this.getScrollValue();
o.innerHTML += s;
o.scrollTop = _h;
} else if (this.viewType == logger.VIEW_TYPE_ALERT) {
alert(s);
}
}
},
showConsolesLoggerToBody : function() {
this.object = document.body, o = this.object, o.innerHTML = "", _s = this.getConsolesLogger();
if (_s == "") {
this.warn("No cache log!", 1);
} else {
this.debug("-----------Recent Log--Begin-----------", 1);
this.object.innerHTML += _s;
this.debug("-----------Recent Log--End-------------", 1);
}
},
showConsolesLogger : function() {
var _s = this.getConsolesLogger();
this.object.innerHTML = "";
if (_s == "") {
this.warn("No cache log!", 1);
} else {
this.debug("-----------Recent Log--Begin-----------", 1);
this.object.innerHTML += _s;
this.debug("-----------Recent Log--End-------------", 1);
}
},
clearConsolesMessage : function() {
this.object.innerHTML = "";
this.warn("Window log has been cleared!", 1);
},
clearConsolesLogger : function() {
this.object.innerHTML = "";
localStorage.consolesLogger = "";
this.warn("The cache log has been cleared!", 1);
},
saveConsolesLogger : function(s) {
if ( typeof localStorage.logger == "undefined" || localStorage.logger == "") {
localStorage.consolesLogger = s;
} else {
localStorage.consolesLogger += s;
}
},
getConsolesLogger : function() {
return localStorage.consolesLogger;
}
};
var config = logConfig, _logger_ = new logger(logger.LEVEL_DEBUG, null, logger.VIEW_TYPE_NOALERT);
if (config["Alias"] !== "" && typeof config.Alias !== "undefined") {
try {
if ( typeof window[config.Alias] == "undefined" || window[config.Alias] == null) {
_logger_.set(config);
} else {
_logger_.setSetter(config);
}
} catch(e) {
_logger_.setSetter(config);
}
} else {
_logger_.setSetter(config);
}
})("Logger");
====
----[2014-08-06]----
### [Why Use logger.js]
*Most used for debugging your web app/web project, showing message, logging sth you need to save and ect.
*主要用于调试web项目或应用,显示信息,保存信息等。
### [Example]
*You should init the config first before you import the logger-1.0.0.js.
*在页面引用logger-1.0.0.js前,先做一下初始化配置。
* //init the config
logConfig = {
Alias : "Logger",//Add a alias to Logger, "Logger" is the default name. 给Logger对象添加一个Alias,默认使用"Logger"。
Object : "loggerResult",//Place the object or its Id here, then you can see the message there. 在这里放置对象(在这个对象里面显示信息)或者对象的id。
Shortcut : true,//On the shortcut. 开启快捷键。
Color : {
debug : "black",
info : "green",
error : "red",
warn : "yellow",
fatal : "red",
log : "blue"
},
MethodAlias : {
debug : "调试",
info : "信息",
error : "错误",
warn : "警告",
fatal : "致命",
log : "记录"
}
};
*This file index.html will show you how to use the logger-1.0.0.js, so just sit down and check it.
*index.html文件很明了地告诉了你怎么去使用 logger-1.0.0.js这个文件,所以你应该看下它。
### [Commom Methods]
*
*logger-1.0.0.js takes "Logger" as its default Object. Here is the 7 main methods in Logger.
*logger-1.0.0.js默认将Logger作为它对外使用的对象,下面是对Logger下的几个方法。
*Logger.set(JSON) --> If you forget to init the config or import the logger-1.0.0.js first, then you should use this method to init Logger. Put a json like the logConfig in it. 如果忘记初始化或者先引入了logger-1.0.0.js文件,可以使用这个方法来初始化Logger,放入一个跟logConfig一样的json变量进去就行了。
*Logger.debug(String, null|1|2|3) --> First param is String, the second param is null, 1 , 2 or 3. null or 2 means show and save, 1 means show, 3 means save. The message will be saved in the localStorage.consolesLogger. 第一个参数为字符串类型,第二个参数可以不填或者为2,表示显示与保存,1只显示,3只保存,保存的信息存在localStorage.consolesLogger中。
*Logger.info(String, null|1|2|3) --> The same as the method above, just show with different color. 同上,只是显示颜色不同。
*Logger.warn(String, null|1|2|3) --> The same as the method above, just show with different color. 同上,只是显示颜色不同。
*Logger.error(String, null|1|2|3) --> The same as the method above, just show with different color. 同上,只是显示颜色不同。
*Logger.fatal(String, null|1|2|3) --> The same as the method above, just show with different color. 同上,只是显示颜色不同。
*Logger.log(String, null|1|2|3) --> The same as the method above, just show with different color. 同上,只是显示颜色不同。
### [Shortcut Key]
*Ctrl + Shift + G --> Show the help. 查看帮助。
*Ctrl + Shift + L --> Show the log in the console. 查看日志。
*Ctrl + Shift + O --> Show the log in the document.body. 在documeng.body对象中显示日志
*Ctrl + Shift + D --> Clear window's log. 清除窗口中显示的日志。
*Ctrl + Shift + R --> Clear the log saved. 清除保存的日志。
### [Permission]
*Within the law.
*请在当地法律允许范围内使用。
这里是百度网盘的链接,有兴趣的可以下载来看看,http://pan.baidu.com/s/1mgqkvxu 。 下面是简易的效果图。
本文介绍了一个基于logger.js的小型日志跟踪框架,用于Web项目的调试与信息展示。该框架支持不同级别的日志记录、颜色标记及快捷键操作。

2177

被折叠的 条评论
为什么被折叠?



