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

자바스크립트로 OOP 스타일의 개발을 위해 필요한 개념에 관해 알아보려고 한다.

데이터 타입

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

JSON

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

JSON에 대한 자세한 내용은 다음 링크를 참고한다. JSON의 개요

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

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

주요 용어

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

객체의 특징

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

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

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

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

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

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

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

실습 예제

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

index.html

data.js

Module.Example.js

 

댓글 남기기

이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다