기본 JavaScript 디자인 패턴 — 팩토리, 반복자 및 데코레이터

https://www.amazon.com/John-Au-Yeung/e/B08FT5NT62에서 Amazon에서 내 책을 확인하십시오.

지금 http://jauyeung.net/subscribe/에서 내 이메일 목록을 구독하십시오.

JavaScript를 사용하면 많은 일을 할 수 있습니다. 때로는 구문이 너무 관대합니다.

코드를 구성하려면 몇 가지 기본 디자인 패턴을 사용해야 합니다. 이 기사에서 우리는 팩토리, 이터레이터, 데코레이터를 살펴볼 것입니다.

빌트인 개체 공장

JavaScript의 표준 라이브러리에는 여러 팩토리 메서드가 있습니다.

여기에는 Object  , Boolean  , Number  , String  , Array  가 포함됩니다.

예를 들어 다음과 같이 Boolean 팩토리 함수를 사용할 수 있습니다.

const bool = Boolean(1);

1이 참이므로 bool는 true입니다.

그들이 하는 모든 일은 우리가 전달하는 것에 따라 다른 객체나 값을 반환합니다.

그들 중 많은 사람들이 유용합니다. 그러나 Object 생성자는 객체 리터럴로 객체를 생성할 수 있기 때문에 그다지 유용하지 않습니다.

반복자

JavaScript에는 ES6부터 반복자가 있습니다.

따라서 이 패턴을 구현하기 위해 처음부터 아무것도 작성할 필요가 없습니다.

찾고자 하는 값을 순차적으로 반환하려면 제너레이터 함수를 사용하기만 하면 됩니다.

그런 다음 내장next 함수를 호출하여 생성기가 생성기 함수에서 반환된 후 반환된 값을 얻을 수 있습니다.

예를 들어 다음과 같이 작성할 수 있습니다.

const numGen = function*() {
  while (true) {
    yield (Math.random() * 100).toFixed(1);
  }
}

생성기 함수를 생성합니다.

제너레이터 함수는 function* 키워드로 표시됩니다. function 키워드 뒤에 별표가 있습니다.
yield 키워드는 다음 값을 순차적으로 반환합니다.

그런 다음 다음과 같이 난수를 반환하는 데 사용할 수 있습니다.

const nums = numGen();
console.log(nums.next().value);
console.log(nums.next().value);
console.log(nums.next().value);

먼저 반복자를 반환하기 위해 numGen를 호출합니다.

그런 다음 nums.next().value를 호출하여 원하는 값을 얻습니다.

유한한 수의 값을 반환하는 생성기 함수도 사용할 수 있습니다.

예를 들어 다음과 같이 작성할 수 있습니다.

const numGen = function*() {
  const arr = [1, 2, 3];
  for (const a of arr) {
    yield a;
  }
}

const nums = numGen();
let value = nums.next().value;
while (value) {
  console.log(value);
  value = nums.next().value;
}

위의 코드에서 배열의 항목을 순서대로 반환하도록 numGen 함수를 변경했습니다.

이런 식으로 루프에서 next 메서드를 호출하여 next 메서드로 항목을 순서대로 가져올 수 있습니다.
value 속성 외에도 next 메서드에서 반환된 객체에는 done 속성도 있습니다.

따라서 다음과 같이 작성할 수 있습니다.

const nums = numGen();
let {
  done,
  value
} = nums.next();

while (!done) {
  console.log(value);
  const next = nums.next();
  done = next.done;
  value = next.value;
}

모든 값이 반환되면 done 가 true 로 설정됩니다.

추가 기능

더 많은 기능을 원하면 자체 반복자를 구현해야 합니다.

예를 들어 되감기 기능을 원하면 다음과 같이 자체 반복기를 만들 수 있습니다.

const iterator = (() => {
  const arr = [1, 2, 3];
  let index = 0;
  return {
    next() {
      index++;
      return arr[index];
    },
    rewind() {
      index--;
      return arr[index];
    }
  }
})();

다음next 항목으로 이동하는 arr 메서드와 이전rewind 항목으로 이동하는 arr 메서드가 있는 배열을 추가했습니다.

그런 다음 다음과 같이 iterator를 사용할 수 있습니다.

console.log(iterator.next());
console.log(iterator.rewind());

그리고 우리는 다음을 봅니다.

2
1

콘솔 로그 출력에서.

데코레이터

데코레이터를 사용하면 즉석에서 개체에 기능을 추가할 수 있습니다.

JavaScript에는 이제 데코레이터가 있으므로 이를 사용하여 자체 데코레이터를 만들고 즉석에서 개체를 변경할 수 있습니다.

예를 들어 다음과 같이 만들 수 있습니다.

const foo = () => {
  return (target, name, descriptor) => {
    descriptor.value = "foo";
    return descriptor;
  };
};

class Foo {
  @foo()
  bar() {
    return "baz";
  }
}

const f = new Foo();
console.log(f.bar);

JavaScript의 데코레이터는 target  , name 및 descriptor   매개변수가 있는 함수를 반환하는 함수일 뿐입니다.
descriptor는 속성 설명자이므로 value  , writable  , enumerable 속성을 설정할 수 있습니다.

우리의 foo 데코레이터는 value 속성을 문자열 'foo' 로 변환했습니다.

따라서 Foo 인스턴스의 bar 속성이 메서드 대신 문자열'foo'이 됩니다.

JavaScript 데코레이터는 아직 실험적인 구문이므로 Babel이 사용하기 위해 필요합니다.

결론

JavaScript에는 객체를 생성할 수 있는 다양한 팩토리 함수가 있습니다.
Object , Boolean , Number , String 함수 등이 있습니다.

JavaScript에는 반복자에 대한 기본 제공 지원이 있습니다. 그러나 그것이 제공하는 더 많은 기능을 원한다면 우리 자신의 기능을 구현해야 합니다.

데코레이터는 JavaScript에 존재하므로 이를 사용하여 속성을 수정하는 데코레이터를 만들 수 있습니다.