所属分类:HTML网页，JS语言与代码
转载自http://bbs.51js.com/viewthread.php?tid=73741&extra=page%3D1
[color=blue]最近更新[/color]
[color=blue] 1.增加控制台“最小化/还原”切换图标[/color]
[color=blue]
[/color]
[color=blue] 2.将logger.js内部拆分为logger.js,logger-base.js,logger-core.js,重构资源加载方式,根据参数自动选择加载相应的资源.[/color]
[color=#0000ff] 3.IE5、IE6、IE7、IE8、Mozilla Firefox、Opera、Safari、chrome兼容[/color]
创意无限,简单实用javascript-logger工具 - Kingfishers
项目发布地址及v1.0.3下载地址 : [url=http://code.google.com/p/kingfishers/:1ij71iz2]http://code.google.com/p/kingfishers/[/url:1ij71iz2]
v1.0.3在线演示:[url=http://kingfishers.googlecode.com/svn/trunk/Kingfishers/kingfishers/example.htm:1ij71iz2]http://kingfishers.googlecode.com/svn/trunk/Kingfishers/kingfishers/example.htm[/url:1ij71iz2]
[url=http://kingfishers.googlecode.com/svn/trunk/Kingfishers/kingfishers/example.htm:1ij71iz2]
[/url:1ij71iz2] [url=http://kingfishers.googlecode.com/files/Kingfishers-1.0.3.rar:1ij71iz2]
[/url:1ij71iz2]
QUOTE:
[color=#008000]function[/color],object,json,js基本类型等等..
color 可以是颜色名称,如yellow;也可以是颜色值,如#0000ff
注:该组件重写了默认的alert方法,可以通过传两个参数的方式来调用输出信息接口,如alert(arg,color)
[code]<!--
快速入门(Quick Start Guide):
第一步:下载和配置说明
点击download下载kingfishers组件,解压将其中的core文件夹中的内容加入到项目中,如
project/js/debug/logger.css -CSS样式文件(enabled=false时不加载该文件)
/logger.js -核心js加载器(加载完毕自我删除) 2K
/logger-base.js -核心js基本函数库 7K
/logger-core.js -核心js库(enabled=false时不加载该库) 44K
/Highlighter.js -代码高亮组件(highlighter=false时不加载该库)
/images/ -皮肤文件夹
/dlg-bg0.gif -蓝色皮肤图片文件1
/dlg-bg3.jpg -蓝色皮肤图片文件2
/dlg-bg4.jpg -蓝色皮肤图片文件3
/dlg-bg5.gif -蓝色皮肤图片文件4
/dlg-bg1.gif -黄色皮肤图片文件
/dlg-bg7.png -红色皮肤图片文件
/dlg-bg8.png -粉色皮肤图片文件
project/WEB-INF/
/classes
/lib
在项目的头页面中,引入一行logger.js的script标签
第二步:基本功能使用说明
输出信息的方法:$alert(arg,color)
arg 可以是dom元素,function,object,json,js基本类型等等..
color 可以是颜色名称,如yellow;也可以是颜色值,如#0000ff
注:该组件重写了默认的alert方法,可以通过传两个参数的方式来调用输出信息接口,如alert(arg,color)
-->
<script type="text/javascript" src="http://kingfishers.googlecode.com/files/loader.js"></script>
<script type="text/javascript">
function my(){
this.name="kingfishers";
this.id=1;
this.bz="javascript工具";
}
my.prototype.write = function(){}
var myo = new my();
alert("hello world","red"); //使用alert输出红色的hello world字符串
$alert("hello world"); //使用$alert输出黄色的[默认色]hello world字符串
$alert("hello world","#ffffff"); //输出白色的hello world字样
$alert($Log); //输出kingfishers组件核心库中json对象$Log
$alert(my); //输出function方法my
$alert(myo); //输出function方法my
</script> [/code]
| 关于Kingfishers
//---------------------------------------------------------------------------------------------------//
Kingfishers是一个用javascript语言编写的,能够代替alert,
在浏览器中连续输出客户端javascript脚本运行日志的工具。
主要用于客户端脚本的分析和查错。
自己为工具起的名字是 kingfishers(翠鸟),寓意精致栖息于您的项目中.
只有倾注了思想和创意的作品才会比较有力!kingfishers-1.0版雏形发布后,
依旧会致力将它做的更加简单实用,力求完美无暇。
//---------------------------------------------------------------------------------------------------//
| Kingfishers开发背景
//---------------------------------------------------------------------------------------------------//
随着客户端技术的蓬勃发展,在javascript开发过程中，如果总是使用alert的方式进行程序调式,
很难满足企业级开发的需要。
比如在某个ajax项目中，客户端存在一个自定义三四千行JS文件，其中包含各种自定义的javascript对象。
分析和查错的过程中，总是需要在js程序执行到某个关键点的时候，
监视自定义对象的值或状态,判断执行结果是否是预期的样子.
使用alert的方式存在以下两个明显的缺点：
1.假如一次执行中有n个关键点的值都想随时监视，使用alert您就不的不点够n次确认，
- 给开发者的感觉是很不连贯也不直观，很难流畅发现隐藏很深的问题。
2.用于调试的alert语句，在发布的时候必须删除掉，等有朝一日需要再次调试的时候，
- 您就不得不回忆之前的关键点，分别加上alert，艰难的调试。
鉴于以上需求,本着简单实用的原则,自己动手编写了这个javascript调试工具，
使用该工具之后，以上两个问题，变得迎刃而解。您或许会发现,客户端下javascript查错变的不再艰难。
该工具主要有以下特点：
1.完全的可插入式思想，对目标程序没有任何负作用。
[可在{example\basic\10.log工具参数测试}页面中进行测试和确认]
2.使用方法简单,方便。只需要引入一行JS代码,搞定所有事情.
[使用示例请参照{example\basic}目录的资源]
全部核心程序包括
1)核心脚本文件 : logger.js [必须]
2)相关式样文件 : logger.css [必须]
3)代码高亮引擎文件 : Highlighter.js [可选] 当启动参数 highlighter=false 时不需要该文件
目录说明:
1) example\basic : 使用示例
2) example\xhtml : W3C标准兼容性测试
3) readme : 使用说明
//---------------------------------------------------------------------------------------------------//
| Kingfishers参数说明
//---------------------------------------------------------------------------------------------------//
moveborder = true //(可选)拖动及调整日志Console大小时是否出现虚线框 是:true(默认)/否:false
grayout = true //(可选)拖动日志Console时底层页面元素是否灰显 是:true(默认)/否:false
targetdiv="myDiv" //(可选)将日志Console显示到指定ID的DIV中
skinid = 0 //(可选)设置- 0:经典橘黄 1:蓝色Ⅰ 2:蓝色Ⅱ 3:蓝色Ⅲ 不设置(默认):白色圆角简易风格
debug = true //(可选)是否支持代码执行功能 是:true(默认)/否:false
>
备注:
1.参数 enabled=false 时,
(1)其余参数均无效,
(2)控制台DIV、右键DIV不会被创建到当前document的body中.
(3)当前document中不会加载logger.css资源,
2.参数 highlighter=false 时,
(1)当前document中不会加载Highlighter.js资源
(2)ctrl+shift+d触发后输出到控制台的网页代码没有被高亮处理.
3.参数 contextmenu = false 时,
(1)右键DIV不会被创建到当前document的body中.
(2)在工具上单击右键,不会弹出工具自定义的右键菜单.
4.参数 cookie=true 时,
移动或调整大小后,控制台的位置和尺寸信息将给记录到cookie中,使得页面刷新后，日志控制台总是会保持刷新前的位置、大小
5.参数 skin = false 时,
右键菜单的肤色总是使用logger.css中配置的颜色.
参数 skin = true 时,
右键菜单的肤色切换模式可以在运行是进行设定,包含随即肤色模式、锁定肤色模式.
6.参数 suspended=false时, 控制台的浮动特征失效.
参数 suspended=true时, 滚动条事件导致控制台在不在可视范围内时，自动将其浮动到可见视野内.
7.其余参数相对好理解,不进行详细说明.
//---------------------------------------------------------------------------------------------------//
| 您可以做的选择
//---------------------------------------------------------------------------------------------------//
项目庞大的时候，需要总是在程序中保留一些调试信息，必要的时候开启进行调试。
所以，能够让关键点的信息随时打印出来也是很重要的，同时保证在Release之后，
对目标脚本执行性能没有任何影响是必须要考虑的问题。
本工具提供的print接口是：$Log.loginfo(msg,color);//msg:输出的信息体 color:信息的颜色
Kingfishers并不想强迫您适应些什么,您可以选择自己喜欢的方式来使用它.
如果您认真阅读了{Kingfishers参数说明}章节,您应该会很容易的发现Kingfishers闪光的地方.
除了参数可选之外,您还可以选择通过以下两种方式来使用Kingfishers.
方式一:
如果您的项目中使用了Kingfishers,当您的项目Release的时候,
您只需要将enabled参数设置为false,不需要删除目标程序中的调试代码,Kingfishers不会对目标JS程序执行性能有任何影响;
[关于此您可在{example\basic\10.log工具参数测试}页面中进行测试和确认]
当您的项目需要再次调试时,只需要将script标签中enabled参数设置为true即可.
方式二:
如果您的项目release的时候,你希望将Kingfishers加入到目标程序中的script标签删除,您也可以
选择在您的程序中重构一个类似于下面的方法,名字随意.比如：
function $alert(message,color){$Log.loginfo(message,color);}
在您的项目中统一使用$alert的方法来输出日志.您可以按照以下步骤发布您的项目:
1) 将Kingfishers加入到目标程序中的script标签删除
2) 修改jsOut方法的实现为空,如
function $alert(message,color){}
效果图：
[color=blue]最近更新[/color]
[color=blue] 1.增加控制台“最小化/还原”切换图标[/color]
[color=blue]
[/color][color=blue] 2.将logger.js内部拆分为logger.js,logger-base.js,logger-core.js,重构资源加载方式,根据参数自动选择加载相应的资源.[/color]
[color=#0000ff] 3.IE5、IE6、IE7、IE8、Mozilla Firefox、Opera、Safari、chrome兼容[/color]
创意无限,简单实用javascript-logger工具 - Kingfishers
项目发布地址及v1.0.3下载地址 : [url=http://code.google.com/p/kingfishers/:1ij71iz2]http://code.google.com/p/kingfishers/[/url:1ij71iz2]
v1.0.3在线演示:[url=http://kingfishers.googlecode.com/svn/trunk/Kingfishers/kingfishers/example.htm:1ij71iz2]http://kingfishers.googlecode.com/svn/trunk/Kingfishers/kingfishers/example.htm[/url:1ij71iz2]
[url=http://kingfishers.googlecode.com/svn/trunk/Kingfishers/kingfishers/example.htm:1ij71iz2]
[/url:1ij71iz2] [url=http://kingfishers.googlecode.com/files/Kingfishers-1.0.3.rar:1ij71iz2][/url:1ij71iz2] QUOTE:
[color=#008000]function[/color],object,json,js基本类型等等..
color 可以是颜色名称,如yellow;也可以是颜色值,如#0000ff
注:该组件重写了默认的alert方法,可以通过传两个参数的方式来调用输出信息接口,如alert(arg,color)
[code]<!--
快速入门(Quick Start Guide):
第一步:下载和配置说明
点击download下载kingfishers组件,解压将其中的core文件夹中的内容加入到项目中,如
project/js/debug/logger.css -CSS样式文件(enabled=false时不加载该文件)
/logger.js -核心js加载器(加载完毕自我删除) 2K
/logger-base.js -核心js基本函数库 7K
/logger-core.js -核心js库(enabled=false时不加载该库) 44K
/Highlighter.js -代码高亮组件(highlighter=false时不加载该库)
/images/ -皮肤文件夹
/dlg-bg0.gif -蓝色皮肤图片文件1
/dlg-bg3.jpg -蓝色皮肤图片文件2
/dlg-bg4.jpg -蓝色皮肤图片文件3
/dlg-bg5.gif -蓝色皮肤图片文件4
/dlg-bg1.gif -黄色皮肤图片文件
/dlg-bg7.png -红色皮肤图片文件
/dlg-bg8.png -粉色皮肤图片文件
project/WEB-INF/
/classes
/lib
在项目的头页面中,引入一行logger.js的script标签
第二步:基本功能使用说明
输出信息的方法:$alert(arg,color)
arg 可以是dom元素,function,object,json,js基本类型等等..
color 可以是颜色名称,如yellow;也可以是颜色值,如#0000ff
注:该组件重写了默认的alert方法,可以通过传两个参数的方式来调用输出信息接口,如alert(arg,color)
-->
<script type="text/javascript" src="http://kingfishers.googlecode.com/files/loader.js"></script>
<script type="text/javascript">
function my(){
this.name="kingfishers";
this.id=1;
this.bz="javascript工具";
}
my.prototype.write = function(){}
var myo = new my();
alert("hello world","red"); //使用alert输出红色的hello world字符串
$alert("hello world"); //使用$alert输出黄色的[默认色]hello world字符串
$alert("hello world","#ffffff"); //输出白色的hello world字样
$alert($Log); //输出kingfishers组件核心库中json对象$Log
$alert(my); //输出function方法my
$alert(myo); //输出function方法my
</script> [/code]
| 关于Kingfishers
//---------------------------------------------------------------------------------------------------//
Kingfishers是一个用javascript语言编写的,能够代替alert,
在浏览器中连续输出客户端javascript脚本运行日志的工具。
主要用于客户端脚本的分析和查错。
自己为工具起的名字是 kingfishers(翠鸟),寓意精致栖息于您的项目中.
只有倾注了思想和创意的作品才会比较有力!kingfishers-1.0版雏形发布后,
依旧会致力将它做的更加简单实用,力求完美无暇。
//---------------------------------------------------------------------------------------------------//
| Kingfishers开发背景
//---------------------------------------------------------------------------------------------------//
随着客户端技术的蓬勃发展,在javascript开发过程中，如果总是使用alert的方式进行程序调式,
很难满足企业级开发的需要。
比如在某个ajax项目中，客户端存在一个自定义三四千行JS文件，其中包含各种自定义的javascript对象。
分析和查错的过程中，总是需要在js程序执行到某个关键点的时候，
监视自定义对象的值或状态,判断执行结果是否是预期的样子.
使用alert的方式存在以下两个明显的缺点：
1.假如一次执行中有n个关键点的值都想随时监视，使用alert您就不的不点够n次确认，
- 给开发者的感觉是很不连贯也不直观，很难流畅发现隐藏很深的问题。
2.用于调试的alert语句，在发布的时候必须删除掉，等有朝一日需要再次调试的时候，
- 您就不得不回忆之前的关键点，分别加上alert，艰难的调试。
鉴于以上需求,本着简单实用的原则,自己动手编写了这个javascript调试工具，
使用该工具之后，以上两个问题，变得迎刃而解。您或许会发现,客户端下javascript查错变的不再艰难。
该工具主要有以下特点：
1.完全的可插入式思想，对目标程序没有任何负作用。
[可在{example\basic\10.log工具参数测试}页面中进行测试和确认]
2.使用方法简单,方便。只需要引入一行JS代码,搞定所有事情.
[使用示例请参照{example\basic}目录的资源]
全部核心程序包括
1)核心脚本文件 : logger.js [必须]
2)相关式样文件 : logger.css [必须]
3)代码高亮引擎文件 : Highlighter.js [可选] 当启动参数 highlighter=false 时不需要该文件
目录说明:
1) example\basic : 使用示例
2) example\xhtml : W3C标准兼容性测试
3) readme : 使用说明
//---------------------------------------------------------------------------------------------------//
| Kingfishers参数说明
//---------------------------------------------------------------------------------------------------//
moveborder = true //(可选)拖动及调整日志Console大小时是否出现虚线框 是:true(默认)/否:false
grayout = true //(可选)拖动日志Console时底层页面元素是否灰显 是:true(默认)/否:false
targetdiv="myDiv" //(可选)将日志Console显示到指定ID的DIV中
skinid = 0 //(可选)设置- 0:经典橘黄 1:蓝色Ⅰ 2:蓝色Ⅱ 3:蓝色Ⅲ 不设置(默认):白色圆角简易风格
debug = true //(可选)是否支持代码执行功能 是:true(默认)/否:false
>
备注:
1.参数 enabled=false 时,
(1)其余参数均无效,
(2)控制台DIV、右键DIV不会被创建到当前document的body中.
(3)当前document中不会加载logger.css资源,
2.参数 highlighter=false 时,
(1)当前document中不会加载Highlighter.js资源
(2)ctrl+shift+d触发后输出到控制台的网页代码没有被高亮处理.
3.参数 contextmenu = false 时,
(1)右键DIV不会被创建到当前document的body中.
(2)在工具上单击右键,不会弹出工具自定义的右键菜单.
4.参数 cookie=true 时,
移动或调整大小后,控制台的位置和尺寸信息将给记录到cookie中,使得页面刷新后，日志控制台总是会保持刷新前的位置、大小
5.参数 skin = false 时,
右键菜单的肤色总是使用logger.css中配置的颜色.
参数 skin = true 时,
右键菜单的肤色切换模式可以在运行是进行设定,包含随即肤色模式、锁定肤色模式.
6.参数 suspended=false时, 控制台的浮动特征失效.
参数 suspended=true时, 滚动条事件导致控制台在不在可视范围内时，自动将其浮动到可见视野内.
7.其余参数相对好理解,不进行详细说明.
//---------------------------------------------------------------------------------------------------//
| 您可以做的选择
//---------------------------------------------------------------------------------------------------//
项目庞大的时候，需要总是在程序中保留一些调试信息，必要的时候开启进行调试。
所以，能够让关键点的信息随时打印出来也是很重要的，同时保证在Release之后，
对目标脚本执行性能没有任何影响是必须要考虑的问题。
本工具提供的print接口是：$Log.loginfo(msg,color);//msg:输出的信息体 color:信息的颜色
Kingfishers并不想强迫您适应些什么,您可以选择自己喜欢的方式来使用它.
如果您认真阅读了{Kingfishers参数说明}章节,您应该会很容易的发现Kingfishers闪光的地方.
除了参数可选之外,您还可以选择通过以下两种方式来使用Kingfishers.
方式一:
如果您的项目中使用了Kingfishers,当您的项目Release的时候,
您只需要将enabled参数设置为false,不需要删除目标程序中的调试代码,Kingfishers不会对目标JS程序执行性能有任何影响;
[关于此您可在{example\basic\10.log工具参数测试}页面中进行测试和确认]
当您的项目需要再次调试时,只需要将script标签中enabled参数设置为true即可.
方式二:
如果您的项目release的时候,你希望将Kingfishers加入到目标程序中的script标签删除,您也可以
选择在您的程序中重构一个类似于下面的方法,名字随意.比如：
function $alert(message,color){$Log.loginfo(message,color);}
在您的项目中统一使用$alert的方法来输出日志.您可以按照以下步骤发布您的项目:
1) 将Kingfishers加入到目标程序中的script标签删除
2) 修改jsOut方法的实现为空,如
function $alert(message,color){}
效果图：