사용자 정의 객체가 페이지 객체를 캡슐화하면 외부에 구현 부분이 드러나지 않도록 할 수 있다. 캡슐화를 지원하는 라이브러리를 사용하면 메소드를 호출하는 것만으로 투명도를 변경할 수 있다.
이러한 라이브러리를 사용하면 브라우저에서 구현 방식이 바뀌더라도 객체 캡슐화가 그러한 변화에 대응해준다. 이로써 세련된 동적 인터랙티브 프로그램을 더욱 손쉽게 만들 수 있다. 즉, 브라우저의 구현 방식이 바뀌더라도 프로그램을 변경할 필요가 없는 것이다. 그리고 브라우저의 지원 여부를 매번 검사할 필요도 없다. 검사는 객체를 생성할 때 자동으로 하게 된다.
예제) 자바스크립트의 객체 캡슐화 동작 방식
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html lang="ko" xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Object Capsulation</title> <style type="text/css" lang="ko"> div { position: absolute; top: 30px; left: 50px; } </style> <script type="text/javascript" language="javascript"> //<![CDATA[ var theobjs = new Array(); function alphaOpacity(value){ // IE var opacity = value * 100; this.obj.style.filter = "alpha(opacity:"+opacity+")"; } function cssOpacity(value) { // FF this.obj.style.opacity = value; } function getOpacity() { if(this.obj.style.filter) { var filterString = this.obj.style.filter; var derivedVal = filterString.substring(filterString.indexOf(':')+1, filterString.indexOf(')')); return derivedVal / 100; } else { return this.obj.style.opacity; } } var time1; function changeOpacity() { // div1 var currentOpacity = parseFloat(theobjs["div1"].objGetOpacity()); currentOpacity -= 0.1; theobjs["div1"].objSetOpacity(currentOpacity); //div2 currentOpacity = parseFloat(theobjs["div2"].objGetOpacity()); currentOpacity += 0.1; theobjs["div2"].objSetOpacity(currentOpacity); // 재귀호출 time1 = setTimeout(changeOpacity, 100); if(currentOpacity == 1.0) { clearTimeout(time1); } } function DivObj(obj) { this.obj = obj; this.objGetOpacity = getOpacity; this.objSetOpacity = obj.style.filter ? alphaOpacity : cssOpacity; } function setup() { theelements = document.getElementsByTagName("div"); for(i=0; i<theelements.length; i++) { var obj = theelements[i]; if(obj.id) { theobjs[obj.id] = new DivObj(obj); } } // opacity 초기값 설정 theobjs["div1"].objSetOpacity(1.0); theobjs["div2"].objSetOpacity(0.0); setTimeout(changeOpacity, 100); } //]]> </script> </head> <body onload="setup();"> <div id="div1"> <img src="top1.jpg"/> </div> <div id="div2" style="opacity: 0.0; filter: alpha(opacity=0);"> <img src="top5.jpg" /> </div> </body> </html>
설명)
위 예제에서는 메소드들을 객체 안에서 직접 구현하지 않고 외부에 별도의 함수로 구현했다.
이러한 방법은 크로스 브라우저 객체를 생성할 때 좋은 방법이기도 하다.
즉, 여러 객체에서 브라우저를 탐지하기 위해 사용되는 공통적 코드가 있는 경우
이를 외부에 별도의 함수로 만들어 두면 편리하다.