【写一个自己的js库】 2.实现自己的调试日志

还是本着学习的目的，实现一个自己的调试日志，界面很简单，就是将调试信息显示在页面的正*，用一个ul包裹，每条信息就是一个li。

1.新建一个myLogger.js文件，将需要的方法声明一下。其中var声明的是私有成员，可见范围只在构造函数中，每个实例都会保存一套他们的副本。this声明的是特权方法，new的时候会把它绑定到实例上，实例可以直接调用它。在prototype上声明的就是公有方法了，每个实例都可以访问它。最后将一个实例赋值给Lily这个库，Lily就有自己的日志插件了。

function myLogger(id){
    id = id || 'LilyLogWindow';
    var logWindow = null;
    var createWindow = function (){};
    this.writeRaw = function (){};
}

myLogger.prototype = {
    write : function (message){},
    header: function (message){}
};

if(!window.Lily) { window.Lily = {}; }
window['Lily']['log'] = new myLogger();

2.先给Lily补充一个方法，因为要显示在页面的*，所以要获得浏览器窗口的高度和宽度，所以加个getBrowserWindowSize。window.innerWidth和window.innerHeight IE8及之前的版本不支持，document.documentElement在IE6的怪异模式下获取的值不正确。

function getBrowserWindowSize(){
        var de = document.documentElement;
        return {
            width : window.innerWidth || (de && de.clientWidth) || (document.body.clientWidth),
            height: window.innerHeight || (de && de.clientHeight) || (document.body.clientHeight)
        };
    }
    Lily['getBrowserWindowSize'] = getBrowserWindowSize;

3.createWindow。这里就设置ul是固定的宽高，这里没用外链css，是因为如果想调试还要加个css，比较麻烦，所以就都在js里写好了。

var createWindow = function (){
        var windowSize = Lily.getBrowserWindowSize();
        var top = (windowSize.width - 200)/2 || 0;
        var left = (windowSize.height - 200)/2 || 0;

        logWindow = document.createElement("ul");
        logWindow.setAttribute("id", id);

        logWindow.style.position = "absolute";
        logWindow.style.left = left + "px";
        logWindow.style.top = top + "px";

        logWindow.style.width = "200px";
        logWindow.style.height = "200px";
        logWindow.style.overflow = "scroll";

        logWindow.style.border = "1px solid #f1f1f1";
        logWindow.style.padding = "0";
        logWindow.style.margin = "0";
        logWindow.style.listStyle = "none";

        document.body.appendChild(logWindow);
    };

4.writeRaw，当调用这个方法时，才检查logWindow是否创建，如果没创建，就调用createWindow，注意不要加this，因为createWindow是私有变量，myLogger的实例没有这个方法，而根据闭包，writeRaw可以访问到createWindow。虽然各浏览器都支持innerHTML，但是它不属于w3c规范，所以在用之前要进行一下能力检测，以防以后的浏览器不支持。

this.writeRaw = function (message){
        if(!logWindow) createWindow();
        var li = document.createElement("li");

        li.style.padding = "2px";
        li.style.margin = "0";
        li.style.borderBottom = "1px dotted #f0f0f0";

        if(typeof message == "undefined"){
            li.appendChild(document.createTextNode("message is undefined"));
        }else if(typeof li.innerHTML != "undefined"){
            li.innerHTML = message;
        }else{
            li.appendChild(document.createTextNode(message));
        }

        logWindow.appendChild(li);
        return true;
    };

5.write和header。这里write要处理一下信息，去掉html格式，不是string类型的调用toString或者显示它的类型。header就是将message包裹一下。

myLogger.prototype = {
    write : function (message){
        if(typeof message != 'string'){
            if(message.toString){
                return this.writeRaw(message.toString());
            }else{
                return this.writeRaw(typeof message);
            }
        }

        if(typeof message == 'string' && message.length == 0){
            return this.writeRaw("Lily log : message is null");
        }

        message = message.replace(/</g, '&lt;').replace(/>/g, "&gt;");
        return this.writeRaw(message);

    },
    header: function (message){
        message = '<span style="color:#fff;background-color:#000;font-weight:bold;padding:0 5px">' + message + '</span>';
        return this.writeRaw(message);
    }
};

6.测试一下，在一个空白html引入Lily.js, myLogger.js, 写入一些信息。