JavaScript log operation object instance

使用 Now let's comprehensively use the knowledge learned to realize an instance of the JavaScript log operation object. What we need is these files:

mylog.js: The main role is to build mylogger constructor, add line, add nodes, and css control.

  LD.js: The main function is to formulate rules for scripts and strings, construct namespaces and retrieve objects based on Id and className.

Test.js: The main function is to add events to the form and test the availability of some functions in mylog.

Log.html: Used to display log objects.

The following is the code of each file:

test.js

[javascript] view plaincopyprint?//Add a load event to the window object

LD.addEvent(window,'load',function(){
LD.log .writeRaw('This is raw');

LD.log.writeRaw('This is bold!');

LD.log.header('With a header');

LD.log.write('write source:This is bold!');

for(i in document){
LD.log.write(i);
}
});
//Add a load event to the window object
LD.addEvent(window,'load',function(){
LD.log.writeRaw('This is raw');

LD.log.writeRaw ('This is bold!');

LD.log.header('With a header');

LD.log.write('write source:This is bold!');

for(i in document){
  LD.log.write(i);
}
} );myLog.js[javascript] view plaincopyprint?// JavaScript Document

//Constructor of myLogger
function myLogger(id){
id=id||"ICLogWindow";

//Reference to log form
var logWindow=null;
                    var createWindow=function(){       var browserWindowSize = LD.getBrowserWindowSize();       var top=(browserWindowSize.height-200)/2||0;          var left =(browserWindowSize.width-200)/2||0;

                                                                                                             //Add ID to proceed Logo                                                                                                                                                                 : top+'px';
            logWindow. style.left = left+'px';


logwindow.style.width = '200px';
logwindow.style.head = '200px'; ; O
logwindow.style.padding = '0'; 0 logwindow.style.margin = '0';
logwindow.style.border = '1px solid black'; Window. Style.ListStyle = 'None' ;
             logWindow.style.font='10px/10px Verdana, Tahoma, Sans';                                                                                                                                                                             ;

//To the log form Add a line in
this.writeRaw=function(message){
                                                          use using use using using using             out out       ‐           ‐         ‐                              
//Create li DOM node
var li=document.createElement('LI');

                                                      using using using using             through out using ‐ off off ‐ off ‐  ‐ ‐ ‐ ,
​0';
li.style.borderBottom='1px dotted black';
li.style.margin='0';
li.style.color='#000';

                                                                                      Verify message information                                                                                                                                       .
           li.appendChild(                                                                                                                                                                              document.create li.innerHTML!=undefined){
                                                                                                                                                           )                                                                        
//Declare privileged methods in the form of object literals窗 // Add a line to the log window and simply process it to the input content. == 0 ;
                                                                                                                                                                             return this.writeRaw(message.toString()) ;
                                                                                                                          
               message=message.replace(//g,">");
                                                                             ‐                                                           . background-color:black;font-weight:bold;padding:0px 5px;">'+message+'';
             return this.writeRaw(message);                                                                                                            background-color         background-color: black; ']['log'] = new myLogger();
//JavaScript Document

//Constructor of myLogger
function myLogger(id){
id=id||"ICLogWindow";

//Reference of log window
var logWindow=null;
//Create log window
var createWindow=function(){
  var browserWindowSize = LD.getBrowserWindowSize();
var top=(browserWindowSize.height-200) /2||0;
var left=(browserWindowSize.width-200)/2||0;

//Use UL
logWindow=document.createElement("UL");
//Add a dom under the document Object UL

//Add ID for identification
logWindow.setAttribute("id",id);

//Control CSS style on the form
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 Verdana, Tahoma, Sans';

//Add the form to the page
document.body.appendChild(logWindow);
}

//Add a line to the log form
this.writeRaw=function(message){
                                                                                                                                                             //                                                                                                     ;
}
//Create dom node of li
var li=document.createElement('LI');

//Control CSS style on 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 message Message

if(typeof message == 'undefined'){

              //Add text nodes in li.
li.appendChild(
document.createTextNode('Message is undefined')
));
}else if(typeof li.innerHTML!=undefined){
//This is another way of expression
li.innerHTML=message ;
}else{
li.appendChild(
document.createTextNode(message)
);
}
logWindow.appendChild(li);
return true;
};
}
//Declare privileged methods in the form of object literals
//Add a line to the log form and perform simple processing on the input content
myLogger.prototype={

write:function(message){
if(typeof message=='string' && message.length==0 ){
           return this.writeRaw('No information entered');
                                                                                                                                                                                                 ; ;
  }else{
      return this.writeRaw(typeof message);
    }
  }
//Convert the greater than and less than sign into HTML tags through regular expression
 message=message.replace(//g,">");
return this.writeRaw(message);
},
header:function(message){
message=''+message+'';
return this.writeRaw(message);
}
};
window['LD ']['log'] = new myLogger();LD.js[javascript] view plaincopyprint?// JavaScript Document
if(document.all && !document.getElementById){
document.getElementById=function(id){
return document.all[id];
}
}

if(!String.repeat){
String.prototype.repeat=function(l){
                                                                     }
}

if(!String.trim){
  String.prototype.trim=function(){
                               }

( Function () {
// Constructing the namespace
Window ['ld'] = {}; Parameters
                                                                                                                                                                                                                                                    
                                                                                                                                                                                                                          element = document.getElementById(element);
                                                                                                                             elements.push(element);
    }                                                                                                          using                                                elements. parent=parent || document; //Filter the tag and take out all the tag objects
      var allTags=(tag == "*" && parent.all) ? parent.all : parent.getElementsByTagName(tag);
    var matchingElements=new Array(); replace(/-/g, "\-");
      var regex=new   RegExp("(^|\s)"+className+ "(\s|$)");
              var element; . length;i++){
                                                      element=allTags[i];
                                                                                                                                                               
;               func.apply(obj,arguments);                                                    'Ld'] ['bindfunction'] = bindfunction;

Function GetBrowserwindowsize () {
var de = documentelement; In Window.innerWidth
|| (de && de.clientWidth)
                        || document.body.clientWidth), 
                    'heigth':( 
                        window.innerHeight 
                        || (de && de.clientHeight) 
                        || de && document.body.clientHeight) 
                } 
        }; 
        //注册本事件  
    window['LD']['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; 
        }; 
        //注册本事件  
    window['LD']['addEvent']=addEvent; 
     
})(); 
// JavaScript Document
if(document.all && !document.getElementById){
 document.getElementById=function(id){
  return document.all[id];
  }
 }

if(!String.repeat){
  String.prototype.repeat=function(l){
   return new Array(l+1).join(this);
   }
 }

if(!String.trim){
  String.prototype.trim=function(){
    return this.replace(/^s+|+$/g,'');
   }
 }

(function(){
//Construct the namespace
window['LD']={} ;

function $(){
var elements=new Array();
//arguments The parameter array of the current function. Parameters
for(var i=0;i var element=arguments[i];
if(typeof element=='string'){
element=document.getElementById(element);
}
if(arguments.length==1){
return element;
}
elements.push(element);
}
return elements;
}
//Register namespace
window['LD']['$ ']=$;

function getElementsByClassName(className,tag){
parent=parent || document;
if(!(parent=$(parent))) return false;


//var allTags=document.getElementsByTagName (tag);
//Filter tag and remove all tag objects
var allTags=(tag == "*" && parent.all) ? parent.all : parent.getElementsByTagName(tag);
var matchingElements =new Array();

className=className.replace(/-/g,"\-");
var regex=new RegExp("(^|\s)"+className+ "(\s|$)" );

var element;
for(var i=0;i element=allTags[i];
if(regex.test(element.className)){
matchingElements.push( element);
       }
                                                                                                                                                                element); ){
return function() {C func.apply (obj, arguments);
}}};
Window ['ld'] ['bindFunction'] = bindfunction; = document.docmeentelement;
Return {
'width':(
            window.innerWidth                                                                                                                                                                                    . clientHeight)
|| de && document.body.clientHeight)
}
};
//Register this event
window['LD']['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 this event
window['LD']['addEvent']=addEvent;

}) (); Running results:








Summary

This small example basically combines what we have learned before, including basic support, object-oriented, prototypes, object literals, this, scope chain and other knowledge Including all the points, it can be regarded as a summary of JavaScript learning.