Javascript object-oriented instance -- create a log debugging object to debug the alert function.

According to the title, this blog article introduces this small example. The following blog summarizes JS Object-Oriented Knowledge.

 

The purpose of this small example is to understand JS Object-Oriented Knowledge. Take an example and try it. Then compare it with the system summary. This piece of knowledge is not very effective when watching videos. Many of them are in the fog.

 

In this example, it feels awkward. Because the Javascript language does not provide smart prompts in most cases. In addition, the firebug debugging tool is not used very well and is still in the adaptation period. The error console information is in English and cannot be found in a timely and accurate manner.

 

In some cases, you may not be able to find out the wrong code after debugging for half a day. This is really a feeling of opening your eyes. It seems that it takes some time to practice JavaScript.

 

Let's look at the example below:

 

1. We need to create the following three JS files and one HTML file.

 

2. Explain the above four files respectively:

1. IC. JS is our own JavaScript library. In this example, we need to add two methods:

 

Function getbrowserwindowsize () {var demo-document.doc umentelement; return {'width' :( window. innerwidth | (De & de. clientwidth) | document. body. clientwidth), 'heigth' :( window. innerheight | (De & de. clientheight) | de & document. body. clientheight) }}; // register the event window ['ic '] ['getbrowserwindowsize'] = getbrowserwindowsize; function addevent (node, type, listener) {If (! (Node = $ (node) return false; If (node. addeventlistener) {node. addeventlistener (type, listener, false); Return true;} else if (node. attachevent) {node ['E' + Type + listener] = listener; node [type + listener] = function () {node ['E' + Type + listener] (window. event);} node. attachevent ('on' + type, node [type + listener]); Return true;} return false ;}; // register the event window ['ic'] ['addevent'] = addevent;

 

 

 

2. mylog. JS is the core of this example. The mylogger function contains constructor, createwindow function, and writeraw function.

 

The createwindow function is used to create a form.

 

The writeraw function is used to add a record to the created form.

 

The mylogger function still contains the write and header special functions. The Write function is used to convert a regular expression from a greater than sign to an HTML Tag. the header function is used to add a title to the log form.

 

// JavaScript document // mylogger's constructor function mylogger (ID) {id = ID | "iclogwindow"; // reference of the log form var logwindow = NULL; // create the log form var createwindow = function () {var browserwindowsize = IC. getbrowserwindowsize (); var Top = (browserwindowsize. height-200)/2 | 0; var left = (browserwindowsize. width-200)/2 | 0; // use ullogwindow = document. createelement ("Ul"); // Add a DOM object ul under document // Add an ID to identify logwindow. setattribute ("ID", ID); // css sample for the form Type Control logwindow. style. position = 'absolute '; logwindow. style. top = Top + 'px '; logwindow. style. left = left + 'px '; logwindow. style. width = '200px '; logwindow. style. height = '200px '; logwindow. style. overflow = 'scroll '; logwindow. style. padding = '0'; logwindow. style. margin = '0'; logwindow. style. border = '1px solid black'; logwindow. style. backgroundcolor = 'white'; logwindow. style. liststyle = 'none'; logwindow. style. font = '10px/10px Verda Na, tahoma, SANS; // Add the form to the document on the page. body. appendchild (logwindow);} // Add a line to the log form this. writeraw = function (Message) {// if the initial form does not exist, the log form if (! Logwindow) {createwindow ();} // create the DOM node var li = Document of Li. createelement ('lil'); // controls the CSS style of the form Li. style. padding = '2px '; Li. style. border = '0'; Li. style. borderbottom = '1px dotted black'; Li. style. margin = '0'; Li. style. color = '# 000'; // verify the message if (typeof message = 'undefined') {// Add a text node in Li. Li. appendchild (document. createtextnode ('message is undefined');} else if (typeof Li. innerhtml! = Undefined) {// This is another way to express Li. innerhtml = message;} else {Li. appendchild (document. createtextnode (Message);} logwindow. appendchild (LI); Return true ;};// declares the privileged method using the object literal quantity // adds a row to the log form, and simply processes the input content with mylogger. prototype = {write: function (Message) {If (typeof message = 'string' & message. length = 0) {return this. writeraw ('no input information');} If (typeof message! = 'String') {If (message. tostring) {return this. writeraw (message. tostring ();} else {return this. writeraw (typeof message) ;}// convert a regular expression that is greater than or less than a sign to HTML mark message = message. replace (/</g, "<"). replace (/>/g, ">"); return this. writeraw (Message) ;}, header: function (Message) {message = '<span style = "color: White; Background-color: black; font-weight: bold; padding: 0px 5px; "> '+ message +' </span> '; return this. writeraw (Message) ;}}; window ['ic'] ['log'] = new mylogger ();

 

3. The main function of code in test. JS is to add a load event to the window object. Then test the correctness of the methods in mylog. js respectively:

 

// JavaScript document // Add a load event IC to the window object. addevent (window, 'load', function () {IC. log. writeraw ('this is raw'); IC. log. writeraw ('<strong> This is bold! </Strong> '); IC. log. header ('with a header'); IC. log. Write ('write Source: <strong> This is bold! </Strong> '); For (I in document) {IC. log. Write (I );}});

 

 

4. The role of the HTML page is to add an application and display the result:

 

<Head> <meta http-equiv = "Content-Type" content = "text/html; charset = gb2312 "/> <title> untitled document </title> 
 
 
3. Display Results:
 

 
Iv. Summary:
We can write the main code in this example in our own JavaScript library, and use this method instead of the alert method to achieve good display effect (for example ). At the same time, we are also familiar with this function, and it is very elegant in writing, it will gradually become our own thing.
 
 
Source code download: http://download.csdn.net/detail/liu765023051/4365978