武汉九天鸟-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调试工具的更多相关文章

  1. 原生js解决跨浏览器兼容问题

    //跨浏览器兼容问题 Util = { //添加类名 add : function(ele,type,hand){ if(ele.addEventListener){ ele.addEventList ...

  2. 解决SVG跨浏览器兼容性问题

    Raphael JS:SVG/VML+JS实现跨浏览器的矢量图形实现方案 http://blog.csdn.net/tiewen/article/details/8535748 SVG那些小事儿 ht ...

  3. 深入学习JS执行--单线程的JS

    一.介绍 随着js不断学习,你可能会慢慢的好奇,用了这么久的js,却不知道这js在浏览器怎么被执行的,很尴尬.所以,我查阅很多资料来总结JS的执行过程,也分享出来,和大家一起学习. 本篇主要讲单线程的 ...

  4. ZeroClipboard / jquery.zclip.min.js跨浏览器复制插件使用中遇到的问题解决

    之前写过一个淘宝优惠券连接PC端转手机端连接的小工具,当时写到将转换好的url复制到剪切板这块时解决了IE和火狐,就是没办法搞定Chrome,知道可以通过flash搞定,但是觉得太麻烦没有仔细研究. ...

  5. 跨浏览器的placeholder – 原生JS版

    转自来源 : http://www.ifrans.cn/placehoder/ 跨浏览器的placeholder – 原生JS版 html5为input元素新增了一个属性”placeholder”,提 ...

  6. 【前端】跨浏览器事件处理程序EventUtil.js个人注释及详解

    <javascript高级程序设计>跨浏览器事件处理程序EventUtil.js个人注释 EventUtil.js // 跨浏览器事件处理程序封装 var EventUtil = { // ...

  7. JS原生事件处理(跨浏览器)

    一.关于获取事件对象 FF有点倔强,只支持arguments[0],不支持window.event.这次真的不怪IE,虽然把event作为window的属性不合规范,但大家都已经默许这个小问题存在了, ...

  8. JS跨浏览器的事件处理

    1. 事件流 事件:用户或浏览器自身执行的某种动作.如click(点击事件).mouse***(鼠标事件). 事件流:页面中接收事件的顺序,也可理解为事件在页面中传播的顺序. DOM事件流包括三个阶段 ...

  9. js 跨浏览器实现事件

    我们知道不同的浏览器实现事件是不同的,就比如说我们常见的有三种方法: 1,dom0处理事件的方法,以前的js处理事件都是这样写的. (function () { var p=document.getE ...

随机推荐

  1. JSR 303 - Bean Validation 简单介绍及用法

    一.JSR-303简单介绍 JSR-303 是 JAVA EE 6 中的一项子规范.叫做 Bean Validation,官方參考实现是Hibernate Validator. 此实现与 Hibern ...

  2. assert 的理解

    assert 可以实现如下功能: 保证参数之间的大小等约束关系: 函数执行过程中得到的中间结果是否符合预期: def gen_batch(batch_size, skip_window, num_sk ...

  3. ireport 追加新报表

    ireport  追加新报表 /* To change this template, choose Tools | Templates * and open the template in the e ...

  4. 内联函数(Inline Functions)

    影响性能的一个重要因素是内联技巧.内联函数也可称为内嵌函数. 在C++中,函数调用需要建立栈环境,进行参数复制,保护调用现场,返回时,还要进行返回值复制,恢复调用现场.这些工作都是与完成特定任务的操作 ...

  5. C#解决System.Security.Cryptography.MD5.Create()调用的目标发生了异常)的问题

    今天搭建微信扫码支付环境的时候,一样的配置参数,调用连接提示错误 错误:调用的目标发生了异常 然后跟踪到执行 MD5 md5 = System.Security.Cryptography.MD5.Cr ...

  6. @Mapper注解在springboot中无法注入

    问题① @Mapper注解报红无法注入 方法 在pom文件中添加依赖

  7. XML解析——DOM解析

    XML:可扩展性标记语言,主要用来传输和存储数据,相对于HTML的各种标签规范,XML的标签可以让用户根据语义自己进行定义,适用于web传输. JSON和XML的区别: (1).XML定义 扩展标记语 ...

  8. 将yyyyMMdd格式的字符串转成日期DateTime格式

    1.DateTime dt= DateTime.ParseExact("20110720", "yyyyMMdd", Thread.CurrentThread. ...

  9. 多线程模式之Master-Worker

    一. 介绍 需要使用Master-Worker的场景:主线程开了多个子进程(Worker进程)去执行任务时,主线程希望能收集到每个子进程的执行结果. 所以,Master-Worker模式基本上就是: ...

  10. leetcode 链表 Partition List

    Partition List Total Accepted: 19761 Total Submissions: 73252My Submissions Given a linked list and ...