EAF(Eolin.Application.Framework)을 활용한 AJAX 실습(2)-Standardizer

본격적인 EAF2.js의 소스분석을 시작해보자.
먼저 Standardizer function에 대해 살펴보자. prototype을 통해 Standardizer function에 대한 property들을 지정해주고 있다.
isIE, isFirefox , isSafari, isOpera, isMozilla 등의 property는 이름에서 알수 있듯이 브라우저의 종류를 확인 할 수있는 기능을 제공한다.

다음으로, Standardizer에 이벤트리스너를 추가/삭제하는 부분을 살펴보자
Standardizer.prototype.addEventListener = function(object) { if (object.addEventListener) return; object.addEventListener = function addEventListener(type, listener, useCapture) { this.attachEvent("on" + type, listener); }; }; Standardizer.prototype.removeEventListener = function(object) { if (object.removeEventListener) return; object.removeEventListener = function removeEventListener(type, listener, useCapture) { this.detachEvent("on" + type, listener); }; };

이 부분은 브라우저가 파이어폭스, 인터넷익스플로어에 구분없이 이벤트리스터 추가/삭제를 위한 코드이다.
1번째 줄에서 Standardizer객체에 addEventListener fuction을 추가하고 있다. 이때 파라메터로 object를 받는다. 2번째 줄에서 object.addEventListener를 수행하는데 앞에서 기술했듯이 파이어폭스에서는 코드값을(true), 익스플로어에서는 "undefined"라는 값을 반환하여 false값이 된다. 즉, 파이어폭스에서는 object.addEventListener를  실행시키고 종료된다.
false인 경우(익스플로어)에는 addEventListener라는 function을 다시 정의 하는데 이 function은 type, listener, useCapture값을 받으며(명은 어떤것이든 상관 없다) 이 값을 이용하여 익스플로어에서 이벤트추가시 사용하는 attachEvent를 호출한다.
이렇게 되면 전달되는 object는 addEventListener(파라메터3개)만을 사용하면, FF인경우는 addEventListener가 실행되고 IE인 경우는 넘어온 파라메터의 앞 두개 값을 활용하여 attachEvent에 매핑된다. 여기서 주의할 부분이 앞서 말했듯이 IE에서는 event명을 DOM0방식으로 사용하므로 앞에 "on"값을 붙이고 있다는 점이다.
removeEventListener도 같은 방법으로 사용되고 있다.

정의된 Standardizer 사용법을 살펴보면 이해가 더 쉽게 될것이다.
var STD = new Standardizer(); STD.addEventListener(window); window.addEventListener("load", PageMaster.prototype._onLoad, false);

이런식으로 사용되는데 window는 이제 브라우저에 상관없이 "load" event 발생시  PageMaster.prototype._onLoad 메소드를 호출하게 된다.

다음으로는 Standardizer에 event를 정의하는 부분을 살펴본다.
그전에 브라우저에서의 event의 property에 대해 정리해 보고, 여러 브라우저에서 제각기 지원하는 event에 대해서도 정리해 보자.

EVENT 정리 <--요기에 정리했다.

event에 관련된 소스를 계속 살펴보자..
Standardizer.prototype.event = function(event) { if (window.event) { event = window.event; if (event.target) return event; if (event.srcElement) event.target = event.srcElement; if (event.preventDefault == undefined) event.preventDefault = function() { this.returnValue = false; }; }; return event; };
이 역시 브라우저간의 호환성(Compatibility)을 위해 추가된 소스다. event라는 메소드를 브라우저 구분없이 사용하기 위해 추가된 부분인데, .target(FF), .srcElement(IE)를 사용했고 preventDefault를 통해 기본 값을 설정하고 있다.

다음 소스는 상하 스크롤, 좌우 스크롤 값에 대해 브라우저 호환성을 고려하여 작성되어 있다.
Standardizer.prototype.getScrollTop = function() { return (this.isSafari ? document.body.scrollTop: document.documentElement.scrollTop); }; Standardizer.prototype.getScrollLeft = function() { return (this.isSafari ? document.body.scrollLeft: document.documentElement.scrollLeft); };
이제 정의가 끝난 Standardizer에 대해 객체정의(STD)를 하고 있으며, 앞에서 정의한 addEventListener를 활용하여 브라우저의 window객체에 브라우저에 상관없이 addEventListener를 사용할 수 있도록 하고 있다.
결론적으로 Standardizer의 가장 큰 역할은 객체의 event에 대해 브라우저 구별없이 하나의 메소드만 사용할 수 있게 하는 일이다.
var STD = new Standardizer(); STD.addEventListener(window);