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"; //x
            btnHidden.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进行处理,下面的例子用也有用到.

//时间格式的处理借鉴了json2
        function 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;
        }
        //Object
        function 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或者调试的时候使用.

写的后面的话

在园子里逛了一年多了,学了多少东西.同时看见各大位大牛写的文章那是相当的佩服.在这我也小露一手,同时也希望往后能够坚持下来,将自己的学习的东西还有一些心得能够用自己的文字记录下来.

下载