.

 


(function() {
    //常量
    var SPACE = " ",
        EMPTY = "";
    //log使用的可配置信息
    var config = {
        lock: false,
        //true:使用pre来存放显示内容,不默认去除空格、换行
        codeStyle: false,
        //log的外部容器选项[html element],没啥效果,本来就是fix
        globalBody: document.body,
        //使用系统的debug bar
        useSysDebugBar: false
    }
    //设置运行参数
    log.setConfig = function(_config) {
        if (!_config) return;
        for (var i in _config) {
            config[i] = _config[i];
        }
    }
    //初始化运行参数
    log.setConfig(config);
    function log(msg) {
        try {
            //合并log参数信息
            msg = [].join.call(arguments, SPACE);
            if (config.lock) return;
            //ie下按f12后,console会作为有效对象
            if (config.useSysDebugBar && window.console) {
                window.console.log(msg)
            } else {
                var guid = window.guid;
                if (!guid) { guid = window.guid = (Math.floor(Math.random() * 1E8) + 1); }
                var container = document.getElementById('log_' + guid),
                logContent = document.getElementById('log_content_' + guid);
                var styleid = "log_style_" + guid;
                if (!container) {
                    //container
                    container = document.createElement('div');
                    container.id = 'log_' + guid;
                    //container.style.cssText = "position:fixed;_position:absolute;left:0px;bottom:0px;padding-bottom:0px;height:auto;border:none;background:#eee;width:100%;"; //?fixed在ie6不行,height:276px;
                    //foot div 使log container不影响页面所有内容的可见,?在调节container的高度时,该foot div高度也要做相应调整
                    /*var footHeightDiv = document.createElement('div');
                    footHeightDiv.style.height = "280px";
                    document.body.appendChild(footHeightDiv);*/
                    //resize height
                    var resizeH = document.createElement('div');
                    container.appendChild(resizeH);
                    resizeH.style.cssText = "width:auto;height:3px;cursor:s-resize;border:none";
                    resizeH.onmousedown = function(e) {
                        e = e || window.event;
                        resizeH.resizeFlag = true;
                        resizeH.y = e.clientY; //getCoords(resizeH).top;
                        logContent.transHeight = logContent.offsetHeight;
                    };
                    document.onmousemove = function(e) {
                        if (resizeH.resizeFlag) {
                            e = e || window.event;
                            ! +"\v1" ? document.selection.empty() : window.getSelection().removeAllRanges();
                            var h = logContent.transHeight - (e.clientY - resizeH.y);
                            //赋值height小于0时,se360报错
                            h = h >= 0 ? h : 0;
                            logContent.style.height = h + "px";
                        }
                    };
                    document.onmouseup = function() {
                        resizeH.resizeFlag = false;
                    };
                    //log bar
                    var logBar = document.createElement('div');
                    logBar.id = "log_bar_" + guid;
                    container.appendChild(logBar);
                    //logBar.style.cssText = "margin-top:0px;border:none;border-top:1px solid #888;border-bottom:1px solid #888; background:#eee;width:auto;height:30px;";
                    //log content
                    logContent = document.createElement('div');
                    logContent.id = 'log_content_' + guid;
                    //logContent.style.cssText = "border:none;height:240px;overflow:auto;width:auto;"; //height:240px;
                    container.appendChild(logContent);
                    if (!log.styleHash) {
                        var styleHash = {};
                        styleHash["#" + container.id] = "position:fixed;_position:absolute;left:0px;bottom:0px;padding-bottom:0px;height:auto;border:none;background:#eee;width:100%;";
                        styleHash["#" + logBar.id] = "margin-top:0px;border:none;border-top:1px solid #888;border-bottom:1px solid #888;background:#eee;width:auto;height:30px;";
                        styleHash["#" + logContent.id] = "border:none;height:240px;overflow:auto;width:auto;"; //height:240px;
                        //添加logItem 样式
                        styleHash["#" + container.id + " .log_item"] = "border:none;font-size:12px;line-height:20px;width:auto;height:auto;margin:0; padding-left:12px;color:#000; border-bottom:1px solid #bbb;background:#fff;";
                        log.styleHash = styleHash;
                    }
                    //console.log(111222);
                    //完成的container添加到页面dom树中,页面body未构建完成时添加会内存溢出
                    //?缓存log msg等待body可以后再添加,opera下,会很久未构造成功document.body
                    var globalBody = config.globalBody || document.body;
                    if (!globalBody) {// || typeof setCss == "undefined"
                        if (!log.data) log.data = [];
                        log.data.push(msg);
                        return;
                    }
                    /** setCss
                    * 异步加载的时候(同步时,页面构建完成后才开始执行js)需要dom ready 才能进行setCss判断,否则stack overflow
                    * 同步时,如果未完成dom ready 也会stack overflow 需要确认dom ready
                    * try, typeof xx==undefined
                    */
                    if (typeof setCss == "undefined") {
                        globalBody && globalBody.appendChild(container);
                    } else {
                        setCss(log.styleHash, styleid);
                        log.styleHash = null;
                        globalBody && globalBody.appendChild(container);
                    }
                    //animate
                    logContent.style.height = "0px";
                    var _interval = setInterval(function() {
                        if (parseInt(logContent.style.height, 10) < 240) {
                            logContent.style.height = parseInt(logContent.style.height, 10) + 10 + "px";
                        } else {
                            logContent.style.height = "240px";
                            clearInterval(_interval);
                        }
                    }, 20);
                }
                //setCss if has not
                if (log.styleHash && typeof setCss != "undefined") {
                    setCss(log.styleHash, styleid);
                    log.styleHash = null;
                }
                /**log item
                * pre中内容不会省略空格、换行等
                */
                if (!log.data) log.data = [];
                log.data.push(msg);
                var len = log.data.length;
                for (var i = 0; i < len; i++) {
                    var logItem = document.createElement(config.codeStyle ? 'pre' : 'div'); //pre、div
                    logItem.className = "log_item";
                    //logItem.style.cssText = "border:none;font-size:12px;line-height:20px;width:auto;height:auto;margin:0; padding-left:12px;color:#000; border-bottom:1px solid #bbb;background:#fff;";
                    //确保null等在chrome下可显示出来,加visibility防止错误信息为空字符不显示改行
                    logItem.innerHTML = log.data.shift() + '<span style="visibility:hidden;">""</span>';
                    logContent.appendChild(logItem);
                }
            }
        } catch (e) {
            log("<span style='color:red;'> Log Error:</span>" + e.message);
            //alert("log error:" + e.message); 
        }
    }
    //添加对对象属性的log支持
    var logobj = function(data, prefix, appendprefix, i) {
        i = i || 0;
        prefix = prefix || "####";
        appendprefix = appendprefix || "####";
        if (typeof data == "object") {
            for (var k in data) {
                log(i + appendprefix + k + "==>" + data[k]);
                if (typeof data[k] == "object") {
                    arguments.callee(data[k], prefix, prefix + appendprefix, i + 1);
                }
            }
        } else {
            log(data);
        }
    }
function setCss(hash, styleNodeId) {
    var _styleNode = document.getElementById(styleNodeId),
                    _sheet = _styleNode ? (_styleNode.sheet || _styleNode.styleSheet) : null,
                    _createStyleSheet = (function() {
                        function createStyleSheet(__sheet__) {
                            var sheet = null;
                            if (!__sheet__) {
                                var element = document.createElement('style');
                                element.type = 'text/css';
                                element.id = styleNodeId; //id
                                document.getElementsByTagName('head')[0].appendChild(element);
                                sheet = element.sheet || element.styleSheet;
                            } else {
                                sheet = __sheet__;
                            }
                            if (typeof sheet.addRule === 'undefined') {//ff
                                sheet.addRule = function(selectorText, cssText, index) {
                                    if (typeof index === 'undefined')
                                        index = this.cssRules.length;
                                    this.insertRule(selectorText + ' {' + cssText + '}', index);
                                };
                            }
                            return sheet;
                        }
                        return createStyleSheet;
                    })();
    if (_sheet && _sheet.memory) {
        for (var key in hash) {
            if (!_styleNode.memory.exists(key, hash[key])) {
                _styleNode.memory.set(key, hash[key]);
                _sheet.addRule(key, hash[key]);
            }
        }
    } else {
        if (_sheet) {
            _sheet = _createStyleSheet(_sheet);
        } else {
            _sheet = _createStyleSheet();
        }
        _styleNode = _sheet.ownerNode || _sheet.owningElement;
        var memory = function() {
            var keys = [], values = [], size = 0;
            return {
                get: function(k) {
                    var results = [];
                    for (var i = 0, l = keys.length; i < l; i++) {
                        if (keys[i] == k) {
                            results.push(values[i])
                        }
                    }
                    return results;
                },
                exists: function(k, v) {
                    var vs = this.get(k);
                    for (var i = 0, l = vs.length; i < l; i++) {
                        if (vs[i] == v)
                            return true;
                    }
                    return false;
                },
                set: function(k, v) {
                    keys.push(k);
                    values.push(v);
                    size++;
                },
                length: function() {
                    return size;
                }
            }
        }
        _styleNode.memory = memory();
        for (var key in hash) {
            _styleNode.memory.set(key, hash[key]);
            _sheet.addRule(key, hash[key]);
        }
    }
}
    window.log = log;
    window.logobj=window.logObject = logobj;
})();

 

 

posted on 2012-05-17 18:47  LcKey  阅读(467)  评论(0编辑  收藏  举报