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

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.