緣由
? 前段時間再看了一些javascript的學習資料,也寫的一些demo,在輸出的時候一般都用alert,但這個方法會打斷函數運行,用起來不是很好.還有就是console.log這個方法,這種方法原來一直以為只能在FireFox上面才能用,現在才發現主流瀏覽器都支持.但我的這個插件已經寫的差不多了,所以我還是把它寫出來,讓大家共同學習一下.
DOM結構
? 由于只是對結果的簡單輸出,所以我選擇了textarea存放.再給textarea加層div用于定位.同時加了4個控制按鈕(最小化,最大化,清空,關閉).
function createConsole() {//this:consoleClass的實例(這個也就是this用法的一個體現)var self = this;if (self.divConsoleContent != null && self.txtConsoleContent != null) {if (self.divConsoleContent.style["display"] == "none") {self.divConsoleContent.style["display"] = "block";setStyle(self.divConsoleContent.style, options.maxSizeCss);}return;}var body = document.getElementsByTagName("body")[0];var div = document.createElement("div");div.setAttribute("id", "divConsoleContent");setStyle(div.style, options.maxSizeCss);var txt = document.createElement("textarea");txt.setAttribute("id", "txtConsoleContent");setStyle(txt.style, options.txtCss);txt.setAttribute("readonly", "readonly");var btnMax = document.createElement("button");var btnMin = document.createElement("button");var btnClear = document.createElement("button");var btnHidden = document.createElement("button");setStyle(btnMax.style, options.buttonCss);setStyle(btnMin.style, options.buttonCss);setStyle(btnClear.style, options.buttonCss);setStyle(btnHidden.style, options.buttonCss);btnMax.innerHTML = "\u005b\u005b\u005d\u005d"; //[[]]btnMax.innerText = "\u005b\u005b\u005d\u005d";btnMin.innerHTML = "\u002d"; //-btnMin.innerText = "\u002d";btnClear.innerHTML = "\u007c"; //|btnClear.innerText = "\u007c";btnHidden.innerHTML = "\u00d7"; //xbtnHidden.innerText = "\u00d7";btnMin.onclick = function () {setStyle(self.divConsoleContent.style, options.minSizeCss);};btnMax.onclick = function () {setStyle(self.divConsoleContent.style, options.maxSizeCss);}btnClear.onclick = function () {options.currentText = "";self.txtConsoleContent.value = "";}btnHidden.onclick = function () {// setStyle(self.divConsoleContent.style, { display: "none" });}document.body.appendChild(div);div.appendChild(btnMin);div.appendChild(btnMax);div.appendChild(btnClear);div.appendChild(btnHidden);div.appendChild(txt);self.divConsoleContent = div;self.txtConsoleContent = txt;};
數據處理
? 數據處理是我只是簡單的進行了字符串拼接,并沒有對數據顯示格式還轉義字符進行處理,對于這些大家可以用JSON2進行處理,下面的例子用也有用到.
//時間格式的處理借鑒了json2function f(n) {// Format integers to have at least two digits.return n < 10 ? '0' + n : n;}function formatDate(val) {return isFinite(val.valueOf())? val.getUTCFullYear() + '-' +f(val.getUTCMonth() + 1) + '-' +f(val.getUTCDate()) + 'T' +f(val.getUTCHours()) + ':' +f(val.getUTCMinutes()) + ':' +f(val.getUTCSeconds()) + 'Z': null;}//基本數據類型function formatMetaData(val) {var res;if (val instanceof Date) {res = formatDate(val)if (res === null){ res = "null"; }}else if (typeof (val) === "undefined") {res = "undefined";}else if (val === null) {res = "null";}else if (typeof (val) === "string") {res = '"' + val + '"';}else {res = val.valueOf();}return res;}//Objectfunction formatObj(obj) {var res = "{";if (obj instanceof Date) {obj = formatDate(obj);if (obj != null) {return obj;}}if (obj === null) {return "null";}for (var p in obj) {res = res + "\"" + p + "\":" + format(obj[p], false) + ",";}res = res.substr(0, res.length - 1);res = res + "}";return res;}//所有數據類型處理的入口(blnImport是否是入口)function format(args, blnImport) {var res = "";if (blnImport == true) {if (args.length == 0)return "";else if (args.length == 1) {args = args[0];}}if (args instanceof Array) {var arr = [];for (var i = 0; i < args.length; i++) {arr.push(format(args[i], false));}res = "[" + arr.join(",") + "]";}else if (typeof (args) === "object") {res = formatObj(args);}else {res = formatMetaData(args);}return res;}
調用
<head><title>Barlow Console</title><script src="barlow.console.js" type="text/javascript"></script><script src="json2.js" type="text/javascript"></script><script type="text/javascript" charset="uft-8">function testPrint() {//基本數據類型var a = "test";var e;barlow.console.printline(e);barlow.console.printline(null);barlow.console.printline(1);barlow.console.printline(11.1);barlow.console.printline(true);barlow.console.printline(a);barlow.console.printline(1 / 0);barlow.console.printline(new Date())barlow.console.printline("----------------")//數組 barlow.console.printline([a, a]);//Object barlow.console.printline({ "a": 1, "b": { "a": "abcfaa" }, "bac": { a: [1, 2, 3, 4]} });//JSON2 barlow.console.printline("JSON2");barlow.console.printline(JSON.stringify({ "a": 1, "b": { "a": "abcfaa" }, "bac": { a: [1, 2, 3, 4]} }));barlow.console.printline("JSON2");barlow.console.printline(JSON.stringify({ "a": 1, "b": { "a": "abcfaa" }, "bac": { a: [1, 2, 3, 4]} }, {},4));}</script> </head> <body><input type="button" value="Test" onclick="testPrint()" /><div style="height: 2000px;"></div> </body> </html>
結果為
? 這個js插件目前只支持ie8及以上,但我覺得已經夠用了,怎么說微軟今年也不支持xp了,所以這個插件我覺得還是可以作為學習js或者調試的時候使用.
寫的后面的話
? 在園子里逛了一年多了,學了多少東西.同時看見各大位大牛寫的文章那是相當的佩服.在這我也小露一手,同時也希望往后能夠堅持下來,將自己的學習的東西還有一些心得能夠用自己的文字記錄下來.
下載
![[Git高級教程(二)] 遠程倉庫版本回退方法](http://pic.xiahunao.cn/[Git高級教程(二)] 遠程倉庫版本回退方法)
![[轉載]基于Aaf的數據拆分](http://pic.xiahunao.cn/[轉載]基于Aaf的數據拆分)
)