我的第一个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
最新文章
- 兄弟连javascript学习笔记
- django中嵌入百度editor插件
- zw版【转发&#183;台湾nvp系列Delphi例程】HALCON DispCross
- Spring学习笔记之方法注入
- ***PHP implode() 函数,将数组合并为字符串;explode() 函数,把字符串打散为数组
- 【转】让Souce Insight支持多种语言的语法高亮:Python,Ruby,ARM汇编,windows脚本文件(bat/batch),PPC,SQL,TCL,Delphi等
- C++复习笔记
- mysql SQL_MODE设置
- CoreText实现图文混排之点击事件-b
- webservice(CXF)基于3.1.1版本实例
- LR性能测试应用
- 实现简单的手写涂鸦板(demo源码)
- 自适应滤波:维纳滤波器——GSC算法及语音增强
- Linux常用命令(第二版) --权限管理命令
- 【转】hibernate 延迟加载
- Nginx 1.9+PHP5.6 环境搭建
- [No0000C5]VS2010删除空行
- 小程序for循环嵌套
- Android : Error inflating class android.support.design.widget.NavigationView
- scrapy微信爬虫使用总结
热门文章
- 轻松学习之Linux教程四 神器vi程序编辑器攻略
- Chromium Graphics: HW Video Acceleration in Chrom{e,ium}{,OS}
- 关于IDEA无法完整显示项目文件结构
- Command ";python setup.py egg_info"; failed with error code 1 in /tmp/pip-build-qvc66dfs/supervisor/
- 洛谷—— P2387 魔法森林
- cogs 1500. 误差曲线
- Fastboot线刷“复活”之刷机心得(三)——错误处理
- 【原生JS组件】javascript 运动框架
- Android自己定义效果——随机抽奖
- Android学习笔记进阶20 之得到图片的缩略图