es5 class 어떻게 구현하시나요?

JavaScript
1

이 질문의 요지는 es5에서 class 문법에 대한 질문은 아닙니다.

어떻게 코드를 작성하고 클래스를 구현하는지 공유받고자 합니다.

먼저 제가 작성한 코드의 예시를 보여드리겠습니다.

(function () {
    function Search () {
        // 1
        var _date = new Date()
        var _getToday = function () {
            var year = _date.getFullYear()
            var month = _date.getMonth() + 1
            var day = _date.getDate()

            return _dateToYyyyMmDd(year, month, day)
        }
        var _el = {
            dateFrom: document.getElementById('dateFrom'),
            ....
        }
        ....

        // 2
        this.getDateFrom = function () {
            return _el.dateFrom.value
        }
        this.api = function (param, callback) {
            //doSomething
        }
        
        // 3
        document.getElementById('dateFrom').value = '초기화값' 
    }
        
    var search = new Search()
    
    // 4
    document.getElementById('btnSearch').addEventListener('click', function(evt) {
        search.api(param, function (response) {
            // doSotemthing
        })
    })
}())

한 화면에서 검색조건을 관리하는 Search class가 소스에는 아래와 같은 것들이 있습니다.

  1. private 변수
    1.1. Date 객체 변수
    1.2. 오늘의 날짜를 구하는 함수 변수
    1.3. Search class와 관련있는 element 변수
  2. Search class의 static function
  3. Search class와 관련있는 element 값 초기화
  4. btnSearch id를 가진 element가 click 이벤트가 일어났을때 Search class의 api 함수를 호출,
    callback을 받아서 처리

이런식으로 코드를 작성하였습니다. 제가 궁금한점은 아래와 같습니다.

  1. class 에서 data만 관리하는지? 관련있는 element도 저처럼 변수로 선언하시는지?
  2. class 생성될 때, 관련있는 element의 초기값 설정같은 작업의 코드도 포함시키는지?

크게는 이런점들이 궁금하고, 저의 코드 예시를 보시고 많은 지적 부탁드립니다.

제가 묻고자하는 궁금점이 잘 전달되었는지 모르겠네요.
읽어주셔서 감사합니다.

2

객체지향 설계에 관한 내용같네요.
저도 아직 부족해서 잘 된 설계인지 아닌지를 파악하는 능력은 부족하지만, 혹시라도 클래스 설계해야할 일이 생기면 공개된 best practice(유명 기업의 오픈 소스)를 참조하는 편입니다.
아래 링크를 통해 힌트를 얻으실 수 있을 것 같습니다.

1개의 좋아요
3

답변 감사합니다^^

4

제가 궁금한건 객체지향 설계에 대한 궁금점보다는 class 내에서 dom을 조작하거나 이벤트를 처리하는 함수를 작성하는지 등의 내용이 궁금합니다. 오픈소소를 찾아봐도 잘 보이지않더라구요. node.js 환경의 예제들만 많이보이고…

제가 현재 개발하고 있는환경은 jsp에 vanilla javascript 입니다. jquery나 기타 라이브러리를 쓰기는 하지만요. 이런 환경에서 제가 이제껏 여러 시스템을 관리하거나 개발하면서 경험했을 때, 다들 기능에 대한 함수만 작성하여 이벤트처리만 하지 class를 만들어 데이터를 잘 관리하는 시스템 또는 작성하는 개발자를 보지못했습니다.

그래서 다른 많은 개발자들은 어떻게 작성하는지 궁금해서 질문글을 올렸습니다.

5

이글에 여러 의견이 있는것같습니다~

1개의 좋아요
6

링크 너무 감사합니다.

1개의 좋아요
7

저같은 경우에는 글쓴분께서 버튼눌렀을때의 api요청과 관련된 dom이벤트는 Search 생성자 함수에 넣어서 사용해요. 뭐 제가 작성하는 방법이 best pratice인지는 잘 모르겠지만 view관련 메소드와 data관련 메소드를 정리해서 사용중입니다. 클릭이벤트또한 생성자 함수 내부에 메소드로 만들어서 사용중입니다.