JavaScript 日誌工具

最後更新：2017-02-28 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

javascript

   前些天，學了一下AJAX，感覺對於JavaScript的控制有些麻煩，尤其是經常使用Alert（）語句來輸出一些記錄，真是很不方便。於是到網上搜尋了一些JavaScript的Logging工具，感覺都有些小缺點，不適合自己。於是，自己乾脆也寫了一個Logging工具，使用起來覺得還不錯。這裡就介紹給大家看看。

     這個工具僅僅是一個js指令檔。使用起來很方便，只要把這個指令檔和Html檔案放在同一目錄下，然後使用在<Head>和</Head>中間加入如下一條語句即可：
<script src="mxjLogger.js" type="text/javascript"></script>

    這是一個簡單的JavaScript的Logger工具，與Java的Log4j有些相似。分成5個層級，由低到高分別是：debug info warn error fatal 。預設是顯示並且處於debug層級記錄啟用狀態。快速鍵是 Alt + D ,可以調出或隱藏這個工具。滾動時，它不會隨捲軸而滾動。

    一旦引入這個js指令碼，那麼一共有5個方法可以在JavaScript中調用，分別是debug() info() warn() error() fatal().

    在<script></script>中調用，如下：    部分語句
<script src="mxjLogger.js" type="text/javascript"></script>

<script type="text/javascript">
   debug("歡迎使用 Javamxj 開發的 JavaScript Logger");
   debug("我的blog：http://blog.csdn.net/javamxj/")
   info("目前時間是：" + new Date());
</script>

也可以直接在方法中調用，如下：部分語句
<button style="color:green" >
發送 Debug 資訊
</button>

完整的測試檔案testLogger.html和指令檔mxjLogger.js如下：
testLogger.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" > <html><head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>測試Javascript Logger</title> <script src="mxjLogger.js" type="text/javascript"></script> <script type="text/javascript"> debug("歡迎使用 Javamxj 開發的 JavaScript Logger"); debug("我的blog：http://blog.csdn.net/javamxj/") info("目前時間是：" + new Date()); </script> <style type="text/css">  </style></head><body> <h1>歡迎使用 Javamxj 開發的 JavaScript Logger</h1> <p>分為5個層級，點擊每個按鈕都會顯示相應的資訊</p> <button style="color:green" > 發送 Debug 資訊 </button><p> <button style="color:blue" > 發送 Info 資訊 </button><p> <button style="color:red" > 發送 Warning 資訊 </button><p> <button style="color:black" > 發送 Error 資訊 </button><p> <button style="color:#800000" > 發送 Fatal 資訊 </button><p> </body><script> document.write(new Array(100).join("<br>")) </script></html>

mxjLogger.js
/* 這是一個簡單的JavaScript的Logger工具，與Java的Log4j有些相似。分成5個層級，由低到高分別是：debug info warn error fatal 預設是顯示並且處於debug層級記錄啟用狀態快速鍵是 Alt + D ,調出這個工具作者：javamxj 日期：2006年8月8日版本：1.0 我的blog：http://blog.csdn.net/javamxj/ 我的email：javamxj@gmail.com*/var _logger = true; // 是否啟用輸出var log_area; // 記錄地區var n=0;// ------------------------------// 層級設定及其所對應輸出的顏色// ------------------------------var levelArray = ["DEBUG","INFO","WARN","ERROR","FATAL"]; var colorArray = ["green","blue","red","black","#800000"];var arr = new Array();for (var i=0; i<levelArray.length; i++){　arr[i] = "<OPTION>" + levelArray[i] + "</OPTION>";}// ------------------------------// 用document.write寫出相關的HTML語句// ------------------------------document.write('<div ID = "javamxj_log" style="position:fixed !important;position:absolute; top:310px;width:90%; z-index:2000;display:block;border-style:groove;border-width:thin;">' + '<div style="background-color:#EFE8E0">' + '<input type = "button" name = "clear" value = "清除" onclick = "$(\'status_area\').innerHTML=\'\'" /> '+ '<input type = "button" id="javamxj_run" name = "javamxj_run" value = "停止|隱藏記錄" onclick = "toggleLog()"/> '+ '層級: <select id="levelSelect" >' + arr.join() + "</select></div>" + '<div id = "status_area" name = "status_area" style="height:250px;overflow:auto;opacity:0.8; filter:alpha(opacity=80);"></div>' + '</div>');// ------------------------------// 滾動時固定在原位置// ------------------------------document.body.onscroll=function(){ javamxj_log.style.posTop=document.body.scrollTop+document.body.clientHeight-280}// ------------------------------// 增加快捷健 "Alt+D"// ------------------------------document.onkeydown = function(){ var accessElement = document.createElement('span') accessElement.innerHTML = '<button style="position:absolute;top:-100px" accesskey="d"></button>' document.body.appendChild(accessElement);}// ------------------------------// 借鑒 protype，將 document.getElementById() 封裝成 $() ,方便使用// ------------------------------function $(){ var elements=new Array(); for(var i=0;i<arguments.length;i++){ var element=arguments[i]; if(typeof element=='string') element=document.getElementById(element); if(arguments.length==1) return element; elements.push(element); } return elements; }// ------------------------------// 獲得目前時間// ------------------------------function getCurrentTime(){ var now=new Date(); var hours=now.getHours(); var minutes=now.getMinutes(); var seconds=now.getSeconds() var timeValue=""+((hours>12)?hours-12:hours); if(timeValue=="0")timeValue=12; timeValue+=((minutes<10)?":0":":")+minutes; timeValue+=((seconds<10)?":0":":")+seconds; timeValue+=(hours>=12)?" (下午)":" (上午)"; return timeValue; } // ------------------------------// 封裝5個不同層級的輸出方式// ------------------------------function debug(message) { logger(message, 0); }function info(message) { logger(message, 1); }function warn(message) { logger(message, 2); }function error(message) { logger(message, 3); }function fatal(message) { logger(message, 4); }// ------------------------------// 輸出記錄// ------------------------------function logger( message,num_level) { var color; var level; if (_logger) { color = colorArray[num_level]; level = levelArray[num_level]; display = (num_level >= $("levelSelect").selectedIndex ) ? "block" : "none" ; if(display == "block"){ n=n+1; } bg_Color = ((n % 2) ==0)? "#FFF" : "#F6F6F6"; $("status_area").innerHTML = '<div id=' + num_level + ' style="background-color:' + bg_Color + ';display:' + display + '"><strong style="COLOR: ' + color + '">' + level + ': ' + '</strong>' + getCurrentTime() + ": " + message + '</div>' + $("status_area").innerHTML; } }// ------------------------------// 改變記錄層級// ------------------------------function changeLevel(){ selectedLevel = $('levelSelect').selectedIndex; var m=0; var divs = $("status_area").getElementsByTagName("div"); for(i=0;i<divs.length;i++){ divs[i].style.display =(divs[i].id >= selectedLevel)? "block" : "none"; if(divs[i].style.display == "block"){ m=m+1; divs[i].style.backgroundColor =((m % 2) ==0) ? "#FFF" : "#F6F6F6"; } }}// ------------------------------// 改變選項組// ------------------------------function toggleLog() { var disp=$('status_area').style.display; if ( disp == 'none' ) { $('status_area').style.display = 'block'; $('javamxj_run').value = '停止 | 隱藏記錄'; _logger = true; } else { $('status_area').style.display = 'none'; $('javamxj_run').value= '顯示記錄'; _logger = false; }}function toggleDiv() { var e = $("javamxj_log"); if (e) { e.style.display = ((e.style.display != 'block') ? 'block' : 'none'); }}

效果如下：

存在的問題：在IE中使用時，要注意母體Html檔案引用的DOCTYPE聲明如果是：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">則在IE下它會隨捲軸滾動而消失

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More