[JavaScript] 자바스크립트 클래스 (2)

※ 함수단위 코딩 vs 클래스 단위 코딩

 - 함수 단위 코딩을 하든 클래스 단위 코딩을 하든 같은 결과물이 나올 수 있다. 하지만 굳이 어려운 클래스 코딩으로 해야하는 이유는 무었일까?

1. 함수단위의 코딩은 동일한 함수가 중복해서 만들어질 수 있다.

          아래에서 처럼 tabMenu()함수를 사용하면 똑같은 함수가 중복되서 만들어진다.

          이러한 문제점은 프로토 타입으로 클래스를 만들어 작성하면 해결이 된다.

ex)

<scripy>

    $(document).ready(function(){

              tabMenu("#tabMenu1");                      

              tabMenu("#tabMenu2");       

  

              function tabMenu(selector){

                  $tabMenu = $(select);

                  //tabMenu 함수의 내부 함수들

                  function inner1 (){

                        ...

                  }            

                   function inner2 (){

                        ...

                   }            

           function inner3 (){

                        ...

                   }            

              }

    })

</script>

2. 외부에서 내부 속성과 함수를 접근할 수 없다. 

          그렇기 때문에 몇번째 탭메뉴가 클릭된 상태인지 전역변수로 인덱스를 저장해 놓은 경우가 있었을 것이다. 

          하지만 클래스 방식으로 객체단위로 코딩하면 외부에서 인스턴스화를 통해 객체를 만들어 

          객체  내부의 속성(프로퍼티)와 함수(메서드)에 접근가능하다.

          물론 이러한 문제는 함수 단위의 코딩으로도 해결할 수 있는 방법이 있다. 아래 참조

ex) 

$(document).ready(function(){

    

    var tab1 = tabMenu("#tabMenu1");

    tab1.setSelectItemAt(1)

       var tab2 = tabMenu("#tabMenu2");

    tab2.setSelectItemAt(2)

})

function tabMenu(selector){

    

    ....

    

    //리턴값을 아래와 같이 해주면 외부에서 함수 접근이 가능하다.

    return {

        "setSelectItemAt" : setSelectItemAt

    }

}

 - 이처럼 객체 단위로 코딩을 하는 경우 클래스 단위 코딩이 훨씬 유용하다.

※ 인스턴스 프로퍼티와 메서드 vs 클래스 프로퍼티와 메서드

 - 여태까지 프로퍼티와 메서드 들은 클래스를 인스턴스화 시켜 객체로 만든 후 접근하는 방법으로 사용하였다.

   var class = new Class();

   하지만 위와같이 인스턴스를 만들지 않고도 클래스를 만들 수 있다.

클래스이름.프로퍼티;

클래스이름.메서드이름();

   그렇다면 이렇게 클래스에서 인스턴스화 하지 않고 바로 프로퍼티와 메서드를 사용하는 경우는 어떤경우가 있을까?

1. 유틸리티성 기능      

ex)

//0에서 10사이 랜덤숫자 만들기

Math.floor(Math.random()*10);

// 두 수중 큰 숫자 값 알아내기

Math.max(10,20);

Math라는 클래스에서 floor(), random(), max() 라는 클래스 내부의 메서드를 사용하여 유틸리티 기능을 사용

클래스에서 메서드를 실행한다고 해서 Math 클래스 내부에 처리 결과가 남거나 하지않는다. 단지 사용할 뿐...

2. 실행하더라도 내부 데이터에 영향을 주지 않고 독립적으로 실행되는 기능 혹은 정보를 담을때
   

userClass.version = "1.0"

userClass.getInfo = function(){

    var info = {

        developer : "홍길동",

        desc : "홍길동이 생성한 클래스입니다."

    }

}

클래스의 버전을 알 수 있는 version이라는 프로퍼티와 개발자 정보를 알 수 있는 getInfo라는 메서드를 추가 했다.

추가 내용은 실행하거나 없더라도 userClass가 동작하는데 전혀 지장을 주지 않는다.

 - 바로 위와 같은 방식으로 클래스의 프로퍼티와 메서드를 사용한다.

※ 패키지

 - 연관있는 클래스를 묶을 때 사용하는 기술, 패키지가 모여 라이브러리가 된다.

자바스크립트에서 패키지와 자바와같은 일반 프로그래밍에서의 패키지는 형태가 조금다르다. 

일반 프로그래밍에서는 

package ade.utils; (패키지명)

public class 클래스이름 {

    ...

}

이런 형태이지만 자바스크립트에서의 패키지는 오브젝트 리터럴을 이용한다. 빈 오브젝트를 만들어 이곳에 클래스를 담아 사용한다.

var packageName = {}

혹은

var packageName = new Object();

packageName.className = function(){

    ...

}