我的第一个JS组件-跨浏览器JS调试工具
来源:互联网 发布:深圳租房 知乎 编辑:程序博客网 时间:2024/06/06 07:12
武汉九天鸟-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
- 我的第一个JS组件-跨浏览器JS调试工具
- 我的第一个JS组件
- 我的第一个JS日历
- 我的第一个JS/CSS程序
- 我的第一个js程序
- 安装ie浏览器的js脚本调试工具
- chrome浏览器开发者工具的使用以及调试js
- Google Chrome浏览器JS调试工具
- Google Chrome浏览器JS调试工具
- 我的第一个封装js代码-----展开收起效果
- 我用js做的第一个简单游戏
- 我的第一个Vue.js输出信息
- JS——我的第一个AJAX程序
- 我的第一个jsf组件
- 创建Vue.js对象:我的第一个Vue.js输出信息
- 我的第一个VC++调试
- 我的第一个调试软件
- JavaScript 代码调试工具js代码调试 在火狐浏览器中调试js代码
- window7 Aero特效异常解决
- FolderBrowserDialog(文件夹浏览对话框) 使用详解和例子
- shell
- 1214
- C#中String类的几个方法(IndexOf、LastIndexOf、Substring)
- 我的第一个JS组件-跨浏览器JS调试工具
- crystal report customer pagesize
- 让普通C++类轻松支持IDispatch自动化接口
- ios中一些老组件(ARC之前)的导入方法
- How to display Chinese/Japanese (Unicode) Character on Windows
- 最新版本spring框架下载
- LeetCode | Sudoku Solver
- Sql Server 2008登录失败问题
- 判断字符串内容是否为数字