Javascript 自定义输出

缘由

前段时间再看了一些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>