자바스크립트로 OOP 구현하기

Aug 5, 2013

자바스크립트로 OOP 방식 개발에 필요한 개념을 알아보려고 한다.

데이터 타입

  • 객체(Object) : 예) {name: “정기철”, age: 30}
  • 배열(Array) : 예) [1,2,3]
  • 문자열(String) : 예) “abc123”
  • 숫자(int,float) : 예) 1
  • Boolean : 예) true , false

JSON

경량의 데이터 교환방식으로 자바스크립트에서는 객체에 속한다.

// 예
var rss = [ 
{no: 1, title: "블로그글 제목1", content:  "블로그 내용1",  wdate: "2011-06-25"}, 
{no: 2, title: "블로그글 제목2", content:  "블로그 내용2",  wdate: "2011-06-27"} 
];

JSON1에 대한 자세한 내용은 다음 링크를 참고한다.

객체지향 프로그래밍(OOP)

OOP는 대상을 객체로 정하고 이를 다루는 개념이다. 자바스크립트가 OOP를 기본적으로 지원하지 않지만, OOP처럼 개발할 수 있다.

주요 용어

  • Class : 다루고자 하는 대상으로 객체라고도 한다. 객체는 Method와 Attribute로 정의된다.
  • Instance : Class에 정의된 것을 바탕으로 만들어진 활성체를 말하며 개체라고 한다.
  • Method : 메소드, 멤버 함수라고도 하고, 객체에서 행동을 담당하는 부분이다. 보통 동사+목적어 카멜 표기법을 사용한다.
  • Attribute : 속성, 멤버 변수라고도 하며 객체의 속성이다.

객체의 특징

  • 추상화 : 객체는 속성과 메소드로 정의한다.
  • 캡슐화(은닉) : 객체는 블랙박스와 같을 수 있다. 안에서 어떻게 처리되는 것은 중요하지 않고, 해당 객체의 인터페이스만을 알면 다룰 수 있다.
  • 상속 : 슈퍼 클래스나 부모 클래스에 정의되어 있는 내용을 상속받을 수 있다. 상속도 자바스크립트로 구현 할 수 있다.

기타 OOP와 관련된 자세한 내용은 관련 서적이나 참고 자료가 많이 있으니 그것을 참고하면 될 것 같다.

모듈 개발을 위한 기본 OOP 패턴

이제부터 자바스크립트에서 객체지향 프로그래밍의 형태로 개발할 것이다. 아래 패턴은 모듈이나 페이지를 개발하기 위해 만들었는데, 다른 형태로도 OOP를 구현할 수 있다.

if(typeof(Module) == "undefined") var Module = {};

(function($){

Module.Template = function() {
    this.initialize.apply(this,arguments);
}

Module.Template.prototype = {
    initialize : function(hash) {
        var obj = this;

        this.hash = this.getHashData(hash);
        this.addElement();
        this.addEvent();
    },

    getHashData : function(hash) {
        if(typeof(hash.id) == "undefined") hash.id = "";

        return hash;
    }
}

})(jQuery);
  • Line 1 : Module이라는 네임스페이스를 전역으로 정의한다.
  • Line 3 ~ Line 31 : Template라는 클래스를 정의한다.

Module.Template 클래스에는 3개의 메소드로 구성되어 있다.

  1. initialize : 생성자의 역할을 하고, 실행과 동시에 getHashData와 addEvent 메소드를 실행한다.
  2. getHashData : 생성자를 통해 넘어온 데이터를 처리하고, 변경된 결과를 반환한다.
  3. addEvent : HTML 개체에 이벤트를 일괄적으로 추가하는 역할을 한다.

실습 예제

이제 위의 패턴을 이용해서 간단한 예제를 만들고, 실행할 것이다.

index.html

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>OOP 테스트 프로그램</title>
</head>
 
<body>
<button id="person1">신짱구</button>
<button id="person2">나미리</button>
 
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="data.js"></script>
<script type="text/javascript" src="Module.Example.js"></script>
<script type="text/javascript">
// 인스턴스 생성
var P1 = new Module.Person({ // 신짱구
    id: "person1",
    data: data1
});
var P2 = new Module.Person({ // 나미리
    id: "person2",
    data: data2
});
</script>
</body>
</html>

data.js

// 데이터 정의
var data1 = {
    name: "신짱구",
    age: 5
}
var data2 = {
    name: "나미리",
    age: 22
}

Module.Example.js

// 클래스 정의
if(typeof(Module) == "undefined") var Module = {};

(function($){

Module.Person = function() {
    this.initialize.apply(this,arguments);
}

Module.Person.prototype = {
    initialize : function(hash) {
        var obj = this;

        this.hash = this.getHashData(hash);
        this.addEvent();
    },

    getHashData : function(hash) {
        if(typeof(hash.id) == "undefined") hash.id = "";
        if(typeof(hash.data) == "undefined") hash.data = {};

        return hash;
    },

    addEvent : function() {
        var THIS = this;

        $("#"+this.hash.id).mouseover(function() {
            THIS.alertName();
        }).mouseout(function() {
            THIS.alertAge();
        });

    },

    alertName : function() {
        console.log("내 이름은 "+this.hash.data.name+"입니다.");
    },

    alertAge : function() {
        var who;

        if(this.hash.data.age > 19) {
            who = "어른";
        } else {
            who = "미성년자";
        }

        console.log(this.hash.data.age+"살 "+who+"에요.");
    }
}

})(jQuery);

  1. JSON의 개요 ↩︎

See Also