JavaScript 데코레이터 및 자동 접근자

JavaScript 데코레이터를 만드는 방법과 자동 접근자를 사용하여 개발자 환경을 개선하는 방법을 안내합니다.

목차

• 컨텍스트 및 사양
• 서문
• 자동 접속자
• 데코레이터 만들기
  • 간단한 데코레이터
  • 데코레이터를 통한 유효성 검사
  • 데코레이터 옵션
• 메타데이터

상황 및 사양

GitHub의 데코레이터 제안은 이미 데코레이터의 기본 사용 사례를 훌륭하게 분석하고 있습니다. 내 목표는 해당 예제를 재현하는 것이 아니라 덜 알려진 기능과 상호 작용을 강조하는 것입니다. 또한 이 시리즈의 다음 기사에서는 단일 클래스 속성에서 여러 데코레이터를 구성하거나 연결하는 방법을 강조하겠습니다.

머리말

각 코드 샘플에는 대화형 Babel REPL 플레이그라운드에 대한 링크가 함께 제공되므로 폴리필을 설정하거나 저장소를 가동할 필요 없이 직접 사용해 볼 수 있습니다. 모든 예제에서 왼쪽 상단(설정 아래)에 있는 "평가" 옵션이 선택되어 있어야 합니다. 즉, 코드를 보고, 편집하고, 브라우저의 개발자 콘솔을 열고 거기에서 로그/결과를 볼 수 있다는 의미입니다.

데코레이터용 폴리필을 자세히 살펴보고 싶지 않다면 Babel REPL 오른쪽에 있는 트랜스파일된 코드에 주의할 필요가 없습니다. Babel REPL의 왼쪽 부분에서는 코드를 편집하고 작성하여 직접 사용해 볼 수 있습니다.

강조하자면 개발자 도구의 콘솔에는 콘솔 로그가 표시되어야 합니다. 그렇지 않은 경우 왼쪽 상단의 평가가 선택되어 있는지 확인하세요.

자동 접근자

데코레이터 사양의 중요한 기능은 자동 접근자입니다. 먼저 데코레이터가 무엇인지, 자동 접근자를 사용하면 데코레이터 작성이 어떻게 더 쉬워지는지 알아보겠습니다.

데코레이터 제안에서는 자동 접근자를 여기에 설명합니다. 그러나 궁극적으로 이는 단순한 기능입니다. 기본 작업 예제인 Babel REPL을 살펴보겠습니다.

class MyClass {
  accessor myBoolean = false
}

이 클래스 정의에서는 접근자 키워드가 속성 이름 앞에 옵니다. 그러나 이것이 아직 속성에 대해 실제로 아무것도 변경하지 않았습니다. 다음으로 자동 접근자가 데코레이터와 결합될 때 얼마나 유용한지 살펴보겠습니다.

(정적 접근자 myBoolean = false와 같은 자동 접근자와 함께 static을 사용할 수도 있습니다)

데코레이터 만들기

자동 접근자를 사용하는 이유를 더 잘 이해하기 위해 몇 가지 데코레이터를 만들어 보겠습니다.

간단한 데코레이터

구문에 대한 아이디어를 얻기 위해 실제로 많은 일을 하지 않는 데코레이터와 자동 접근자를 결합하는 것부터 시작하겠습니다.

다음은 내부 변수를 유지하고 클래스의 속성을 통해 해당 변수를 가져오고 설정할 수 있게 해주는 기능적 데코레이터입니다: Babel REPL

function simpleDecorator(value, context) {
  let internalValue = false
  return {
    get() {
      return internalValue
    },
    set(val) {
      internalValue = val
      return internalValue
    }
  }
}

class MyClass {
  @simpleDecorator
  accessor myBoolean
}

이 데코레이터는 get()과 set()이라는 두 가지 메서드를 사용하여 객체를 반환합니다. 이는 자동 접근자의 데코레이터가 한 곳에서 속성에 대한 setter와 getter를 모두 "장식"하거나 래핑할 수 있는 방법입니다. simpleGetterDecorator 및 simpleSetterDecorator를 생성할 필요가 없습니다. 대신 자동 접근자를 사용하여 이를 단일 정의로 결합하여 더 쉽게 만들었습니다.

결국 이 기능은 지금까지 꽤 정상적인 기능처럼 보입니다. 소개하기에 아주 좋습니다!

데코레이터를 사용한 검증

이 기사의 나머지 부분을 준비하기 위해 실제로 일종의 유효성 검사를 수행하도록 데코레이터를 업데이트하겠습니다. 우리는 짝수만 설정할 수 있고 다른 것은 아무것도 설정할 수 없는 데코레이터를 만들 것입니다. 그 모습은 다음과 같습니다: Babel REPL

function onlyEvenNumbers(value, context) {
  let internalNumber = 0
  return {
    get() {
      return internalNumber
    },
    set(val) {
      const num = Number(val)
      if(isNaN(num)) {
        // don't set the value if it's not a number or coerced to a number
        return internalNumber
      }
      if(num % 2 !== 0) {
        // don't allow odd numbers
        return internalNumber
      }
      internalNumber = val
      return internalNumber
    }
  }
}

class MyClass {
  @onlyEvenNumbers
  accessor myEvenNumber
}

그래서 set() 메서드에 논리를 추가하면 이제 클래스에서 myEvenNumber 속성을 설정하려는 모든 사람이 해당 유효성 검사 논리를 거치게 됩니다. 좋아요.

데코레이터 옵션

이제 멋진 짝수 데코레이터가 생겼으니 원하는 숫자 유형을 구성하는 옵션을 사용하여 짝수와 홀수를 모두 처리하도록 만들어 보겠습니다.

다행히도 이것은 우리가 여기서 작성하고 있는 상당히 평범해 보이는 JavaScript이므로 이러한 방식으로 작동하도록 구성하는 것은 그리 어렵지 않습니다. 옵션을 받는 함수로 원래 데코레이터를 래핑한 다음 데코레이터를 반환합니다. 바벨 REPL

function evensOrOdds(onlyEvens = true) {
  return function decorator(value, context) {
    let internalNumber = 0
    return {
      get() {
        return internalNumber
      },
      set(val) {
        const num = Number(val)
        if(isNaN(num)) {
            // don't set the value if it's not a number
            return internalNumber
        }
        if(num % 2 !== (onlyEvens ? 0 : 1)) {
            return internalNumber
        }
        internalNumber = val
        return internalNumber
      }
    }
  }
}

class MyClass {
  @evensOrOdds(true)
  accessor myEvenNumber

  @evensOrOdds(false)
  accessor myOddNumber
}

이제 임의의 옵션을 받아들이도록 데코레이터를 구성했습니다. 이를 통해 데코레이터 사용자는 동작을 맞춤 설정할 수 있습니다. 응.

메타데이터

데코레이터가 활용할 수 있는 추가 도구 중 하나는 context.metadata입니다. 이 개체는 각 데코레이터에 전달되며 다양한 용도로 사용할 수 있지만 메타데이터 개체는 모든 데코레이터의 모든 호출에 대해 동일하므로 주의해야 합니다.

계속 학습

단일 속성에 데코레이터를 구성(또는 여러 개 적용)하는 방법을 알아보려면 시리즈의 다음 게시물을 계속하세요!

위 내용은 JavaScript 데코레이터 및 자동 접근자의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!