【写一个自己的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里写好了。

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, '<').replace(/>/g, ">");
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);
}
};

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