JavaScript デザインパターン戦略パターン例_JavaScript スキル

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

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

コードをコピーします コードは次のとおりです:

$( div ).animate( {“left: 200px”}, 1000, ‘linear’ ); // 均一モーション
$( div ).animate( {“left: 200px”}, 1000, ‘cubic’ ); // 三次イージング

これらの 2 行のコードは両方とも、div を 1000 ミリ秒以内に右に 200 ピクセル移動させます。リニア (均一速度) とキュービック (キュービック イージング) は、戦略パターンをカプセル化しています。

別の例を見てみましょう。今年の前半に書いた dev.qplus.com では、多くのページに即時検証フォームがあり、フォームの各メンバーにはいくつかの異なる検証ルールがあります。

たとえば、名前ボックスでは、空でないこと、機密性の高い単語ではないこと、文字が長すぎることを確認する必要があります。 もちろん、問題を解決するために if else を 3 つ書くこともできますが、この方法でコードを書くことの拡張性と保守性は容易に想像できます。フォームにさらに多くの要素があり、より多くの状況を検証する必要がある場合、合計で数百の if else を記述することも不可能ではありません。

したがって、より良いアプローチは、戦略パターン内で各検証ルールを個別にカプセル化することです。どのような種類の検証が必要な場合は、ポリシーの名前を指定するだけで済みます。このように:

コードをコピーします コードは次のとおりです:

nameInput.addValidata({
notNull: true、
汚い言葉: true、
最大長: 30
})

notNull、maxLength、およびその他のメソッドは、検証に合格したかどうかを示すために一律に true または false を返すだけで済みます。

コードをコピー コードは次のとおりです:

validataList = {

notNull: function( value ){
戻り値 !== ”;
}、
maxLength: function( value, maxLen ){
戻り値.length() > maxLen;
}
}

ご覧のとおり、さまざまな検証ルールを簡単に変更したり、相互に置き換えたりすることができます。ある日、プロダクト マネージャーが文字制限を 60 文字に変更することを提案したとします。作業はわずか0.5秒で完了します。