JavaScript日志操作對象實例

現在我們來綜合使用一下所學知識，來實現一個JavaScript日志操作對象的實例，我們需要的是這幾個文件：

        myLog.js:主要作用是構建myLogger構造函數、添加行、添加節點、css控制。

        LD.js:主要作用是對腳本和字符串制定規則、構造命名空間和根據Id、className取出對象。

        test.js:主要作用是對窗體添加事件，並測試mylog中部分函數的可用性。

        log.html:用於顯示日志對象。

以下是各個文件代碼：

test.js

[javascript] view plaincopyprint?//向window對象裡面添加一個load事件  
LD.addEvent(window,'load',function(){ 
    LD.log.writeRaw('This is raw'); 
 
    LD.log.writeRaw('<strong>This is bold!</strong>'); 
 
    LD.log.header('With a header'); 
 
    LD.log.write('write source:<strong>This is bold!</strong>'); 
     
    for(i in document){ 
            LD.log.write(i); 
        } 
}); 
//向window對象裡面添加一個load事件
LD.addEvent(window,'load',function(){
 LD.log.writeRaw('This is raw');

 LD.log.writeRaw('<strong>This is bold!</strong>');

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

 LD.log.write('write source:<strong>This is bold!</strong>');
 
 for(i in document){
         LD.log.write(i);
  }
});myLog.js[javascript] view plaincopyprint?// JavaScript Document  
 
//myLogger的構造函數  
function myLogger(id){ 
    id=id||"ICLogWindow"; 
 
    //日志窗體的引用  
    var logWindow=null; 
    //創建日志窗體  
    var createWindow=function(){ 
            var browserWindowSize = LD.getBrowserWindowSize(); 
            var top=(browserWindowSize.height-200)/2||0; 
            var left=(browserWindowSize.width-200)/2||0; 
 
            //使用UL  
            logWindow=document.createElement("UL"); 
            //在document下添加一個dom對象UL  
 
            //添加ID進行標識        
            logWindow.setAttribute("id",id); 
 
            //對窗體進行css樣式控制  
            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'; 
 
            //將窗體添加到頁面上面  
            document.body.appendChild(logWindow); 
        } 
 
//向日志窗體中添加一行  
    this.writeRaw=function(message){ 
            //如果初始窗體是不存在的，則生成日志窗體  
        if(!logWindow){ 
                createWindow(); 
            } 
//創建li的dom節點  
        var li=document.createElement('LI'); 
 
        //對窗體進行css樣式控制  
         
        li.style.padding='2px'; 
        li.style.border='0'; 
        li.style.borderBottom='1px dotted black'; 
        li.style.margin='0'; 
        li.style.color='#000'; 
 
        //      驗證message信息  
        if(typeof message == 'undefined'){ 
 
                //在li裡面添加文本節點。  
                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; 
        }; 
} 
//對象字面量的方式聲明特權方法  
//向日志窗體中添加一行，向輸入的內容進行簡單處理  
myLogger.prototype={ 
     
    write:function(message){ 
        if(typeof message=='string' && message.length==0 ){ 
                return this.writeRaw('沒有輸入信息'); 
             
        } 
        if(typeof message !='string'){ 
                if(message.toString){ 
                    return this.writeRaw(message.toString()); 
                }else{ 
                    return this.writeRaw(typeof message); 
                } 
            } 
//將大於號小於號進行正則轉換成HTML標記  
        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['LD']['log'] = new myLogger(); 
// JavaScript Document

//myLogger的構造函數
function myLogger(id){
 id=id||"ICLogWindow";

 //日志窗體的引用
 var logWindow=null;
 //創建日志窗體
 var createWindow=function(){
         var browserWindowSize = LD.getBrowserWindowSize();
   var top=(browserWindowSize.height-200)/2||0;
   var left=(browserWindowSize.width-200)/2||0;

   //使用UL
   logWindow=document.createElement("UL");
   //在document下添加一個dom對象UL

   //添加ID進行標識     
   logWindow.setAttribute("id",id);

   //對窗體進行css樣式控制
   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';

   //將窗體添加到頁面上面
   document.body.appendChild(logWindow);
  }

//向日志窗體中添加一行
 this.writeRaw=function(message){
         //如果初始窗體是不存在的，則生成日志窗體
  if(!logWindow){
    createWindow();
   }
//創建li的dom節點
  var li=document.createElement('LI');

  //對窗體進行css樣式控制
  
  li.style.padding='2px';
  li.style.border='0';
  li.style.borderBottom='1px dotted black';
  li.style.margin='0';
  li.style.color='#000';

  //  驗證message信息
  if(typeof message == 'undefined'){

          //在li裡面添加文本節點。
    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;
  };
}
//對象字面量的方式聲明特權方法
//向日志窗體中添加一行，向輸入的內容進行簡單處理
myLogger.prototype={
 
 write:function(message){
  if(typeof message=='string' && message.length==0 ){
          return this.writeRaw('沒有輸入信息');
   
  }
  if(typeof message !='string'){
    if(message.toString){
     return this.writeRaw(message.toString());
    }else{
     return this.writeRaw(typeof message);
    }
   }
//將大於號小於號進行正則轉換成HTML標記
  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['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){ 
            return new Array(l+1).join(this); 
            } 
    } 
 
if(!String.trim){ 
        String.prototype.trim=function(){ 
                return this.replace(/^\s+|\+$/g,''); 
            }  
    } 
 
(function(){ 
    //構造命名空間  
    window['LD']={} ;   
     
    function $(){ 
        var elements=new Array(); 
        //arguments當前函數的參數數組。參數  
        for(var i=0;i<arguments.length;i++){ 
                var element=arguments[i]; 
                 
                if(typeof element=='string'){ 
                        element=document.getElementById(element); 
                    } 
                if(arguments.length==1){ 
                    return element; 
                    } 
                elements.push(element); 
        } 
        return elements; 
    } 
    //註冊命名空間  
    window['LD']['$']=$; 
     
    function getElementsByClassName(className,tag){ 
            parent=parent || document; 
            if(!(parent=$(parent))) return false; 
             
             
            //var allTags=document.getElementsByTagName(tag);  
            //對tag進行過濾，把tag的對象全取出來  
            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<allTags.length;i++){ 
                    element=allTags[i]; 
                    if(regex.test(element.className)){ 
                            matchingElements.push(element); 
                        } 
                } 
                 
                //返回這個數組  
            return matchingElements; 
        } 
        window['LD']['getElementsByClassName']=getElementsByClassName; 
         
        function bindFunction(ojb,func){ 
                return function(){ 
                        func.apply(obj,arguments); 
                    } 
            }; 
        window['LD']['bindFunction']=bindFunction; 
         
    function getBrowserWindowSize(){ 
            var de=document.documentElement; 
            return{ 
                    'width':( 
                        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(){
 //構造命名空間
 window['LD']={} ; 
 
 function $(){
  var elements=new Array();
  //arguments當前函數的參數數組。參數
  for(var i=0;i<arguments.length;i++){
    var element=arguments[i];
    
    if(typeof element=='string'){
      element=document.getElementById(element);
     }
    if(arguments.length==1){
     return element;
     }
    elements.push(element);
  }
  return elements;
 }
 //註冊命名空間
 window['LD']['$']=$;
 
 function getElementsByClassName(className,tag){
   parent=parent || document;
   if(!(parent=$(parent))) return false;
   
   
   //var allTags=document.getElementsByTagName(tag);
   //對tag進行過濾，把tag的對象全取出來
   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<allTags.length;i++){
     element=allTags[i];
     if(regex.test(element.className)){
       matchingElements.push(element);
      }
    }
    
    //返回這個數組
   return matchingElements;
  }
  window['LD']['getElementsByClassName']=getElementsByClassName;
  
  function bindFunction(ojb,func){
    return function(){
      func.apply(obj,arguments);
     }
   };
  window['LD']['bindFunction']=bindFunction;
  
 function getBrowserWindowSize(){
   var de=document.documentElement;
   return{
     'width':(
      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;
 
})();運行結果:

 

總結

        這個小例子，基本上把以前所學內容，包括基礎支持、面向對象、原型、對象字面量、this、作用域鏈等知識點全部囊括，算是對JavaScript學習的一個小結。學的越多，越要找到所學內容之間的聯系，學習JS，不隻是僅僅學習JS，更要聯系以前所學的面向對象、C#、CSS等知識，讓知識像路一樣四通八達，才能“書越讀越薄”。現在能做的，就是繼續構建我的知識網。

 作者：lidaasky