"Write a JS library of your own" 2. Implement your own debug logs

Or the purpose of learning, to achieve a self-debug log, the interface is very simple, is to display debugging information in the center of the page, with a UL package, each message is a li.

1. Create a new Mylogger.js file and declare the method you want. where Var declares a private member, the visible range is only in the constructor, and each instance saves a set of their replicas. This declares the privileged method, which is bound to the instance when new, and the instance can call it directly. The public method is declared on prototype, and each instance can access it. Finally, an instance is assigned to Lily's library, and Lily has her own log plugin.

functionMyLogger (ID) {ID= ID | | ' Lilylogwindow '; varLogwindow =NULL; varCreateWindow =function (){};  This. WriteRaw =function (){};} Mylogger.prototype={write:function(message) {}, Header:function(Message) {}};if(!window. Lily) {window. Lily = {}; } window[' Lily ' [' log '] =NewMyLogger ();

2. First add a method to Lily, because to display in the center of the page, so to get the height and width of the browser window, so add a getbrowserwindowsize. Window.innerwidth and Window.innerheight IE8 and previous versions are not supported, document.documentelement the value obtained in IE6 's quirks mode is incorrect.

function getbrowserwindowsize () {        var de = document.documentelement;         return  {            || (de && de.clientwidth) | | (document.body.clientWidth),            | | (de && de.clientheight) | | (document.body.clientHeight)        };    }    lily[' getbrowserwindowsize '] = getbrowserwindowsize;

3.createWindow. Here to set the UL is fixed wide-height, there is no outside the chain of CSS, is because if you want to debug also add a CSS, more trouble, so it is all in the JS write well.

varCreateWindow =function (){        varWindowSize =lily.getbrowserwindowsize (); vartop = (windowsize.width-200)/2 | | 0;varleft = (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); };

View Code

4.writeRaw, when calling this method, check whether Logwindow is created, if not created, call CreateWindow, pay attention to not add this, because CreateWindow is a private variable, mylogger instance does not have this method, Depending on the closure, WriteRaw can access the CreateWindow. Although each browser supports innerHTML, it does not belong to the web, so the ability to test before use in order to prevent future browsers do not support.

 This. WriteRaw =function(message) {if(!Logwindow) CreateWindow (); varLi = document.createelement ("li"); Li.style.padding= "2px"; Li.style.margin= "0"; Li.style.borderBottom= "1px dotted #f0f0f0"; if(typeofmessage = = "undefined") {li.appendchild (document.createTextNode ("Message is undefined")); }Else if(typeofLi.innerhtml! = "undefined") {li.innerhtml=message; }Else{li.appendchild (document.createtextnode (message));        } logwindow.appendchild (LI); return true; };

View Code

5.write and header. Write here to process the information, remove the HTML format, not the string type of call ToString or display its type. The header is to wrap the message.

Mylogger.prototype ={write:function(message) {if(typeofMessage! = ' String '){            if(message.tostring) {return  This. WriteRaw (Message.tostring ()); }Else{                return  This. WriteRaw (typeofmessage); }        }        if(typeofMessage = = ' 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); }};

View Code

6. Test, in a blank HTML introduced lily.js, Mylogger.js, write some information.

"Write a JS library of your own" 2. Implement your own debug logs