热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

简单实用的js调试logger组件实现代码

开发js组件的时间调试总是麻烦的,最常用的就是用alert或者debugger来测试js的运行状态。
但这两种方式都有它的局限性,alert会有中断,有些时候alert出来的值并不可靠,闭包的时候用alert可能会得到不正确的值。debugger使用起来其实也挺纠结的,只有ie支持。所以最合理的方式是js把运行过程需要调试的值输出到页面,或者写到COOKIE也可以,这种方式不会有alert中断带来值不正确的问题,也不会受浏览器类型的限制,唯一纠结的是操作起来很麻烦。
于是,有了下面说的这个js组件。这个组件的实现参考了log4net组件的记录方式,我们利用这个js的logger组件,就可以用log的输出的方式来进行你的调试工作了。
代码如下:

/*
js调试组件
*/
(function () {
var logger = function (level, object, viewType) {
this.level = level;
this.object = object;
this.viewType = viewType;
}
logger.LEVEL_DEBUG = 0;
logger.LEVEL_INFO = 1;
logger.LEVEL_WARN = 2;
logger.LEVEL_ERROR = 3;
logger.LEVEL_FATAL = 4;
logger.VIEW_TYPE_ALERT = 0;
logger.VIEW_TYPE_APPEND = 1;
logger.prototype = {
setLevel: function (level) {
this.level = level;
},
setObject: function (o) {
if (typeof o == 'string') {
this.object = document.getElementById(o);
} else {
this.object = o;
}
},
setViewType: function (type) {
this.viewType = type;
},
log: function (s) {
this.message(100, s);
},
debug: function (s) {
this.message(logger.LEVEL_DEBUG, s);
},
info: function (s) {
this.message(logger.LEVEL_INFO, s);
},
warn: function (s) {
this.message(logger.LEVEL_WARN, s);
},
error: function (s) {
this.message(logger.LEVEL_ERROR, s);
},
fatal: function (s) {
this.message(logger.LEVEL_FATAL, s);
},
message: function (level, s) {
if (level >= this.level) {
if (this.object != null) {
this.object.innerHTML = s;
} else if (this.viewType == logger.VIEW_TYPE_ALERT) {
alert(s);
} else {
document.body.appendChild(document.createTextNode(s));
document.body.appendChild(document.createElement("br"));
}
}
}
};
if (typeof window.Logger == 'undefined' || window.Logger == null)
window.Logger = new logger(logger.LEVEL_DEBUG, null, logger.VIEW_TYPE_APPEND);
})();

怎么使用呢?
这个js组件往window对象注册了Logger对象,我们可以用Logger.log/Logger.debug/Logger.info/Logger.warn/Logger.error/Logger.fatal来输出不同的调试信息。
示例代码如下:
代码如下:

Logger.debug(new Date());
Logger.debug(new Date().addHours(3));

很简单,再也不用每个地方都写document.getElementId().innerHtml或者alert/debugger来输出内容了。
示例代码中使用的addHours是我扩展js的Date对象方法,想要了解更多的朋友可以查看《扩展js的Date方法》。
推荐阅读
  • 本文详细介绍了如何在Kendo UI for jQuery的数据管理组件中,将行标题字段呈现为锚点(即可点击链接),帮助开发人员更高效地实现这一功能。通过具体的代码示例和解释,即使是新手也能轻松掌握。 ... [详细]
  • 在尝试使用C# Windows Forms客户端通过SignalR连接到ASP.NET服务器时,遇到了内部服务器错误(500)。本文将详细探讨问题的原因及解决方案。 ... [详细]
  • Symfony是一个功能强大的PHP框架,以其依赖注入(DI)特性著称。许多流行的PHP框架如Drupal和Laravel的核心组件都基于Symfony构建。本文将详细介绍Symfony的安装方法及其基本使用。 ... [详细]
  • 深入解析ESFramework中的AgileTcp组件
    本文详细介绍了ESFramework框架中AgileTcp组件的设计与实现。AgileTcp是ESFramework提供的ITcp接口的高效实现,旨在优化TCP通信的性能和结构清晰度。 ... [详细]
  • 本文深入探讨了 Java 中 LocalTime 类的 isSupported() 方法,包括其功能、语法和使用示例。通过具体的代码片段,帮助读者理解如何检查特定的时间字段或单位是否被 LocalTime 类支持。 ... [详细]
  • 深入理解TCP/IP协议中的MTU与MSS及以太网数据帧
    本文详细探讨了TCP/IP协议中MTU(最大传输单元)和MSS(最大分段大小)的概念及其在以太网数据帧中的应用。通过分析这些关键参数的工作机制,帮助读者更好地理解网络通信中的数据包处理过程。 ... [详细]
  • 并发编程 12—— 任务取消与关闭 之 shutdownNow 的局限性
    Java并发编程实践目录并发编程01——ThreadLocal并发编程02——ConcurrentHashMap并发编程03——阻塞队列和生产者-消费者模式并发编程04——闭锁Co ... [详细]
  • 本文详细介绍了钩子(hook)的概念、原理及其在编程中的实际应用。通过对比回调函数和注册函数,解释了钩子的工作机制,并提供了具体的Python示例代码,帮助读者更好地理解和掌握这一重要编程工具。 ... [详细]
  • 本文详细介绍了 phpMyAdmin 的安装与配置方法,适用于多个版本的 phpMyAdmin。通过本教程,您将掌握从下载到部署的完整流程,并了解如何根据不同的环境进行必要的配置调整。 ... [详细]
  • 二叉树的链表实现
    本文介绍了一种使用链表结构表示二叉树的方法。通过定义节点结构和相关操作函数,可以方便地创建、插入和遍历二叉树。 ... [详细]
  • 本文详细介绍了如何检查和配置电脑上的PHP环境,包括位数、运行支持以及文件格式的打开方式。适合初学者了解PHP的基础知识和操作方法。 ... [详细]
  • 本文介绍了一种基于选择排序思想的高效排序方法——堆排序。通过使用堆数据结构,堆排序能够在每次查找最大元素时显著提高效率。文章详细描述了堆排序的工作原理,并提供了完整的C语言代码实现。 ... [详细]
  • Python自动化测试入门:Selenium环境搭建
    本文详细介绍如何在Python环境中安装和配置Selenium,包括开发工具PyCharm的安装、Python环境的设置以及Selenium包的安装方法。此外,还提供了编写和运行第一个自动化测试脚本的步骤。 ... [详细]
  • 针对表格详情切换功能,对HTML代码进行了优化和调整,以确保更好的显示效果和用户体验。 ... [详细]
  • 本文探讨了如何在Classic ASP中实现与PHP的hash_hmac('SHA256', $message, pack('H*', $secret))函数等效的哈希生成方法。通过分析不同实现方式及其产生的差异,提供了一种使用Microsoft .NET Framework的解决方案。 ... [详细]
author-avatar
Coco李可儿
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有