/** * This simple function is one of the handiest: pass it an object, and it * will pop an alert() listing all the properties of the object and their * values.(這個函數用來遍歷對象的屬性及其相應的值,並顯示出來) * * @param inObj The object to display properties of. */ jscript.debug.enumProps = function(inObj) {
var props = ""; var i; for (i in inObj) { props += i + " = " + inObj[i] + "\n"; } alert(props);
} // End enumProps().
/** * This is a very simple logger that sends all log messages to a specified * DIV.(這是一個簡單的 debug 日志記錄系統) */ jscript.debug.DivLogger = function() {
/** * The following are faux constants that define the various levels a log * instance can be set to output.(下面的常量用來定義錯誤級別) */ this.LEVEL_TRACE = 1; this.LEVEL_DEBUG = 2; this.LEVEL_INFO = 3; this.LEVEL_WARN = 4; this.LEVEL_ERROR = 5; this.LEVEL_FATAL = 6;
/** * These are the font colors for each logging level.(定義各種錯誤的顯示顏色) */ this.LEVEL_TRACE_COLOR = "a0a000"; this.LEVEL_DEBUG_COLOR = "64c864"; this.LEVEL_INFO_COLOR = "000000"; this.LEVEL_WARN_COLOR = "0000ff"; this.LEVEL_ERROR_COLOR = "ff8c00"; this.LEVEL_FATAL_COLOR = "ff0000";
/** * logLevel determines the minimum message level the instance will show.(需要顯示的最小錯誤級別,默認為 3) */ this.logLevel = 3;
/** * targetDIV is the DIV object to output to. */ this.targetDiv = null;
/** * This function is used to set the minimum level a log instance will show. *(在這裡定義需要顯示的最小錯誤級別) * @param inLevel One of the level constants. Any message at this level * or a higher level will be displayed, others will not. */ this.setLevel = function(inLevel) {
this.logLevel = inLevel;
} // End setLevel().
/** * This function is used to set the target DIV that all messages are * written to. Note that when you call this, the DIV's existing contents * are cleared out.(設置信息顯示的 DIV,調用此函數的時候,原有的信息將被清除) * * @param inTargetDiv The DIV object that all messages are written to. */ this.setTargetDiv = function(inTargetDiv) {
/** * This function is called to determine if a particular message meets or * exceeds the current level of the log instance and should therefore be * logged.(此函數用來判定現有的錯誤級別是否應該被顯示) * * @param inLevel The level of the message being checked. */ this.shouldBeLogged = function(inLevel) {
/** * This function logs messages at TRACE level. *(格式化顯示 TRACE 的錯誤級別信息,往依此類推) * @param inMessage The message to log. */ this.trace = function(inMessage) {
<a href="javascript:void(0);" id="enumPropsLink" onClick="jscript.debug.enumProps(document.getElementById('enumPropsLink'));"> enumProps()-Shows all the properties of this link(顯示此鏈接標簽對象的所有屬性和值) </a> <br><br>
<div id="divLog" style="font-family:arial; font-size: 12pt; padding: 4px; background-color:#ffffff; border:1px solid #000000; width:50%; height:300px; overflow:scroll;">Log message will appear here</div> <script> var log = new jscript.debug.DivLogger(); log.setTargetDiv(document.getElementById("divLog")); log.setLevel(log.LEVEL_DEBUG); </script> <br> <a href="javascript:void(0);" onClick="log.trace('Were tracing along now');"> DivLogger.log.trace() - Try to add a TRACE message to the above DIV (won't work because it's below the specified DEBUG level); </a><br> <a href="javascript:void(0);" onClick="log.debug('Hmm, lets do some debugging');"> DivLogger.log.debug() - Try to add a DEBUG message to the above DIV </a><br> <a href="javascript:void(0);" onClick="log.info('Just for your information');"> DivLogger.log.info() - Add a INFO message to the above DIV </a><br> <a href="javascript:void(0);" onClick="log.warn('Warning! Danger Will Robinson!');"> DivLogger.log.warn() - Add a WARN message to the above DIV </a><br> <a href="javascript:void(0);" onClick="log.error('Dave, there is an error in the AE-35 module');"> DivLogger.log.error() - Add a ERROR message to the above DIV </a><br> <a href="javascript:void(0);" onClick="log.fatal('Game over man, game over!!');"> DivLogger.log.fatal() - Add a FATAL message to the above DIV </a><br> <br><br>
</div>
上面的測試代碼裡面的 <script> 段進行了 debug 的實例化,設置了顯示信息的 DIV,而且設置了顯示信息的最小級別為:LEVEL_DEBUG: var log = new jscript.debug.DivLogger(); log.setTargetDiv(document.getElementById("divLog")); log.setLevel(log.LEVEL_DEBUG); 來看看效果如何呢:
[Ctrl+A 全選 注:如需引入外部Js需刷新才能執行] 在點擊“enumProps()-Shows all ……”(第一個 link )的時候浏覽器彈出的框如下圖所示(Opera),詳細地列出了你所點擊的 a 標簽對象的所有屬性及值: