JavaScript 로그 작업 개체 인스턴스

이제 JavaScript 로그 작업 객체의 인스턴스를 구현하기 위해 배운 지식을 종합적으로 활용해 보겠습니다.

myLog.js: 주요 기능은 myLogger 생성자를 빌드하는 것입니다. 행 추가, 노드 추가, CSS 컨트롤.

LD.js: 주요 기능은 스크립트 및 문자열에 대한 규칙을 공식화하고, 네임스페이스를 구성하고, Id 및 className을 기반으로 객체를 검색하는 것입니다.

test.js: 주요 기능은 양식에 이벤트를 추가하고 mylog에서 일부 기능의 가용성을 테스트하는 것입니다.

Log.html: 로그 개체를 표시하는 데 사용됩니다.

각 파일의 코드는 다음과 같습니다.

test.js

[javascript] view plaincopyprint?//윈도우 객체에 로드 이벤트 추가
LD .addEvent( window,'load',function(){
LD.log.writeRaw('원시 파일입니다.');

LD.log.writeRaw('굵게 표시되어 있습니다! ');

LD.log.header('헤더 포함')

LD.log.write('쓰기 소스:굵게 표시됨 !');
 
for(i in document){
        LD.log.write(i) 로드 이벤트 추가
LD.addEvent(window,'load' ,function(){
LD.log.writeRaw('이것은 원시입니다.');

LD.log.writeRaw(' 굵게 표시됩니다!');

LD.log.header('헤더 포함');

LD.log.write('쓰기 소스:굵은 글씨입니다!');

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

//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");
//문서 아래에 dom 개체 UL을 추가합니다.

//식별을 위한 ID 추가            Logwindow.SetATTRIBUTE ("ID", ID);

// CSS 스타일 제어
logwindow.style.position = 'absolute'
logwindow.style.top = top+'px'; 🎜> logWindow.style.left+'px';

logWindow.style.width='200px'; 🎜 >           logWindow.style.overflow='scroll';                                 Window.style.border=' 1px 단색 black';

//페이지에 양식 추가
document.body.appendChild(logWindow)
} }

//로그 양식에 한 줄 추가
this.writeRaw=function(메시지){
                                                                                   | ';
li.style. border='0';
li.style.borderBottom='1px 점선 검정';
li.style.margin='0'
li.style.color='#000'; >
~                                              
li.appendChild(
document.createTextNode('메시지가 정의되지 않았습니다.')
)
}else if(typeof li.innerHTML!=undefine){
//이것은 또 다른 A입니다. li.innerHTML=message 표현 방법;
}else{
li.appendChild(
                 document.createTextNode(message)                                     appendChild(li );
                    단순 처리 MyLogger.prototype = {

함수(MESSAGE) {
If (Typeof Message == 'String' &&LENGE.Length == 0) {
반환 writeRaw('입력된 정보 없음'); 🎜>                                                  return this.writeRaw(message.toString());
                                                                                                                        // HTML 태그에 로그인하는 것보다
Message = message.replace(/& lt;/g, "& lt; "). 교체 (/& gt;/g, "" & gt; "); > header:function(message){
message=''+메시지+''
                                                                  . JavaScript 문서

//myLogger 생성자
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");
//문서 아래에 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 단색 검정색';
logWindow.style.BackgroundColor ='흰색 ';
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';

// 확인 메시지 정보
if(메시지 유형 == '정의되지 않음'){

//li에 텍스트 노드를 추가합니다.
li.appendChild(
document.createTextNode('메시지가 정의되지 않았습니다.')
);
}else if(typeof li.innerHTML!=undefine){
//이것은 또 다른 표현식입니다. 이런 식으로
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){
writeRaw를 반환합니다. ('입력된 정보 없음');
 
 }
if(typeof message !='string'){
if(message.toString){
return this.writeRaw(message.toString ());
}else{
return this.writeRaw(typeof message);
}
}
//보다 큼 및 미만을 HTML 태그로 변환
메시지 =message.replace(/,"/g,">");
return this.writeRaw(message);
},
헤더:기능(메시지){
메시지=''+message+'';
return this.writeRaw(message);
}
};
window['LD']['log'] = new myLogger();LD.js[javascript ] view plaincopyprint?// JavaScript 문서
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); >                                                                                                                      ,'''); > function $(){
var elements=new Array()
//arguments 현재 함수의 매개변수 배열입니다. 매개변수
for(var i=0;i var element=arguments[i]; string'){
              element=document.getElementById(element);                                                      반품 요소;
elements.push(요소);
                                                                                                                                    . 🎜> function getElementsByClassName(className,tag){
parent=parent || document; 🎜>
🎜> //var AllTags = document.GetelementsBytagname (tag)
// 태그를 필터링하고 TAG 개체를 모두 가져옵니다.
var allTags = (tag == "*" && "&&ALL) ? Parent.all: Parentt .getElementsByTagName(tag);
var matchElements=new Array(); regex=new RegExp(" (^|\s)"+className+ "(\s|$)"); >                                  ; element=allTags[i] ~                                배열
return matchElements;
}
window['LD']['getElementsByClassName']=getElementsByClassName; ojb, func){
                      반환 함수(){
               func.apply(obj,arguments);                                        dFunction;
 
 function getBrowserWindowSize(){
var de=document.documentElement; > 반환{
'너비':(
window.innerWidth
                                                                                                             || 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); 
                true를 반환합니다. 
              }else if(node.attachEvent){ 
                   노드['e'+type+listener]=리스너; 
                   node[type+listener]=function(){node['e'+type+listener](window.event);} 
                  node.attachEvent('on'+type, node[type+listener] ); 
                   true를 반환합니다. 
                  } 
               false를 반환합니다. 
        }; 
        //注册本事件  
    window['LD']['addEvent']=addEvent; 
     
})(); 
// 자바스크립트 문서
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() ;
//현재 함수의 인수 매개변수 배열
for(var i=0;i var element=arguments[i];

if (요소 유형=='string'){
요소=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);
//태그를 필터링하고 모든 태그 객체 제거
var allTags=(tag == "*" && parent.all) ? parent.getElementsByTagName( tag);
var matchElements=new Array();

className=className.replace(/-/g,"\-");
var regex=new RegExp("(^| \s)"+className+ "(\s|$)");
 
var 요소;
for(var i=0;i 요소=allTags [i];
if(regex.test(element.className)){
matchElements.push(element);
}
}

/ /이 배열 반환
matchElements 반환;
}
window['LD']['getElementsByClassName']=getElementsByClassName;

함수 바인딩Function(ojb,func){
반환 함수(){
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 및 역할을 포함하여 이전에 배운 내용을 기본적으로 결합합니다. 도메인과 같은 모든 지식 포인트 자바스크립트 학습의 요약이라고 볼 수 있는 체인이 포함되어 있습니다.