簡單實用的js調(diào)試logger組件實現(xiàn)代碼
更新時間：2010年11月20日 20:27:05 作者：
開發(fā)js組件的時間調(diào)試總是麻煩的，最常用的就是用alert或者debugger來測試js的運行狀態(tài)。
但這兩種方式都有它的局限性，alert會有中斷，有些時候alert出來的值并不可靠，閉包的時候用alert可能會得到不正確的值。debugger使用起來其實也挺糾結(jié)的，只有ie支持。所以最合理的方式是js把運行過程需要調(diào)試的值輸出到頁面，或者寫到cookie也可以，這種方式不會有alert中斷帶來值不正確的問題，也不會受瀏覽器類型的限制，唯一糾結(jié)的是操作起來很麻煩。
于是，有了下面說的這個js組件。這個組件的實現(xiàn)參考了log4net組件的記錄方式，我們利用這個js的logger組件，就可以用log的輸出的方式來進(jìn)行你的調(diào)試工作了。
/*
js調(diào)試組件
*/
(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來輸出不同的調(diào)試信息。
示例代碼如下：
Logger.debug(new Date());
Logger.debug(new Date().addHours(3));
很簡單，再也不用每個地方都寫document.getElementId().innerHtml或者alert/debugger來輸出內(nèi)容了。
示例代碼中使用的addHours是我擴(kuò)展js的Date對象方法，想要了解更多的朋友可以查看《擴(kuò)展js的Date方法》。
于是，有了下面說的這個js組件。這個組件的實現(xiàn)參考了log4net組件的記錄方式，我們利用這個js的logger組件，就可以用log的輸出的方式來進(jìn)行你的調(diào)試工作了。
復(fù)制代碼 代碼如下:
/*
js調(diào)試組件
*/
(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來輸出不同的調(diào)試信息。
示例代碼如下：
復(fù)制代碼 代碼如下:
Logger.debug(new Date());
Logger.debug(new Date().addHours(3));
很簡單，再也不用每個地方都寫document.getElementId().innerHtml或者alert/debugger來輸出內(nèi)容了。
示例代碼中使用的addHours是我擴(kuò)展js的Date對象方法，想要了解更多的朋友可以查看《擴(kuò)展js的Date方法》。
您可能感興趣的文章:
相關(guān)文章
這篇文章主要介紹了js實現(xiàn)進(jìn)度條的方法,實例分析了兩種不同的實現(xiàn)方法,并說明了setTimeout和setInterval的使用區(qū)別,非常具有實用價值,需要的朋友可以參考下2015-02-02
BootStrap table刪除指定行的注意事項(筆記整理)
在前端開發(fā)中遇到這樣的問題，對于table指定行的數(shù)據(jù)進(jìn)行刪除，花了好長時間才解決，今天小編抽時間給大家介紹BootStrap table刪除指定行的注意事項，需要的朋友參考下吧2017-02-02
layui屬于輕量級框架,簡單美化.是用于開發(fā)后端模式,它在服務(wù)端頁面上有非常好的效果，這篇文章主要介紹了layUI布局使用教程,需要的朋友可以參考下2022-09-09
Uncaught?SyntaxError:Unexpected?token?'<'?(
這篇文章主要為大家介紹了JS判斷趨近于直線的多邊形(退化多邊形)實例探究，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2024-01-01
這是我總結(jié)多年的一個小文檔，最近看見有人咨詢?yōu)g覽器兼容的問題，就貢獻(xiàn)出來。2010-05-05
JS禁用頁面上所有控件的實現(xiàn)方法(附demo源碼下載)
這篇文章主要介紹了JS禁用頁面上所有控件的方法,涉及JavaScript捕捉頁面元素的相關(guān)技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2015-12-12
解決LayUI加上form.render()下拉框和單選以及復(fù)選框不出來的問題
今天小編就為大家分享一篇解決LayUI加上form.render()下拉框和單選以及復(fù)選框不出來的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
五步輕松實現(xiàn)JavaScript HTML時鐘效果
這篇文章主要為大家詳細(xì)介紹了五步輕松實現(xiàn)JavaScript HTML時鐘效果的代碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-11-11
SharePoint 客戶端對象模型 (一) ECMA Script
今天開始SharePoint Client對象模型的介紹，簡而言之，SharePoint通過WCF技術(shù)在服務(wù)端提供數(shù)據(jù)服務(wù)，這些服務(wù)提供的內(nèi)容相當(dāng)于SharePoint API的一個子集2011-05-05
這篇文章主要介紹了JS中解決谷歌瀏覽器記住密碼輸入框顏色改變功能,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2017-02-02