続・consoleを自作する - みかづきブログその3

jQueryに依存しないバージョンをつくってみました。

前回までは、

$console.log();

$console.dir();

という名前だったのですが、jQueryを使っていないのに$をつかっちゃまずかろうと思い、

_console.log();

_console.dir();

としようと思いました。
んが。なんだかグローバル感が無くなってしまったので、 log と dir を併せて、

trace();

と名付けました。
引数を見て内部で log と dir を使い分けています。

JavaScript

(function(win, doc) {
    
    "use strict";

    var trace = doc.createElement("div"),
        inner = doc.createElement("div"),
        traceStyle = [
            "display: block;",
            "position: fixed;",
            "bottom: 0;",
            "left: 0;",
            "border: none;",
            "width: 100%;",
            "height: 100px;",
            "color: #fff;",
            "font-size: 10px;",
            "background: rgba(0, 0, 0, .8);",
            "overflow: scroll;",
            "z-index: 9999;",
            "-webkit-overflow-scrolling: touch;"
        ].join(""),
        innerStyle = [
            "padding: 5px;"
        ].join(""),
        _setText = function() {};
    
    _init();
    
    function _init() {
        _setText = _buildSetText();
        trace.id = "trace";
        trace.style.cssText = traceStyle;
        inner.id = "trace-inner";
        inner.style.cssText = innerStyle;
        
        trace.appendChild(inner);
        doc.body.appendChild(trace);
    }
    
    function _buildSetText() {
        var dummy = doc.createElement("p");

        if (typeof dummy.innerText !== "string") {
            return function(elm, txt) {
                elm.textContent = txt;
            };
        }
        
        return function(elm, txt) {
            elm.innerText = txt;
        };
    }
    
    function log(txt) {
        var p = doc.createElement("p");
        
        p.style.margin = 0;
        
        _setText(p, txt);
        
        inner.appendChild(p);
        trace.scrollTop = trace.scrollHeight;
    }
    
    function dir(obj, opt_parent) {
        var parents = opt_parent ? opt_parent + "." : "",
            keys, length, i;

        if (typeof obj === "object") {
            keys = Object.keys(obj);
            length = keys.length;

            if (length) {
            
                for (i = 0; i < length; i++) {
                    if (typeof obj[keys[i]] === "object") {
                        dir(obj[keys[i]], parents + keys[i]);
                    } else {
                        log(parents + keys[i] + ": " + obj[keys[i]]);
                    }
                }
            } else {
                log(parents + {});
            }
        } else {
            log(parents + obj);
        }
    }
    
    win.trace = dir;

})(this, document);

ついでにstyleもjsで指定するように変更したのでCSSは必要無くなりました。

つかいかた

trace("hey!");
trace({
    a: 0,
    b: {
        c: 1,
        d: 2
    }
});

DEMO

これでいちいちjQueryとCSSを読み込まなくてOKになりました。
今回は以上です。