[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

답글 남기기

아래 항목을 채우거나 오른쪽 아이콘 중 하나를 클릭하여 로그 인 하세요:

WordPress.com 로고

WordPress.com의 계정을 사용하여 댓글을 남깁니다. 로그아웃 /  변경 )

Google+ photo

Google+의 계정을 사용하여 댓글을 남깁니다. 로그아웃 /  변경 )

Twitter 사진

Twitter의 계정을 사용하여 댓글을 남깁니다. 로그아웃 /  변경 )

Facebook 사진

Facebook의 계정을 사용하여 댓글을 남깁니다. 로그아웃 /  변경 )

%s에 연결하는 중