简单实用的js调试logger组件实现代码
2010-11-20 00:00
916 查看
但这两种方式都有它的局限性,alert会有中断,有些时候alert出来的值并不可靠,闭包的时候用alert可能会得到不正确的值。debugger使用起来其实也挺纠结的,只有ie支持。所以最合理的方式是js把运行过程需要调试的值输出到页面,或者写到cookie也可以,这种方式不会有alert中断带来值不正确的问题,也不会受浏览器类型的限制,唯一纠结的是操作起来很麻烦。
于是,有了下面说的这个js组件。这个组件的实现参考了log4net组件的记录方式,我们利用这个js的logger组件,就可以用log的输出的方式来进行你的调试工作了。
怎么使用呢?
这个js组件往window对象注册了Logger对象,我们可以用Logger.log/Logger.debug/Logger.info/Logger.warn/Logger.error/Logger.fatal来输出不同的调试信息。
示例代码如下:
很简单,再也不用每个地方都写document.getElementId().innerHtml或者alert/debugger来输出内容了。
示例代码中使用的addHours是我扩展js的Date对象方法,想要了解更多的朋友可以查看《扩展js的Date方法》。
于是,有了下面说的这个js组件。这个组件的实现参考了log4net组件的记录方式,我们利用这个js的logger组件,就可以用log的输出的方式来进行你的调试工作了。
/* js调试组件 */ (function () { 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.VIEW_TYPE_ALERT = 0; logger.VIEW_TYPE_APPEND = 1; logger.prototype = { setLevel: function (level) { this.level = level; }, setObject: function (o) { if (typeof o == 'string') { this.object = document.getElementById(o); } else { this.object = o; } }, setViewType: function (type) { this.viewType = type; }, log: function (s) { this.message(100, s); }, debug: function (s) { this.message(logger.LEVEL_DEBUG, s); }, info: function (s) { this.message(logger.LEVEL_INFO, s); }, warn: function (s) { this.message(logger.LEVEL_WARN, s); }, error: function (s) { this.message(logger.LEVEL_ERROR, s); }, fatal: function (s) { this.message(logger.LEVEL_FATAL, s); }, message: function (level, s) { if (level >= this.level) { if (this.object != null) { this.object.innerHTML = s; } else if (this.viewType == logger.VIEW_TYPE_ALERT) { alert(s); } else { document.body.appendChild(document.createTextNode(s)); document.body.appendChild(document.createElement("br")); } } } }; if (typeof window.Logger == 'undefined' || window.Logger == null) window.Logger = new logger(logger.LEVEL_DEBUG, null, logger.VIEW_TYPE_APPEND); })();
怎么使用呢?
这个js组件往window对象注册了Logger对象,我们可以用Logger.log/Logger.debug/Logger.info/Logger.warn/Logger.error/Logger.fatal来输出不同的调试信息。
示例代码如下:
Logger.debug(new Date()); Logger.debug(new Date().addHours(3));
很简单,再也不用每个地方都写document.getElementId().innerHtml或者alert/debugger来输出内容了。
示例代码中使用的addHours是我扩展js的Date对象方法,想要了解更多的朋友可以查看《扩展js的Date方法》。
相关文章推荐
- 简单实用的js调试logger组件
- 简单实用的js调试logger组件
- 使用纯JS代码判断字符串中有多少汉字的实现方法(超简单实用)
- 使用纯JS代码判断字符串中有多少汉字的实现方法(超简单实用)
- JS简单实用的倒计时效果实现代码
- JS简单实用的倒计时效果实现代码
- Console命令详解,让调试js代码变得更简单
- JS实现简单的时分秒倒计时代码
- 最简单的js图片切换效果实现代码
- JS简单实现文件上传实例代码(无需插件)
- js设置文本框中焦点位置在最后的示例代码(简单实用)
- 用vue写一个商城的上货组件(简单易懂版,50行js实现效果)
- Java对象简单实用案例之计算器实现代码
- js实现的简单radio背景颜色选择器代码
- 一个超简单的JS拖拽实现代码(兼容IE,Firefox)
- Console命令详解,让调试js代码变得更简单
- JS组件Bootstrap实现弹出框和提示框效果代码
- JS组件Bootstrap Table表格多行拖拽效果实现代码
- JS组件Bootstrap实现弹出框和提示框效果代码