자바스크립트로 OOP 스타일의 개발을 위해 필요한 개념에 관해 알아보려고 한다.
데이터 타입
- 객체(Object) : 예) {name: “정기철”, age: 30}
- 배열(Array) : 예) [1,2,3]
- 문자열(String) : 예) “abc123”
- 숫자(int,float) : 예) 1
- Boolean : 예) true , false
JSON
경량의 데이터 교환방식으로 자바스크립트에서는 객체에 속한다.
1 2 3 4 5 |
// 예 var rss = [ {no: 1, title: "블로그글 제목1", content: "블로그 내용1", wdate: "2011-06-25"}, {no: 2, title: "블로그글 제목2", content: "블로그 내용2", wdate: "2011-06-27"} ]; |
JSON에 대한 자세한 내용은 다음 링크를 참고한다. JSON의 개요
객체지향 프로그래밍(OOP)
OOP는 대상을 객체로 정하고 이를 다루는 개념이다. 자바스크립트가 OOP를 기본적으로 지원하지 않지만 OOP처럼 개발할 수 있다.
주요 용어
- Class : 다루고자 하는 대상으로 객체라고도 한다. 객체는 Method와 Attribute로 정의된다.
- Instance : Class에 정의되어 있는 것을 바탕으로 만들어진 활성체를 말하며 개체라고 한다.
- Method : 메소드, 멤버함수라고도 하면 객체에서 행동을 담당하는 부분이다. 보통 동사+목적어 카멜표기법을 사용한다.
- Attribute : 속성, 멤버변수라고도 하며 객체의 속성이다.
객체의 특징
- 추상화 : 객체는 속성과 메소드로 정의한다.
- 캡슐화(은닉) : 객체는 블랙박스와 같을 수 있다. 안에서 어떻게 처리되는 것은 중요하지 않고, 해당 객체의 인터페이스만을 알면 다룰 수 있다.
- 상속 : 슈퍼클래스나 부모클래스에 정의되어 있는 내용을 상속 받을 수 있다. 상속도 자바스크립트로 구현 가능하다.
기타 OOP와 관련된 자세한 내용은 관련 서적이나 참고자료가 많이 있으니 그것을 참고하면 될 것 같다.
모듈 개발을 위한 기본 OOP 패턴
이제부터 자바스크립트에서 객체지향 프로그래밍의 형태로 개발할 것이다. 아래 패턴은 모듈이나 페이지를 개발하기 위해 만들었는데, 다른 형태로도 OOP를 구현할 수 있다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
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개의 메소드로 구성되어 있다.
- initialize : 생성자의 역할을 하고, 실행과 동시에 getHashData와 addEvent 메소드를 실행한다.
- getHashData : 생성자를 통해 넘어온 데이터를 처리하고, 변경된 결과를 리턴한다.
- addEvent : HTML 개체에 이벤트를 일괄적으로 추가하는 역할을 한다.
실습 예제
이제 위의 패턴을 이용해서 간단한 예제를 만들고, 실행할 것이다.
index.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<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
1 2 3 4 5 6 7 8 9 |
// 데이터 정의 var data1 = { name: "신짱구", age: 5 } var data2 = { name: "나미리", age: 22 } |
Module.Example.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 |
// 클래스 정의 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); |