[javascript]john Resig 라이브러리를 통한 object 코딩 실습

전에 자바스크립트 object 코딩실습에 대한 포스팅을 올린 적이 있습니다.

자바스크립트 객체를 만들어 사용하는 법과 연괄배열을 사용하는 법에 대해 간단히

실습해봤는데요. 이번엔 john Resig이 만든 라이브러리를 통해 실습을 해보도록 하겠습니다.

================================================================

우선 위의 블로그를 보시면 아시겠지만, 자바스크립트 객체를 상당히 간단하게(!) 만들어

사용할 수 있습니다.

일반적으로, OOP와 자바프로그래밍을 하실 수 있는 분이라면 무리없이 코딩이 가능합니다.

거두절미하고 아래 예제코드를 보시죠.

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="resig.js"></script>
<script language="javascript">
(function ($) {
    "use strict";

    if(typeof window.bluepoet == "undefined") {
          window.Bluepoet = {};
    }

    Bluepoet.Parent = Class.extend({
        name : '',
        init: function(name) {
            var me = this;
            me.name = name;
        },
        getName: function() {
            var me = this;
            return me.name;
        }
   });

   Bluepoet.Child = Bluepoet.Parent.extend({
       init:function(name) {
           return this._super(name);
       }
   });
})(jQuery);

$(document).ready(function() {
    var parent = new Bluepoet.Parent("parent");
    var child = new Bluepoet.Child("child");

    document.write(parent.getName() + " : " + child.getName());
});
</script>
</head>
<body>
</body>
</html>

위 코드의 결과는 각각 Parent, Child 클래스의 이름인 “parent : child”가 나오게 됩니다.

코드를 간단히 설명드리면,

우선, “Bluepoet”이란 전역객체를 선언하고 Bluepoet에 각각 Parent와 Child 클래스를

선언했습니다. 이때, john Resig이 만든 라이브러리르 사용하여 클래스를 만듭니다.

내용은, init 메서드로 자바스크립트 클래스의 생성자를 만들고, 자바 클래스와 동일하게

안에 필드와 메서드를 만들어 사용할 수 있습니다.

최종적으로, Parent와 Child 클래스를 생성할 때 생성자에 각자의 이름을 넣어주고

객체를 생성해서, 각자의 이름을 출력하게 됩니다.

Parent에 init과 getName 메서드에 this를 대입한 “me” 변수를 선언한 이유는

객체자신을 제외한 이벤트객체와의 차별화를 위해 따로 정의를 한 것입니다.

두 객체 다 자기자신을 모두 this로 사용하기 때문에 나중에 있을 혼란을 미연에

방지하기 위해서이죠.

끝으로, 윗단에 “use strict”라고 명시해 놓은 것은 strict mode에서 자바스크립트

컴파일 과정에 더욱 엄격한 체크를 하겠다는 선언입니다.

위 내용에 대한 설명은 아래 링크를 참조하시면 됩니다.

자바스크립트 코드를 객체지향적으로 만들게 되면, 기존보다 코드량이 훨씬

줄어들뿐만 아니라, DOM에서의 요소검색에서도 월등한 성능향상을

기대할 수 있습니다.

자~! 이제 자바스크립트 객제지향코드의 바다로 풍덩~ 빠져보시죠^^

Advertisements

[javascript]object 코딩 실습

제가 대학다닐 때, 그러니까 1999년부터 2006년 사이에는

자바스크립트“하면 저는 그저 인터넷에 돌아다니는 몇몇 스크립트 긁어다가 붙여 쓰는게

다였습니다. 그 만큼 개념이 없었죠. ㅡㅡ;

하지만 지금은 그 중요성이 날로 증대되고 있는 상황이니 참 짧은 시간이지만

격세지감을 느낍니다.

저도 요즘 “ppk 자바스크립트“를 출근길에 보면서, “내가 자바스크립트 공부도 하는구나~!”

라는 사실이 가끔씩 새롭게 느껴질 때가 있습니다.

================================================================

각설하고, 잠깐 책에 나온 “자바스크립트 코어“부분에 나온 “객체“에 소개된 부분을

토대로 예제코드를 만들어 보았습니다.


<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script><script type="text/javascript" language="javascript">// <![CDATA[
var test = {
	a : 2,
	b : '2',
	c : function() {
	    return this.a*this.b;
	}
};

$(document).ready(function() {
    /*
    for(var i in test) {
        alert(test[i]);
    }
    */

    //document.write(test['c']());
    document.write(test.c());
});
// ]]></script>

결과는 예상하신대로, “4”가 브라우져에 출력되게 됩니다.

test 객체의 b 프로퍼티의 값은 c메서드에서 숫자로 자동인식하여 2*2=4의 결과를

만들어내게 됩니다.

위 예제에서 for문의 주석을 풀고 결과를 확인하시면 test 객체의 각 프로퍼티와 메서드가

출력됩니다.  c메서드는 본문 전체가 나오게 됩니다.

그리고 마지막에 test객체의 c메서드를 호출할때, “연관배열“을 사용할 수도 있습니다.

연관배열“의 정의를 책에서 빌려오면

  • 어떤 값의 이름 문자열을 사용해 그 값을 찾을 수 있게 해주는 배열

이라고 소개되어 있습니다. a프로퍼티는 test[‘a’] 저런식으로 가져오면 되겠죠.

자바스크립트에도 자바와 동일하게 try-catch-finally가 있어 헷갈리던 시절…

이제 자바스크립트도 자바처럼 “객체지향적“으로 “멋지게” 코딩할 수 있는 날이

어서 왔으면 좋겠네요. 많은 단련을 해야겠습니다. ^^

[javascript]암묵적 전역변수 실습 – 안티패턴

오늘 출근하면서 “ppk 자바스크립트” 5장 코어를 보는 와중에 “var“를 선언하지 않은

변수는 함수 밖이든 안이든 모두 전역변수가 된다는 글을 보았습니다.

제 상식에는 함수 안에서 쓰면 무조건 지역변수가 되야 할 것 같은데 자바스크립트는

명시적으로 변수 앞에 “var“를 붙여주지 않으면 암묵적 전역변수가 된다고 합니다.

그래서, 아래 테스트코드를 만들어 보았습니다

<html>
<head>
<script src="../jquery.1.6.min.js"></script>
<script language="javascript">
$(document).ready(function() {
    globalVariableTest();
    print(x);
});
var print = function(val) {
    document.write("global variable x value : " + val);
}

function globalVariableTest() {
    var y = 4;  //함수내 지역변수
    x = y*2;    //암묵적 전역변수
}

</script>
</head>
<body>
</body>
</html>

결과는 변수 x를 선언하지 않았다는 오류가 나올것 같지만 의외로 아래와 같은 결과가

나옵니다.

globalVariableTest() 함수가 실행되면,  x는 암묵적으로 “전역변수“가 되어  document

body에 x의 값이 찍히는 것입니다.

하지만 이것은 “안티패턴“이라고 하네요.  되도록

  • 전역변수를 최소화하라
  • 변수를 선언할때는 명시적으로 “var“를 쓰고, 단일 var패턴을 사용하라.

저렇게 “자바스크립트 코딩기법과 핵심패턴“에 나와있다고 하네요. 저도 나중에 꼭

읽어볼 책입니다.

단일 var패턴“에 대해 궁금하시면 링크를 참고하세요.

여튼,  결론은

  • 변수는 꼭 “var“를 써서 명시적으로 선언하고,  “단일 var“패턴을 사용하라!