JavaScript 로그 작업 개체 인스턴스-JS 튜토리얼-php.cn

이제 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];
  }
}