예전에 Javascript 예제 소스를 받기위해 이곳 저곳을 들리다가, Javascript 안에서

  MOA.Service.Open("aaaaa", "12"."55");

식으로 소스를 적어놓은 것을 보았다.
처음에는 무슨 Object를 New 한뒤, 그 안의 메소드가 그렇게 된 줄 알았는데,
Javascript를 구성할 때, Namespace 기반으로 마치 Class 처럼 구현하는 방법으로
만들어 진 것이였다.
지금도 그렇지만 그 당시 나에게 Javascript는 넘지 못할 산이였고, Copy & Paste만 한채
더 이상 분석 없이 그냥 넘어 갔었다.

이번에 AJAX 기반의 WebPart를 만들면서 Javascript를 하나씩 사용하기 시작했는데,
그 때 보아왔던 Class 처럼 구현한 Javascript 의 원형을 보게 되었고, 그 구조를 뜯어보는
기회를 갖게되었다.


Javascript 에서 저런 "." 으로 구분된 형태로 구성하는 이유중에 하나는,
Namespace 때문이다.
예를 들어 함수나 변수 이름들을 넣을 때,  이름이 겹치지 않을까 하는 우려가 발생했다.
예를 들어 addNode 라는 함수를 만들었는데, 이 함수가 다른 Javascript에서도 사용하지
않을까... 라는 우려감이 그대로 드는 것이였다. 그럼 어떻게 해결 할까?

Javascript에서는 var 라는 변수 형에는 뭐든지 들어갈 수 있다는데 착안을 하여 구성한 것 같다.

즉 var AAA = { 'aaa', 'bbbb'  ,'cccc'  } 라는 배열을 넣듯이 그 안에 구성요소들을 때려
넣는 것이다. 이 때 name과 value라는 형태로 넣는데, 굳이 표현하면 아래와 같이 된다.

var AAA = { name : 'aaaa', tel : 'bbbbb' , addr : 'cccc' }

요소 1개는 name : 'aaaa' 이고, 2번째 요소는 tel : 'bbbbb' , 3번째 요소는 addr : 'cccc' 를 의미하게 된다. 만일 'aaaa' 라는 것을 접근하려면, AAA.name 으로 하면 'aaaa' 이 나오게 되는 것이다.

예를 들면 아래와 같이 클래스를 구성하게 된다.

var HelloClass = {
       variableA : null,
       RunIt: function (param) {
            this.variableA = param;
            alert(HelloClass .variableA);
       }
}

HelloClass.HelloMethod('OK!');

위의 자바 스크립트를 실행하면 'OK!' 라는 Alert 창이 뜬다.

잠시 위의 코드를 살펴보자.
보면, 이름과 그 형이나, 값을 ':' 으로 구분하여 구성한다.
보면 변수 부분은 변수이름을 variableA 로, 그 값은 null 로 규정했다.
그리고 함수 부분은 이름을 RunIt로, 그 값은 function(....) {....} 이라고 규정했다.

이렇게 만들면 저 맨위의 이름(예에서는 HelloClass )만 안겹치면 끝이다.

그리고, HelloClass를 접근할 때, HelloClass 자체를 써서 접근할 수 있고,
HelloClass 내부에서 접근할 땐 this라는 지시어를 써도 된다.

뭐 실제 class 처럼 proecteed, private 등의 접근 제어나 생성자 이런 부분이
명확치 않아서 의미가 별로 없긴 하지만, 네임 스페이스에 겹치지 않는 문제를
해결한다는 입장에서 볼때는 획기적인 방법이 아닐 수 없다.





728x90

+ Recent posts