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.addEvent(window,'loadload',function(){ .writeRaw('This is raw'); 
 
    LD.log.writeRaw('This is bold!'); 
  LD.log.write('write source:This is bold!'); 
     
    for(i in document){      } 
}); 
//在window物件裡面新增一個load事件
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){
       myLog.js[javascript] view plaincopyprint?// JavaScript Document  
 
//myLogger的建構子  
function myLogger(id){ 
     var logWindow =null; 
    //建立日誌窗體  
    var createWindow=function(){ 
             var top=(browserWindowSize.height-200)/2||0; 
            var left=( browserWindowSize.width-200)/2||0; 
 
            //使用UL  
           //在document下方新增dom物件UL  
 
            //新增ID識別進行識別     logWindow.setAttribute("id",id); 
 
            //對視窗進行css樣式控制  
         logWindow.style.top=top+'px'; 
            logWindow.style. left=left+'px'; 
     
            logWindow.style.width='200px' 🠎dow
            logWindow.style.overflow='scroll'; 
             0'; 
            logWindow.style.margin='0'; 
             logWindow.style.backgroundColor='white'; 
            logWindow.style.listStyle='none'; 
'; 
logWindow.style.font='10px/10px Verdana, Tahoma, Sans'; 
 
            //將視窗新增至頁面  ).
        } 
 
//新增一行  
    this.writeRaw=function(message){ 
            //如果初始視窗是使用日誌           createWindow(); 
            } 
//建立li的dom節點
        var li=document.createElement('LI'); 
 
        //對窗體進行css樣式控制 ='2px'; 
        li.style.border='0'; 
        li. style.borderBottom='1px dotted black'; 
        li.style.margin='0'; 
               //      驗證message資訊  
        if(typeof message == 'undef   
                li.appendChild(  
            
                    ); 
             
                    li.innerHTML=message ; 
                }else{ 
                                
                    } 
               return true; 
        }; 
} 
//物件字面量的方式宣告特權方法
//在日誌窗體中新增一行，為輸入的內容進行簡單處理  
myLogger.prototype={ 
     
    write:function(message){N 
    write： ){ 
                  if(typeof message !='string'){ 
               if(message.toString){ age.toString()) ; 
                }else{ 
                       } 
            } 
//將大於號小於號進行正規轉換為HTML   replace(/>/g,">"); 
        return this.writeRaw(message); 
    }, 
   background-color:black ;font-weight:bold;padding:0px 5px;">'+message+''; 
        return this.writeRaw(message); 製作= new myLogger(); 
// JavaScript Document

//myLogger的建構子
function myLogger(id){
 id=id||"ICLogWindow";

 //日誌窗體的參考
 var logWindow=null;
 //建立日誌窗體
 var createWindow=function(){
      dowSize.height-200) /2||0;
   var left=(browserWindowSize.width-200)/2||0;

   //使用UL

   logWindow=document.createElement("UL");物件UL

   //新增ID進行標誌     

   logWindow.setAttribute("id",id);

   dow.style.top =top+'px';

   logWindow.style.left=left+'px';

 
   logWindow.style.width='200px';
 ';
   
   logWindow.style.padding='0';
   logWindow.style.margin='0';
   logWindow.style logWindow.style.listStyle='none';
   logWindow.style.font='10px/10px Verdana, Tahoma, Sans';

   //將窗體加到頁面上
); }

//在日誌視窗中新增一行
 this.writeRaw=function(message){
         //如果初始視窗是不存在的，產生日誌;

   }

//創建li的dom節點
  var li=document.createElement('LI');

  //對視窗進行css樣式控制style.border='0';

  li.style.borderBottom='1px dotted black';
  li.style.margin='0';
  li.style.color='#000';訊息
  if(typeof message == 'undefined'){

          //在li內加入文字節點。
    li.appendChild(
       li.appendChild(
     document.createTextNode('Message is undefined')   
       //這是另一種方式的表達
     li.innerHTML=message ;
    }else{
      li.appendChild(
       document.createTextNode   logWindow.appendChild(li);
    return true;
  };
}
//物件字面量的方式宣告特權方法
//在日誌窗體中新增一行，為輸入的內容進行簡單處理
myLogger.prototype={
 
 write:function(message){
  if(typeof message=='string' && message.length== message.length== message=='string' && message.length== message. ){
          return this.writeRaw('沒有輸入資訊');
   
  }
  if(type遠this.writeRaw(message.toString()) ;
    }else{
     return this.writeRaw(typeof 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){ 
    p. ; 
        } 
    } 
 
if(!String.repeat){ 
     new Array(l+1).join(this); 
            } 
    } 
 
if( !String.trim){ 
        String.prototype.trim=function(){ 
                 }  
    } 
 
(function(){ 
    //構造命名空間  
    window['LD']={} ;   
     
    function $(){ ele 目前函數的參數數組。參數  
        for(var i=0;i                var element=arguments[i]; 
                 
                if(typeof element=='string'){ 
                        element=document.getElementById(element);
                    } 
                     return element; 
                    } 
elements.push(element); 
        } 
        return elements; 
    }       
    function getElementsByClassName(className,tag){ 
            parent=parent || document; 
            if(!(parent=$(parent))) return false; 
                   //var allTags=document.getElementsByTagName(tag);  
        地
            var allTags=(tag == "*" && parent.all) ? parent.all : parent.getElementsByTagName(tag); 🜠               
            className=className.replace(/-/g, "\-"); 
            var regex=new  RegExp("(^|\s)"+className+ "(\s|$    var element; 
            for(var i=0;i                    element=allTags[i]; 
    
                              } 
                } 
              
            return matchingElements; 
} 
        window['LD']['getElementsByClassName']=getElementsByClassName; 
                    return function(){ 
                            } 
            }; 
        , [ 'LD']['bindFunction']=bindFunction; 
         
    function getBrowserWindowSize(){ 
            var de=document.documentElement; 
            return{ 
                    'width':( 
                        window.innerWidth 
                        || (de && de.clientWidth)
                        || document.body.clientWidth), 
                    '高度':( 
                      window.innerHeight 
                        || (de && de.clientHeight) 
                        || de && document.body.clientHeight) 
                } 
        }; 
        //註冊此事件  
    window['LD']['getBrowserWindowSize']=getBrowserWindowSize; 
     
     
    function addEvent(node,type,listener){ 
        
             
            if(node.addEventListener){ 
                node.addEventListener(type,listener,false); 
                返回 true； 
                    節點['e'+type+listener]=listener; 
                    ode.attachEvent('on'+type, node[type+listener]); 
                       
            回傳 false； 
        }; 
        //註冊此事件  
    window['LD']['addEvent']=addEvent; 
     
})(); 
// JavaScript 文件
if(document.all && !document.getElementById){
 document.getElementById=function(id){
  return document.all[id];repe {
  String.prototype.repeat=function(l){
   return new Array(l+1).join(this);
   }
 }

if(! (){

    返回this.replace(/^s+|+$/g,'');
   }
 }

(function(){
 //建構命名空間
 window['LD']={} ; 
 
 function $(){
  var elements=new Array();
guments
  for(var i=0;i    var element=arguments[i];
    
  );
}
    if(arguments.length==1){
     return element;
     }
    空間
 window['LD']['$ ']=$;
 
 function getElementsByClassName(className,tag){
   parent=parent || document;
   if(!(parent s=document.getElementsByTagName (tag);
   //對tag進行過濾，把tag的對象全取出來
   var allTags=(tag == "*" && parent.all) ? parent.all : ingElement =new Array();
   
   className=className.replace(/-/g,"\-");
   var regex=new  RegExp("(^|\s)"+className+ "(s|$)"( );
   
   var element;
   for(var i=0;i         matchingElements.push( element);
      }
    }
    
    //回中這個陣列
   return=cingElements; yClassName;
  
  function bindFunction(ojb,func){
    return function() {
      func.apply(obj,arguments);
     }
   };
  window['LD']['bindFunction']=bind   var de=document.documentElement;
   return{
'width':(
      window.innerWidth
      || (de && de.clientWidth)
        window.innerHeight
      || (de && de.clientHeight)
|| de && document.body.clientHeight)
    }
  };
  //註冊本事件
 window['LD']['getBrowserWindowSize']=getBrowWrow window['LD']['getBrowserWindowSize']=getBrowL​​hmSm​​hk.
if(!(node=$(node))) return false;
   
   if(node.addEventListener){
       node.addEventListener"type,listener,false); (node.attachEvent){
        node['e'+type+listener]=listener;
     node[type+listener]=function(){node['e'+ '+type, node[type+listener]);
     return true;
       }
      return false;
}) ();運作結果:




 



總結

        中一個小符號點全部囊括，算是對JavaScript學習的一個小結。