简单实用的js调试logger组件

开发js组件的时间调试总是麻烦的，最常用的就是用alert或者debugger来测试js的运行状态。但这两种方式都有它的局限性，alert会有中断，有些时候alert出来的值并不可靠，闭包的时候用alert可能会得到不正确的值。debugger使用起来其实也挺纠结的，只有ie支持。所以最合理的方式是js把运行过程需要调试的值输出到页面，或者写到cookie也可以，这种方式不会有alert中断带来值不正确的问题，也不会受浏览器类型的限制，唯一纠结的是操作起来很麻烦。

于是，有了下面说的这个js组件。这个组件的实现参考了log4net组件的记录方式，我们利用这个js的logger组件，就可以用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 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

/* 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来输出不同的调试信息。

示例代码如下：

1 2	Logger.debug( new  Date()); Logger.debug( new  Date().addHours(3));

很简单，再也不用每个地方都写document.getElementId().innerHtml或者alert/debugger来输出内容了。

示例代码中使用的addHours是我扩展js的Date对象方法，想要了解更多的朋友可以查看《扩展js的Date方法》。