JavaScriptの定番デザインパターンStrategy Patternを詳しく解説

戦略パターンの意味は、一連のアルゴリズムを定義し、それらを1つずつカプセル化し、交換可能にすることです。
小さな例を見てみましょう。

jquery の animate メソッドを思い出してください。

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

これら 2 行のコードはどちらも、p を 1000 ミリ秒以内に右に 200 ピクセル移動させます。線形 (均一速度) と三次 (三次イージング) は戦略モードです。

別の例です。今年の前半に書いた 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 デザインパターン Observer パターンの詳細な紹介

以上がJavaScriptの定番デザインパターンStrategy Patternを詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。