首页 > 程序开发 > web前端 > JavaScript >

我的第一个JS组件-跨浏览器JS调试工具

2013-12-14

最近,在看公司一个JS大牛写的各种组件,复杂的不能完全看懂,只好从容易的入手。 看了一个JS调试工具类,在写Demo的过程中,发现了问题。 于是,我网上查找了一些资料,然后自己亲自动手,写了一个JS调试工具。

最近,在看公司一个JS大牛写的各种组件,复杂的不能完全看懂,只好从容易的入手。

看了一个JS调试工具类,在写Demo的过程中,发现了问题。

于是,我网上查找了一些资料,然后自己亲自动手,写了一个JS调试工具。

实际需求

JS不方便调试,alert这种方式不太友好,比较浪费时间。

了解到浏览器内置了Console对象(JavaScript中没有),但是不同浏览器支持的方法确是不同的。

因此,有必要自己对Console的方法进行封装下,从而适应不同浏览器。

工具类JS源码

/**
 * FansUnion-JS-Log1.0
 *
 * QQ: 240370818
 * Email: LeiWen@FansUnion.cn
 * Date:2013.12.9
 * Copyright 2013-2014, leiwen
 */
//调试工具类
var LogUtil = (function(win, doc) {
 var LogUtil = win.LogUtil || {};
 //默认可以使用
 LogUtil.enable = true;
 
 //以下4个方法,IE/Firefox/Chrome/Opera都支持
 
 //console-info 消息
 LogUtil.info = function(msg){
     LogUtil.doLog(msg,'info');
 };
  
 //console-error 错误
 LogUtil.error = function(msg){
     LogUtil.doLog(msg,'error');
 };
 
 //console-warn  警告
 LogUtil.warn = function(msg){
     LogUtil.doLog(msg,'warn');
 };
 
 //console-log,可以显示(Firefox下,在All中显示,错误-警告-消息-调试信息中都不会显示)
 LogUtil.log = function(msg){
     LogUtil.doLog(msg,'log');
 };
 
 
 //以下是某个或某几个浏览器支持的方法,部分浏览器可能不支持;如果不支持,不会报错,也没有提示
 
 //debug
 LogUtil.debug = function(msg){
  LogUtil.doLog(msg, 'debug');
 };
 
 //用户根据自己的需求,调用某个浏览器特定的方法
 LogUtil.doLog = function(msg, level){
     var useable = LogUtil.isUseable(level);
  //可用才能调用
  if(useable){
     win.console[level](msg);
  }
 };
 
 //console的方法是否可用,IE/Firefox/Chorome/Opera支持的方法是不同的
 //IE控制台 log  info  warn  error  assert  dir  clear  profile  profileEnd
   //Firebug控制台 log  info  warn  error  debug  exception  assert  dir  dirxml  trace 
   //group  groupEnd  groupCollapsed  time  timeEnd  profile  profileEnd  count  clear  table notifyFirebug  firebug
   //Chrom控制台 profiles  memory  debug  error  info  log  warn  dir  dirxml  trace  assert  count  markTimeline 
    //profile  profileEnd  time  timeEnd  group  groupCollapsed  groupEnd 
   //Opera控制台 time  timeEnd  trace  profile  profileEnd  debug  log info  warn  error  assert  dir 
   //dirxml  group  groupCollapsed  groupEnd  count  table 
 
 //判断某个level的调试是否可用(level=error,warn,info,debug等)
 LogUtil.isUseable =function(level){
    var useable =  LogUtil.enable && win.console && win.console[level];
    return useable;
 }
 
 return LogUtil;
})(window, document);

测试例子




<script src=js/fansunion-log.js></script><script type=text/javascript>
function testLog(){

  //4个“一定”正确的方法,IE/Firefox/Chrome/Opera都支持
  LogUtil.info(info);
  LogUtil.log(log);
  LogUtil.error(error);
  LogUtil.warn(warn);
 
  //可选的,Firefox支持,IE不支持
  LogUtil.debug(debug);
 
}

testLog();

</script>

运行效果

fansunion-log-demo-all fansunion-log-demo-error

fansunion-log-demo-warn

fansunion-log-demo-info

fansunion-log-demo-debug

自我评价

写了人生第一个JS组件,还是蛮激动的。

亲自动手,胜过千言万语。

不动手,永远不会,永远只能膜拜大牛。

一个重大失误

JS函数不能同名。

下面2个是同一个方法,JS只根据函数名区分函数,不能重载。(与Java不同)
LogUtil.debug = function(msg){

//这个地方调用的是下面的方法,不是“类似于Java中的方法重载”,而是“JavaScript中的方法覆盖”

LogUtil.debug(msg,debug);
};

LogUtil.debug = function(msg,level){
};
下面的会覆盖上面的。

相关文章
最新文章
热点推荐