부끄럽지 않은 사람이 되자: 6월 2009

2009년 6월 22일 월요일

유용한 자바스크립트 정리

가끔 웹에서 자바스크립트 오픈 소스를 찾다 보면

한 줄로 쭉 이어진 매너 없는 소스가 있다..

그런 소스를 한 번에 정리해 주는 페이지를 구글링으로 찾을 수 있었다.

나와 같은 불편을 겪는 분들은, 편히 이용하시길..

Online javascript beautifier

2009년 6월 16일 화요일

[jQuery] each 메소드 사용시 break, continue 사용

jQuery.each ( callback )

jQuery에서 for, while 문과 비슷한 역할을 하는 each 메소드 사용 시

break, continue와 같은 프로세스를 수행해야 할 때가 있다.

그럴 때 return true;는 continue와 같은 역할을, return false;는 break와 같은

역할을 수행한다.

예제 >>

$('#loop').each ( function() {

if ( i==0 ) return true; // continue;

else return false; // break;

} );

출처 : 짱프로그래머 카페

2009년 6월 10일 수요일

DIV 객체에서 valign='middle' 구현하기

Ajax 프로그래밍을 하다보면 DIV를 수시로 사용해야 하는데 DIV는 테이블과 다르게 valign="middle" 속성이 존재하지 않는다. 여러가지 방법을 고려하던 중 몇몇사이트에서 힌트가 될만한 내용을 얻게 되었다.

첫번째 방식의 경우

첫번째 방식은 다음과 같은 소스로 구성되어 있다.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-2">
<title>Universal vertical center solution</title>
<style>
.greenBorder {border: 1px solid green;}
</style>
</head>

<body>

<h1>Vertical Centering in CSS - Example</h1>

<div class="greenBorder" style="display: table; height: 400px; #position: relative; overflow: hidden;">
<div style=" #position: absolute; #top: 50%;display: table-cell; vertical-align: middle;">
<div class="greenBorder" style="#position: relative; #top: -50%; ">
any text<br>
any height<br>
any content, for example generated from DB<br>
everything is vertically centered
</div>
</div>
</div>

<p>Please view source for details or read the
<a href="../css-vertical-center-solution.html">CSS
vertical centering article</a>.
<p>See also the <a href="vertical-align-valid-solution-en.html">structural and
valid example</a>.
</body>
</html>

IE의 경우 Layer를 3중으로 감싸서 첫번째 Layer에서 전체적인 위치를 잡고 두번째 Layer에서는 첫번째 Layer기준으로 가운데(상대 좌표 기준 50%로 top 설정)하고 세번째 Layer에서 두번째 Layer기준으로 -50%로 top을 설정하는 방식이다. 이 방식의 경우 IE의 거의 모든 버전에서 동작하는 장점이 있지만 데이터가 많아지는 경우 스크롤바가 생기도록 할 수 없다.

데이터가 많지 않은 경우
데이터가 많은 경우

Firefox와 Opera의 경우 IE에서 사용하는 방식을 이용하는 것이 아니라 display 라는 CSS 속성을 table로 설정하는 방식으로 처리가 가능하다. 이 방식의 경우 가장 밖에 있는 Layer에 display: table를 설정하고 두번째 Layer에는 display: table-cell; vertical-align: middle;를 설정하면 되는데 데이터가 많은 경우 Layer이 커져서 Layout이 변경되는 문제가 있다.

데이터가 많지 않은 경우
데이터가 많은 경우

두번째 방식의 경우

두번째 방식은 좀더 복잡한데, 분리된 CSS와 JavaScript파일을 통합하면 다음과 같은 소스로 구성되어 있다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Centered Layout</title>

<style type="text/css" id="layout">
#outer { width: 50%; } /* customize width of the page: 700px, 90% etc. */
</style>
<script type="text/javascript">

/* Coded by Christian Fecteau 26/09/05 www.metaw3.ca */

var layout_ie5 = (window.ActiveXObject && document.getElementById);
var layout_ie5Mac = (!window.showModelessDialog && window.ActiveXObject && document.getElementById);

if (layout_ie5)
{
var layout_old_onload = null;
if (typeof window.onload == "function")
{
layout_old_onload = window.onload;
}
window.onload = layout_fix;

var layout_old_onresize = null;
if (typeof window.onresize == "function")
{
layout_old_onresize = window.onresize;
}
window.onresize = layout_fix;

if (!layout_ie5Mac)
{
var layout_ow = null;
var layout_ss = document.styleSheets('layout').rules;
for (var i = 0; i < layout_ss.length; i++)
{
if (layout_ss[i].selectorText == '#outer')
{
layout_ow = layout_ss[i].style.width;
}
}
}
}

function layout_fix()
{
if (layout_old_onload)
{
layout_old_onload();
layout_old_onload = null;
}

if (layout_old_onresize)
{
layout_old_onresize();
}

if (layout_ie5Mac)
{
document.body.style.height = '0px';
document.body.style.width = '0px';
}
else
{
if (layout_ow) middle.style.width = layout_ow;
outer.style.width = '100%';
}

outer.style.height = 'auto';
outer.align = 'center';
middle.align = 'left';
inner.style.styleFloat = 'left';

var layout_b = Number(document.body.clientHeight);
var layout_c = Number(inner.offsetHeight);

if (layout_b > layout_c)
{
outer.style.marginTop = (layout_b-layout_c)/2 + 'px';
}
else
{
outer.style.marginTop = '0px';
}
}

</script>

#container {
color: black;
background-color: silver;
}

p {
font: 0.7em verdana, serif;
text-align: justify;
margin: 0;
}

body, html {
height: 100%;
margin: 0;
padding: 0;
border: 0;
}

#outer {
display: table;
height: 100%;
margin: 0 auto;
}

#middle {
display: table-row;
}

#inner {
display: table-cell;
vertical-align: middle;
}
</style>
</head>
<body>

<div id="outer"><div id="middle"><div id="inner">

<div id="container">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

</div></div></div>

</body>
</html>

IE의 경우 windows의 onresize 이벤트를 받아서 위치를 계산해 준다.

데이터가 많지 않은 경우
데이터가 많은 경우

Firefox와 Opera의 경우 처음 방법과 비슷하게 display: table를 사용하는데 두번째 Layer에 display:table-row라는 속성을 지정한 부분만 차이가 있다.

데이터가 많지 않은 경우
데이터가 많은 경우

이 방식의 문제점은 IE의 경우 onresize라는 event를 이용하는데 이 event가 DIV객체에서는 발생하지 않는다는 점이다.

웹스퀘어를 위한 개선책

이 두가지 방식 모두 2% 부족하므로 웹스퀘어를 위한 새로운 해결 방법을 고민하게 되었다. 먼저 웹스퀘어의 경우 별도의 Layout엔진을 사용하므로 하나의 HTML소스에서 여러 브라우저를 모두 지원하지 않아도 된다. 그래서 IE를 지원하기 위한 소스와 Firefox, Opera를 지원하기 위한 소스로 분리하였다.

IE의 경우

IE의 경우 첫번째 방식이 좋은 해결책이지만 데이터의 양이 많아지게 되면 스크롤바를 이용해서 데이터를 처리할 수 없다. 만일 첫번째 Layer의 overflow를 auto로 하게 되면 다음과 같은 일이 발생한다.

데이터가 많지 않은 경우 정상적으로 동작한다.

데이터의 양이 많아 져서 세번째 Layer의 높이가 첫번째 Layer의 50% 이상인 경우 스크롤바가 생기게 된다!!!

그래서 두번째 Layer의 margin-top을 첫번째 Layer와 두번째 Layer의 높이의 절반으로 설정하는 두번째 방식과 expression이라는 IE전용 CSS함수를 이용해서 다음과 같이 수정하였다.

<div id="layer1" style="background-color:#9999FF;">
<div id="layer2" style="background-color:#99FF99; margin-top:expression( ( eval(this.offsetParent.offsetHeight) - eval(this.offsetHeight) )/2 );">
ajax 테스트<br>
valign=middle<br>
데이터의 길이에 상관 없이 가운데 정렬하기 위한 샘플<br>
</div>
</div>

expression은 계산 결과를 CSS에 적용할 수 있도록 지원하는 함수이다. 화면은 아래 처럼 나타나는데 데이터 양에 상관없이 정상적으로 동작하는 것을 확인할 수 있다.

전체 소스는 다음과 같다.

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=EUC-KR">
<title>DIV valign=middle</title>
<style>
#layer1 {position: absolute; top:100px; left:100px; height: 400px; width:700px; overflow: auto;}
</style>
<script>
function short() {
layer2.innerHTML = "ajax 테스트<br>valign=middle<br>데이터의 길이에 상관 없이 가운데 정렬하기 위한 샘플";
}

function middle() {
layer2.innerHTML = "ajax 테스트<br>valign=middle<br>데이터의 길이에 상관 없이 가운데 정렬하기 위한 샘플<br>ajax 테스트<br>valign=middle<br>데이터의 길이에 상관 없이 가운데 정렬하기 위한 샘플<br>ajax 테스트<br>valign=middle<br>데이터의 길이에 상관 없이 가운데 정렬하기 위한 샘플<br>ajax 테스트<br>valign=middle<br>데이터의 길이에 상관 없이 가운데 정렬하기 위한 샘플<br>";
}

function long() {
layer2.innerHTML = "ajax 테스트<br>valign=middle<br>데이터의 길이에 상관 없이 가운데 정렬하기 위한 샘플<br>ajax 테스트<br>valign=middle<br>데이터의 길이에 상관 없이 가운데 정렬하기 위한 샘플<br>ajax 테스트<br>valign=middle<br>데이터의 길이에 상관 없이 가운데 정렬하기 위한 샘플<br>ajax 테스트<br>valign=middle<br>데이터의 길이에 상관 없이 가운데 정렬하기 위한 샘플<br>ajax 테스트<br>valign=middle<br>데이터의 길이에 상관 없이 가운데 정렬하기 위한 샘플<br>ajax 테스트<br>valign=middle<br>데이터의 길이에 상관 없이 가운데 정렬하기 위한 샘플<br>ajax 테스트<br>valign=middle<br>데이터의 길이에 상관 없이 가운데 정렬하기 위한 샘플<br>ajax 테스트<br>valign=middle<br>데이터의 길이에 상관 없이 가운데 정렬하기 위한 샘플<br>ajax 테스트<br>valign=middle<br>데이터의 길이에 상관 없이 가운데 정렬하기 위한 샘플<br>ajax 테스트<br>valign=middle<br>데이터의 길이에 상관 없이 가운데 정렬하기 위한 샘플<br>ajax 테스트<br>valign=middle<br>데이터의 길이에 상관 없이 가운데 정렬하기 위한 샘플<br>ajax 테스트<br>valign=middle<br>데이터의 길이에 상관 없이 가운데 정렬하기 위한 샘플<br>ajax 테스트<br>valign=middle<br>데이터의 길이에 상관 없이 가운데 정렬하기 위한 샘플<br>ajax 테스트<br>valign=middle<br>데이터의 길이에 상관 없이 가운데 정렬하기 위한 샘플<br>";
}

</script>

</head>

<body>
모든 경우 정상적으로 동작하지만 expression의 overhead가 얼마나 될지 모른다.<br>

Firefox와 Opera의 경우

Firefox와 Opera의 경우에는 display:table 속성이 있는 Layer를 다시 display 속성이 없는 Layer로 감싸는 방식으로 해결할 수있다.

전체 소스는 다음과 같다.

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=EUC-KR">
<title>DIV valign=middle</title>
<style>
#layer1 {position: absolute; top:100px; left:100px; height: 400px; width:700px; overflow: auto;}
#layer2 {display: table; width:100%; height:100% }
#layer3 {display: table-cell; vertical-align: middle;}

</style>
<script>
function short() {
layer3.innerHTML = "ajax 테스트<br>valign=middle<br>데이터의 길이에 상관 없이 가운데 정렬하기 위한 샘플";
}

function middle() {
layer3.innerHTML = "ajax 테스트<br>valign=middle<br>데이터의 길이에 상관 없이 가운데 정렬하기 위한 샘플<br>ajax 테스트<br>valign=middle<br>데이터의 길이에 상관 없이 가운데 정렬하기 위한 샘플<br>ajax 테스트<br>valign=middle<br>데이터의 길이에 상관 없이 가운데 정렬하기 위한 샘플<br>ajax 테스트<br>valign=middle<br>데이터의 길이에 상관 없이 가운데 정렬하기 위한 샘플<br>";
}

function long() {
layer3.innerHTML = "ajax 테스트<br>valign=middle<br>데이터의 길이에 상관 없이 가운데 정렬하기 위한 샘플<br>ajax 테스트<br>valign=middle<br>데이터의 길이에 상관 없이 가운데 정렬하기 위한 샘플<br>ajax 테스트<br>valign=middle<br>데이터의 길이에 상관 없이 가운데 정렬하기 위한 샘플<br>ajax 테스트<br>valign=middle<br>데이터의 길이에 상관 없이 가운데 정렬하기 위한 샘플<br>ajax 테스트<br>valign=middle<br>데이터의 길이에 상관 없이 가운데 정렬하기 위한 샘플<br>ajax 테스트<br>valign=middle<br>데이터의 길이에 상관 없이 가운데 정렬하기 위한 샘플<br>ajax 테스트<br>valign=middle<br>데이터의 길이에 상관 없이 가운데 정렬하기 위한 샘플<br>ajax 테스트<br>valign=middle<br>데이터의 길이에 상관 없이 가운데 정렬하기 위한 샘플<br>ajax 테스트<br>valign=middle<br>데이터의 길이에 상관 없이 가운데 정렬하기 위한 샘플<br>ajax 테스트<br>valign=middle<br>데이터의 길이에 상관 없이 가운데 정렬하기 위한 샘플<br>ajax 테스트<br>valign=middle<br>데이터의 길이에 상관 없이 가운데 정렬하기 위한 샘플<br>ajax 테스트<br>valign=middle<br>데이터의 길이에 상관 없이 가운데 정렬하기 위한 샘플<br>ajax 테스트<br>valign=middle<br>데이터의 길이에 상관 없이 가운데 정렬하기 위한 샘플<br>ajax 테스트<br>valign=middle<br>데이터의 길이에 상관 없이 가운데 정렬하기 위한 샘플<br>";
}

</script>

</head>

<body>
ff.html의 문제를 해결하기 위해서 display 속성을 별도로 지정하지 안은 layer로 한번 더 감싸는 형태로 구성되어있다.<br>
<a href="javascript:short()">짧은글</a>   
<a href="javascript:middle()">중간글</a>   
<a href="javascript:long()">긴글</a>   

<div id="layer1" style="background-color:#9999FF;">
<div id="layer2" style="background-color:#FF9999;">
<div id="layer3" style="background-color:#99FF99;">
ajax 테스트<br>
valign=middle<br>
데이터의 길이에 상관 없이 가운데 정렬하기 위한 샘플<br>
</div>
</div>
</div>
</html>

출처 : 생각노트

2009년 6월 4일 목요일

javascript 클래스

1. 프로퍼티(클래스필드) 정의하기.

class_name = function ( parameter, ... ) {

....

property declaration...

...

}

또는

function class_name ( parameter, ... ) {

....

property declaration...

...

}

function 이 함수를 의미하는 것이 아니라 여기서는 클래스 선언을 위해서 사용하는 키워드임. 단어 자체가 주는 사전적 의미에 함몰되어서 자꾸 딴지 걸면 안됨.(내가 ... 그랬었음..). 클래스나 함수나 어차피 프로세스로 존재할때 메모리를 차지하는 모듈로서 본다면 객체와 메소드 따위의 구분이 의미가 없다.

public class Student {

String name;

int age;

public Student(String name, int age) {

this.name = name;

this.age = age;

}

위와같은 자바 클래스에 대응하는 자바스크립트의 클래스는 다음과 같음.

Student = function(name, age) {

this.name = name;

this.age = age;

} // 초간단. -_-;

다음과 같이 인스턴스를 생성하고 사용할 수 있음.

Student student = new Student("전지현", 26);

document.write("이름 : " + student.name + ", 나이 : " + student.age );

2. 메소드 정의하기.

메소드도 정의할 수 있는데 두가지 방법이 있음. prototype에 정의하는 방법과 클래스 자체에 정의하는 방법.

2-1. prototype 프로퍼티에 메소드 정의

위에서 만든 Student 클래스에 getter/setter 메소드를 정의하면 다음과 같다.

Student.prototype.getName = function() {

return this.name;

}

Studoent.prototype.setName = function (name) {

this.name = name;

}

이제 다음은 동일한 결과를 보여준다.

student.name;| student.getName();

student.name = "왕지현"; | student.setName("왕지현");

위에서 주의할 점은 Student.prototype.getName() 이 아니라 그냥 getName임. 괄호 넣으면 작동하지 않음. -_-a

여기서 잠깐 prototype 에대해서 짚고 넘어가보자.

자바에서 일반적인 객체 상속구조를 떠올려보자.

student.getAddress();

라고 호출하면 Student 클래스에서 아직 정의되어 있지 않기 때문에 부모 클래스에서 getAddress() 메소드가 있는지 찾는다. 존재 하지 않으면 그 부모클래스의 부모 클래스를 조회하고 마지막으로 Object 객체까지 거슬러 올라가서 최종적으로 찾지 못하면 예외가 발생한다.

javascript에서 정의되는 class는 모두 prototype이라는 프로퍼티를 가지는데 객체에 존재하지 않는 메소드나 클래스 필드를 호출하면 prototype 프로퍼티에서 메소드나 클래스 필드를 찾는다. prototype에서 찾지 못하면 prototype의 prototype 프로퍼티까지 계속해서 탐색을 하고 최종적으로 찾지 못하면

"undefined"(클래스 필드인 경우) , ""(메소드인 경우)

를 출력한다. 위에서 메소드를 정의한 방식이 바로 이 prototype 프로퍼티에 메소드를 정의한 것인데 엄밀히 말하면 위에서 정의한 메소드는 Student 클래스의 것이 아닌, prototype 프로퍼티의 메소드인 셈이다. 하지만 사용하는 입장에서는 중요한 내용은 아닌 듯.

기억해야 할 점은 prototype 프로퍼티는 인스턴스당 할당되는 것이 아니라, 클래스당 하나씩 할당된다는 것. 마치 자바에서 Object.class, ArrayList.class 와 같은 Class 를 떠올리면 좋을듯 하다.

student.getEmail() 을 호출하면 정의되지 않은 메소드이므로 TypeError가 발생하고 진행중인 메소드가 종료된다. 아무것도 출력이 안되는 것처럼 보이지만 예외가 던져져서 진행중이던 메소드를 벗어나버리는 것임.

Student jenny = new Student(....);

try {

jenny.getEmail(); // NO!!!

} catch(e) {

alert(e); // firefox에서는 예외가 던져짐.

}

Student.prototype.getEmail = function() { return googler@gmail.com; };

jenny.getEmail() ; // OK!!!!!!!!!!!

위처럼 prototype에 메소드를 정의하면 메소드를 정의하기 이전에 생성되어 사용되던 인스턴스라도 getEmail() 메소드를 사용할 수 있게 된다. 왜냐하면 위에서 말했듯이 prototype은 클래스당 하나이므로 하나의 클래스에서 생성된 인스턴스들은 prototype을 공유한다.

이때문에 언제든지 메소드나 클래스 필드를 마음대로 만들어낼 수 있으니 조낸! 탄력적이다!!

2-2. 클래스 자체에 메소드 정의

prototype 이 아닌 class 자체에 메소드를 생성하는 방법도 있다.

Student = function(name, age) {

this.name = name;

this.age = age;

this.getName = function() { return this.name ; }

this.setName = function(name) { this.name = name;}

} // 초간단. -_-;

그렇다면 메소드를 prototype에 정의하는 것과 클래스 자체에 정의하는게 어떻게 다를까?

클래스 자체에 정의할 경우, 클래스의 인스턴스를 여러개 생성할 때 메소드 코드를 인스턴스들마다 따로 갖게 된다. 하지만 prototype에 메소드를 정의하면 동일한 클래스로부터 생성된 인스턴스들은 하나의 prototype 프로퍼티를 공유하므로 인스턴스들마다 중복해서 메소드 코드를 가질 필요가 없게된다.

따라서 자바스크립트에서 클래스를 생성할 때 가능하면 prototype에 메소드를 정의하는게 메모리를 아낄 수 있는 길이다...라고 일단 정리하게 넘어가겠다. (그런데 메소드를 클래스 자체에 정의해야 하는 상황도 있지 않을까? 잠깐 고민해봤는데, 아직은 없는 것 같다. 인스턴스의 상태는 프로퍼티에 좌우되기 때문에 메소드를 인스턴스마다 따로 가져야할 상황은 없는 듯.)

하지만 다음과 같이 오버하면 안된다.

Student = function(name, age) {

Student.prototype.name = name;

Student.prototype.age = age;

}

이렇게 하면 클래스의 인스턴스들이 모두 동일한 이름과 나이를 갖게 된다. 즉,

Student jane = new Student("jane", 21);

을 생성한 후

Student jack = new Student("jack", 34);

로 jack을 생성하면 jane의 이름이 "jack", 나이가 34살로 둔갑한다.(뜨아~).

정리하면 상황에 맞게 잘 사용해야 한다는 것이다.

2-3 효율적인 클래스 정의 방법

2-1 방식의 문제점은 클래스를 정의할 때 코드가 난잡해져서 가독성이 떨어진다는 점이다. 클래스를 여러개 정의하는 상황이라면 메소드를 정의한 블록들이 산재해 있어서 클래스의 모습이 눈에 딱 들어오지는 않는다.

반면에 2-2는 코드가 깔끔해져서 가독성이 높아지지만 문제는 위에서 말했듯이 인스턴스들이 중복된 메소드 코드를 갖는다는 점이다.(간단한 클래스라면 상관없겠지만...)

그래서 생각해낸 방법은 다음과 같다.

function Student(name, age)

{

var strName = name;

var intAge = age;

Student.prototype.getName() { return this.strName; }

Student.prototype.setName(name) { this.strName = name; }

Student.prototype.getAge() { return this.strAge; }

Student.prototype.setAge(age) { this.intAge = age; }

}

메소드 정의부를 클래스 내로 옮기면서

fucntion class_name ( parameter, ... )

{

class_name.prototype.method_name ( parameter, ... ) { ... };

.....

}

로 바꿔주는 것. IE와 FF 에서 테스트해봤는데 아무 문제없이 잘 돌아간다. 흐화화~

3. JSON 표기법을 이용한 클래스 정의

아, 이런것도 있다. JSON에 대한 자세한 내용은 http://www.json.org/ 에서 보면 될 것 같다.

위에서 메소드 정의하는 부분을 아래의 코드로 표현했다.

Student.prototype.getName = function() {

return this.name;

}

Studoent.prototype.setName = function (name) {

this.name = name;

}

위의 코드를 JSON 을 이용해서 나타내면 다음과 같다.

Student.prototype = {

getName : function() {

return this.name;

}

setName : function (name) {

this.name = name;

}

4. 정보은닉(encapsulation)

위에서 설명한 클래스 정의 방법은 정보은닉이 안된다는 문제점이 있다. student.name 으로 프로퍼티에 접속이 가능한데 OOP 에서는 이런 접근을 꺼리기 때문에 자바스크립트에서도 이걸 흉내내려는 시도가 있지 않았나 추측해본다.

여자들의 몸무게 평균을 내는 저울이 있다고 치자. 몇 명의 여성의 정보를 가져와서 전체 몸무게을 내는데 여자들은 자신의 몸무게가 드러나는 것을 반대한다. 저울을 통해서 특정 여성의 몸무게를 알아서는 안되는 경우를 생각해보자.

이런 상황을 모델링하면 다음과 같다.

function Scale ( ) {

this.womans = [new Woman(...), new Woman(...), ...];

this.prototype.getTotalWeights() {

var totalWeight = 0;

for( i = 0 ; i < womans.length ; i++) {

totlaWeight += this.womans[i].getWeight();

}

return totalWeight;

}

.....

Scale scale = new Scale() ;

scale.getTotalWeight();

위코드에서는

scale.womans[0].getWeight();

로 특정 여성의 몸무게에 접근할 수 있다.

정보은닉이란 외부에 노출되어서는 안되는 데이터를 꼭꼭 감추는 것을 의미하는데 여기서 여성들의 몸무게 노출을 막기 위해서는 다음과 같이 프로퍼티 선언을 변경해준다.

function Scale ( ) {

var womans = [new Woman(....), new Woman(....), new Woman(...)];

this.prototype.getTotalWeights() {

var totalWeight = 0;

for( i = 0 ; i < womans.length ; i++) {

totlaWeight += womans[i].getWeight();

}

return totalWeight;

}

이제 scale.womans 로 접근하면 "undefined"가 출력되기 때문에 여성들 개개인의 몸무게를 보여주는 메소드 호출을 할 수 없다.

5. 정리하면.

자바스크립트에서 클래스를 정의해서 사용하는게 불필요하고 이상해 보일 수도 있다. 왜냐하면 지금까지 이렇게 하지 않아도 자바스크립트를 잘만 써왔기 때문이다. 이런 편견은 예전에 자바스크립트가 화면을 동적으로 구성하는 도구로서 사용되어왔기 때문에 생긴 것이 아닌가 싶다. 또한 언어가 매우 탄력성이 높아서 초기에 자바스크립트를 어떠한 체계에 맞춰서 사용할지 뚜렷한 가이드라인이 없었기 때문이기도 하다.

하지만 ajax의 도입으로 자바스크립트가 데이터 처리를 위한 수단으로서 많이 사용되고 있다. 서버쪽에서는 데이터 처리만 해서 클라이언트에 전달해주고 클라이언트는 ajax 를 이용해서 데이터를 2차 가공한 후 display하는 ui 과정을 모두 떠안게 되는 것이다.

이러한 변화에 대응하기 위해서 자바스크립트도 class 를 도입해서 좀 더 체계적으로 코드를 만들어어지 향후 유지 보수하는데 어려움이 없을 것으로 생각된다. 예전에는 자바스크립트를 아주 우스운 언어, 웹 디자이너들이나 다루는 수준낮은 언어로 생각해왔지만 이제는 생각을 바꿀 때가 된 것 같다.

OOP의 개념을 자바스크립트에 이식해서 언어의 질을 한층 높일 때가 되지 않았나 싶다.

출처 : 플밍