JavaScript 디자인 패턴 전략 패턴 example_javascript 기술

전략 패턴의 의미는 일련의 알고리즘을 정의하고 이를 하나씩 캡슐화하여 상호 교환 가능하게 만드는 것입니다.
작은 예를 보면 이를 명확하게 알 수 있습니다.

jquery의 애니메이션 메서드를 떠올려 보세요.

코드 복사 코드는 다음과 같습니다.

$( div ).animate( {“left: 200px”}, 1000, 'linear' ) // 균일한 움직임
$( div ).animate( {“left: 200px”}, 1000, 'cubic' ) // 3차 이징

이 두 줄의 코드는 모두 1000ms 내에 div를 오른쪽으로 200픽셀 이동시킵니다. 선형(균일 속도) 및 3차(3차 이징)는 전략 패턴을 캡슐화합니다.

또 다른 예를 들어보겠습니다. 제가 올해 상반기에 작성한 dev.qplus.com에는 양식의 각 구성원마다 서로 다른 확인 규칙이 있는 페이지가 많이 있습니다.

예를 들어 이름 상자에는 비어 있지 않은지, 민감한 단어인지, 문자가 너무 긴지 확인해야 합니다. 물론 문제를 해결하기 위해 세 가지 조건을 작성할 수도 있지만 이런 방식으로 코드를 작성하는 것의 확장성과 유지 관리성은 상상할 수 있습니다. 양식에 더 많은 요소가 있고 더 많은 상황을 확인해야 한다면, 총 수백 개의 if else를 작성하는 것이 불가능하지 않습니다.

따라서 더 나은 접근 방식은 각 유효성 검사 규칙을 전략 패턴에 별도로 캡슐화하는 것입니다. 어떤 종류의 확인이 필요한 경우 정책 이름만 제공하면 됩니다. 이렇게:

코드 복사 코드는 다음과 같습니다.

nameInput.addValidata({
notNull: 사실,
dirtyWords: 사실,
최대 길이: 30
})

notNull, maxLength 및 기타 메소드는 확인 통과 여부를 나타내기 위해 true 또는 false를 균일하게 반환하기만 하면 됩니다.

코드 복사 코드는 다음과 같습니다.

validataList = {
notNull: 함수( 값 ){
반환 값 !== ”;
},
maxLength: 함수( 값, maxLen ){
return value.length() > maxLen;
}
}

보시다시피 다양한 유효성 검사 규칙을 쉽게 수정하고 서로 교체할 수 있습니다. 어느 날 제품 관리자가 글자수 제한을 60자로 변경하라고 제안한다면. 작업을 완료하는 데 걸리는 시간은 단 0.5초입니다.