데코레이터 소개 및 관련 튜토리얼

Decorator 소개

Decorator는 표현식에 주석을 달아 클래스나 메소드를 확장할 수 있는 함수입니다. 데코레이터는 모든 클래스나 속성에 적용될 수 있습니다. 예:

@myDecorator class A {} // 作用class

@myDecorator
doSomething() {}  // 作用表达式

Javascript Decorator는 아직 ES7 제안 상태입니다. 이 기능에 대한 자세한 진행 상황을 보려면 Proposal-Decorators를 방문하세요.

데코레이터 원리

객체의 속성이나 메서드를 변경할 때 누구나 분명히 Object.defineProperty(obj, prop, descriptor) 메서드를 떠올릴 것입니다. 이 메서드를 통해 동작이나 동작을 쉽게 수정하거나 다시 작성할 수 있습니다. Vue에서 언급한 양방향 바인딩은 set 및 get 메소드를 재정의하여 수행됩니다. 따라서 공식적으로 Decorator를 사용하기 전에 이를 달성하기 위해 Object.defineProperty 메소드를 사용합니다. 먼저 이 메서드를 간략하게 이해해 보겠습니다.

/**

• obj: 속성을 수정해야 하는 객체

• prop: 수정해야 하는 객체의 속성 이름

• descriptor: 속성의 특정 동작을 정의하는 데 사용되는 설명 객체
  **/
  Object.defineProperty(obj, prop, descriptor)

descriptor 속성 설명

• configurable: 속성 개체를 구성할 수 있는지 여부를 정의합니다. 즉, false인 경우 수정을 정의하는 설명 작업(쓰기 가능, 가져오기 등)이 유효하지 않습니다

• 열거 가능: for-in 또는 Object.keys 열거를 통해 탐색할 수 있는지 여부

• value: 객체 값 속성을 정의합니다. 값은 숫자, 객체, 함수 등이 될 수 있습니다.

• writable: 값을 덮어쓸 수 있는지 여부를 정의합니다.

• get: 값 속성에 액세스할 때 트리거되는 함수 객체

• set: a 값 속성 설정 시 트리거되는 함수 객체

속성을 readonly로 수정

Object.defineProperty의 기본 구문을 이해한 후, 먼저 이를 통해 간단하게 읽기 전용 인스턴스를 구현했습니다. 구체적인 코드는 다음과 같습니다.

Decorator의 기본 구문 및 사용법

``javascript
# 定义
function myDecoration(target, name, descriptor) {}

# 对property使用
 class A {
 @myDecorator
 test() {}
 }

 # 对class使用
 @myDecorator
 class A {}

 # 带参数
 function myDescorator(a) {
 return function (target, name, descriptor) {
 console.llog('params:', a)
 }
 }
 @myDescorator(a) 
 class A {}

 # 时使用多个装饰器（Decorator)
 @myDecorator1
 @myDecorator2
 class A {}

Decorator 구문 설탕을 사용하여 속성을 읽기 전용(readonly)으로 수정합니다.

Decorator를 사용하여 PureRender for React 구성 요소를 캡슐화합니다.

우리 모두는 React 라이프 사이클 구성 요소가 true 또는 false를 반환하여 구성 요소를 다시 렌더링할지 여부를 결정하는 shouldComponentUpdate 메서드가 있습니다. 즉, 이 방법을 통해 일부 유효하지 않은 데이터 렌더링 이벤트를 필터링하여 성능을 향상시킬 수 있습니다. 예를 들어 props가 전달한 데이터 객체를 비교합니다. props 객체의 속성과 값이 변경되지 않은 경우에는 render 메서드를 실행할 필요가 없습니다.

분명히 props 아래의 데이터 객체의 속성과 값이 변경되었는지 비교함으로써, 각 컴포넌트에 shouldComponentUpdate 메소드를 별도로 반복적으로 작성하는 대신 이 로직을 재사용할 수 있습니다. 구성 요소 개체의 메서드 동작을 변경하는 것에 대해 말하자면 여기서는

Decorator 기능을 사용하여 이를 수행할 수 있습니다. 즉, Decorator 개체의 shouldComponentUpdate를 재정의합니다. props 객체의 속성 및 값을 순회하여 이전 props의 속성 및 값과 비교하여 다시 렌더링이 필요한지 여부를 결정합니다. 구체적인 코드는 다음과 같습니다.

function isEqual(a, b) {
  for (const key in a) {
    if ({}.hasOwnProperty.call(a, key) &&
      (!{}.hasOwnProperty.call(b, key) || a[key] !== b[key])) {
      return false;
    }
  }
  for (const key in b) {
    if ({}.hasOwnProperty.call(b, key) && !{}.hasOwnProperty.call(a, key)) {
      return false;
    }
  }
  return true;
}

export default function pureRender(targetComponent) {
  targetComponent.prototype.shouldComponentUpdate = function (props, state) {
    return !isEqual(this.state, state) || !isEqual(this.props, props)
  }
}

// 使用
@pureRender
class ComponentA extends React.Component {}

Using Decorator through Babel

Decorator는 ES7에서 드래프트이므로 이제 Bable을 통해 사용해야 합니다. 사용 방법은 다음과 같습니다.

Install

npm install --save-dev babel-plugin-transform-decators

Use

방법 1, .babelrc

{
  "plugins": ["transform-decorators"]
}

방법 2를 통해 CLI

babel --plugins 변환-데코레이터 script.js

메소드 3. Node API를 통해

require("babel-core").transform("code", {
  plugins: ["transform-decorators"]
});

Summary

객체나 메소드에 직접 추가 로직을 작성할 필요가 없는 데코레이터를 사용하면 다음을 수행할 수 있습니다. 개체나 메서드를 확장하는 기능은 기능적 요구 사항을 충족할 뿐만 아니라 코드를 단순화하고 이미 일반적인 @log, @test, @mixin 및 기타 도구 클래스와 같은 코드의 유지 관리 가능성을 보장합니다. 따라서 향후 작업에서 더 많은 것을 시도할 수 있습니다.

참조

• Es7 JavaScript 데코레이터

• Decorator 사양

• EcmaScript 데코레이터 탐색

• Object.defineProperty

• Babel 레거시 데코레이터 플러그인

• core-designators

위 내용은 Decorator 소개 및 관련 튜토리얼입니다. 모두에게 도움이 되었으면 좋겠습니다.

먼저 추천:

자바스크립트의 데코레이터 예제 기능에 대한 자세한 설명

데코레이터 데코레이터에 대한 자세한 설명 및 예제

php 디자인 모드 데코레이터(데코레이션 모드)

위 내용은 데코레이터 소개 및 관련 튜토리얼의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!