还是本着学习的目的,实现一个自己的调试日志,界面很简单,就是将调试信息显示在页面的正中央,用一个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, ‘<‘).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); } };
6.测试一下,在一个空白html引入Lily.js, myLogger.js, 写入一些信息。