logger.js

本文介绍了一个基于logger.js的小型日志跟踪框架,用于Web项目的调试与信息展示。该框架支持不同级别的日志记录、颜色标记及快捷键操作。

因为项目需要有对用户行为进行跟踪的功能,所以就花了几天弄了这么一个小框架。

原本网络上就已有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 。 下面是简易的效果图。


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值