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

武汉九天鸟-p2p网贷系统开发-互联网应用软件开发

公司官网：http://jiutianniao.com
社交问答：http://ask.jiutianniao.com

最近，在看公司一个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);

测试例子

<html >

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>fansunion-log-demo</title>

<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>

<body>

</body>

</html>

运行效果

自我评价

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

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

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

一个重大失误

JS函数不能同名。

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

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

LogUtil.debug(msg,"debug");
};

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

请求支援

CSDN2013博客之星评选，正在进行中，欢迎支持！

http://vote.blog.csdn.net/blogstaritem/blogstar2013/FansUnion

参考资料

http://blog.csdn.net/cy88310/article/details/6908826

公司某JavaScript大牛半成品的JS调试组件

原文链接：http://blog.fansunion.cn/articles/3422(小雷博客-blog.fansunion.cn)

武汉九天鸟-p2p网贷系统开发-互联网应用软件开发

公司官网：http://jiutianniao.com
社交问答：http://ask.jiutianniao.com