【写一个自己的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, 写入一些信息。

巴特西

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

最新文章

热门文章