JavaScript日志工具介绍

   前几天在《Ajax与Java高级程序设计》这本书上面发现了有介绍JavaScript调试工具的文章，觉得写的很好，受益很多，因为目前阶段调试JavaScript99%的都使用的是alert()，这样的做法确实是有效果的，但是问题在于必须在程序公开发布前删除所有的alert()语句，这样就比较麻烦的了，而且还容易出错误，让人很郁闷的。
   该书上介绍了两个调试JavaScript的方式，一种是叫做：Log4JS;一种叫做：Lumberjack。我个人比较喜欢后者，现在将详细介绍一下，并附上例子。
   Log4JS:Log4JS在思想上与Apache的log4j类似的JavaScript调试工具。Log4JS把日志输出到一个可定制的日志类中。可以在http://log4js.sourceforge.net上找到它。可以使用的日志类有四个：alert,write,popup,console。write日志类把日志写入浏览器的一个新的页面。popup日志类把日志写入一个单独的浏览器窗口，这有利于跟踪日志消息。最后console日志类把日志写到Safari的控制台上，如果浏览器不是Safari，那么就把日志写入一个对话框。
   Log4JS与log4j的相似之处在于它们都定义了不同的日志级别。Log4JS中的日志级别按照递增顺序依次是DEBUG、INFO、WARN、ERROR、FATAL和NONE。一个日志类只会记录与自己的级别相同或更高的信息。例如，如果一个日志类的级别是WARN，那么由info()方法产生的消息将不会被输出，但是由warn()、error()或fatal()方法产生的信息就会被输出。
    如果你曾经使用过log4j，那么使用Log4JS就会非常简单。需要记住的是，把日志类的日志级别设置为NONE可以禁用日志类。在你的产品级应用中使用Log4JS的一种方法是在一个单独的JavaScript文件中定义应用所用到的所有日志类，这样就可以在所有页面中使用它们。在把应用部署到产品环境中时，只需更新这个JavaScript文件，禁用所有的日志记录即可。更进一步，你也可以使用Ant的replace任务根据执行构建类型的不同（开发、测试或产品）而设置日志级别。
    Lumberjack：Lumberjack是另一款基于JavaScript的日志记录实用工具，其网址是http://gleepglop.com/javascripts/logger。和Log4JS一样，Lumberjack也受到了Apache log4j的启发。
    Lumberjack与其他JavaScript日志框架的不同之处在于它显示日志信息的方法。Lumberjack把所有的日志信息都写入一个特殊的窗口，使用Alt+D（在Mac
OS X上是Cmd+D）组合键可以激活这个窗口。这个输出窗口是一个显示在网页底部的浮动窗口，即使在上下滚动网页的时候，它的位置也不会改变。这个输出窗口还包含一个基于正则表达式的过滤器，所以只会显示指定类型的错误。同时，它还包含一个JavaScript命令行，可以在其中输入JavaScript命令。
    Lumberjack需要Prototype库：Lumberjack依赖于JavaScript库Prototype，可以在http://prototype.conio.net上找到这个库。由于这种依赖性，当在HTML页面中使用<script>标签分别引入它们的JavaScript文件时，一定要把Prototype列在Lumberjack之前。浏览器会根据JavaScript文件在HTML页面中列出的顺序读取并执行它们。如果把Lumberjack列在Prototype之前，那么当浏览器尝试执行Lumberjack脚本的时候就会发生错误，因为找不到未被执行的Prototype脚本中的值。
    与使用Log4JS时需要创建单独的日志类不同，Lumberjack把所有的日志方法都作为Logger类的静态方法公开。Logger类共公开了4个日志方法：info、debug、warning和error。每个方法都接受一个代表被记录信息的字符串参数。Logger类还公开了一个log方法，它接受两个参数：代表被记录信息的字符串和代表日志级别的字符串。
    以下是使用Lumberjack的例子主要代码：
    calc.js:

/**
 * @author fuhao
 */
function clearResult(){
	document.getElementById("result").value = "";
}
function calc(){
	clearResult();
	var first = document.getElementById("first").value;
	var second = document.getElementById("second").value;
	if(first=="" || second=="" || first==null || second==null){
		Logger.info("请输入加数和被加数");
		return ;
	}
	Logger.info("加数是："+first+"　　　"+"被加数是："+second);
	
	var firstNumber = parseInt(first);
	var secondNumber = parseInt(second);
	
	if(isNaN(firstNumber)){
		Logger.error("输入的加数"+first+"不是数字");
		clearResult();
		return ;
	}
	if(isNaN(secondNumber)){
		Logger.info("输入的被加数"+second+"不是数字");
		return ;
	}
	var sum = firstNumber + secondNumber ;
	document.getElementById("result").value = sum ;
	Logger.info("最后得到的结果是:"+sum);
}