고전적인 JavaScript 디자인 패턴에 대한 자세한 설명 Strategy Pattern

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

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

$( p ).animate( {“left: 200px”}, 1000, ‘linear’ );  //匀速运动
$( p ).animate( {“left: 200px”}, 1000, ‘cubic’ );  //三次方的缓动

이 두 줄의 코드는 모두 p를 1000ms 동안 오른쪽으로 200픽셀 이동하고 3차 함수로 만듭니다. (cubic easing)은 전략 패턴을 요약한 것입니다.

제가 올해 상반기에 작성한 dev.qplus.com에는 각 페이지마다 즉시 확인 양식이 있습니다. 회원에게는 다양한 확인 규칙이 있습니다.

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

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

nameInput.addValidata({
notNull: true,
dirtyWords: true,
maxLength: 30
})
而notNull，maxLength等方法只需要统一的返回true或者false，来表示是否通过了验证。
validataList = {
notNull: function( value ){
return value !== ”;
},
maxLength: function( value, maxLen ){
return value.length() > maxLen;
}
}

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

관련 기사:

JavaScript 디자인 패턴 클래식 단순 팩토리 패턴 코드 예제

JavaScript 디자인 패턴 클래식 싱글턴 패턴 자세한 설명

자바스크립트 디자인 패턴 중 옵저버 패턴에 대한 자세한 소개

위 내용은 고전적인 JavaScript 디자인 패턴에 대한 자세한 설명 Strategy Pattern의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!