我的第一个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');};//以下是某个或某几个浏览器支持的方法,部分浏览器可能不支持;如果不支持,不会报错,也没有提示//debugLogUtil.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实现跨浏览器的事件处理程序
<!doctype html> <html lang="en"> <head><meta charset="UTF-8" ...
- 如何在React JS组件和React JS App中添加CSS样式?
In this tutorial, we will only work with CSS styles. Please ensure you have basic knowledge of HTML, ...
- Vue3封装Video.js组件(基于video.js)
Vue3封装Video.js组件 话不多说直接上代码 在项目中安装Video.js 通过npm安装video.js npm install video.js --save Video.js组件的封装 ...
- vue.js组件数据绑定_Vue.js的增强的数据透视表组件
vue.js组件数据绑定 VUE数据透视表加 (vue-pivot-table-plus) A customized vue component for pivot table. 数据透视表的定制vu ...
- html 引入js 兼容,JS跨浏览器兼容性解决思路及方案汇总,常见JS兼容性知识点汇总...
上篇文章我们介绍了,处理CSS浏览器兼容性的4个解决方案:浏览器CSS样式初始化.浏览器私有属性,CSS hack语法和自动化插件,有兴趣的可以看看,链接放到本文结尾 本文主要介绍JS的跨浏览器兼容性 ...
- ajax跨浏览器初始化,使用Ajax的jQuery localStorage的跨浏览器
我已经这样做了阿贾克斯jQuery的功能,节省了在localStorage的滚动位置和正常工作的Chrome,但它并没有在其他Web浏览器上工作,我能做些什么,使工作在所有平台上?使用Ajax的jQu ...
- html5图片灰度显示,实现各浏览器html图像灰度 跨浏览器图像灰度(grayscale)解决方案...
实现图像灰度(grayscale)最初有ie6推出的专属属性filter实现,后来在css3里w3c实现了标准的filter,但是在不同浏览器的实现程度不一样,因此需要一种浏览器兼容的解决方案. IE ...
- 系统上线发布清单_跨浏览器测试清单上线之前
系统上线发布清单 This article was originally published on LambdaTest. Thank you for supporting the partners ...
- marbin mysql_跨浏览器图像灰度(grayscale)解决方案
首先,你需要在一个svg里声明滤镜,该svg可以内嵌到html文件里,也可以单独保存. [html] view plaincopy 如果该文件保存成了单独的文件gray.svg,我们可以在html文件 ...
最新文章
- python列表按值排序_json的python排序列表(按值)
- 苹果发布首款 Mac 自研芯片 M1,贯通生态快人一步!
- eosjs v20 中文文档
- 全球与中国激光投影设备市场前景规划与发展战略建议报告2022-2028年版
- 图解HTTP学习记录(六)
- 连接查询,结构、循环语句
- 使用ProxyFactoryBean创建AOP代理 - Spring Framework reference 2.0.5 参考手册中文版
- Delta Lake——数据湖的可靠性
- jQuery判断当前点击的是第几个li的代码
- proxy_pool开源项目攻克学习
- 骁龙710加持!索尼将推5.7寸小屏机型Xperia 4
- 考研分享:三战南大,考研的路上你从不孤独(内附500G最新考研资料分享)
- 寻找肇事汽车车牌号C语言,北京交通大学C语言综合程序的设计(黄宇班).doc
- 一些常用软件的网络端口协议分类介绍
- 我的世界热力膨胀JAVA_我的世界1.12-1.6.4热力膨胀 Thermal Expansion Mod下载
- 极客时间和极客学院_极客需要告诉我们的父母有关安全可靠地在线购物的信息
- python3 打字小游戏
- html学习阶段总结2
- thinkphp6 发送短信验证码
- OPPOa5m手机Android,OPPO A5怎么样?OPPO A5手机体验评测