JavaScript デザイン パターン シングルトン パターン example_javascript スキル

「Practical Common Lisp」の著者である Peter Seibel はかつてこう言いました。パターンが必要な場合は、何かが間違っています。彼が言及する問題とは、言語に固有の欠陥があるため、普遍的な解決策を見つけて要約する必要があるということです。

弱い型付けか強い型付けか、静的言語か動的言語か、命令型言語か宣言型言語かに関係なく、すべての言語には固有の長所と短所があります。ジャマイカのアスリートは短距離走やボクシングでさえいくつかの利点を持っていますが、ヨガの練習には欠けています。

ウォーロックとシャドウプリーストは簡単に優れたサポートになりますが、メイコンを背中に乗せてマップ上を飛び回る敵のメイジは少し扱いに​​くいでしょう。 プログラムに切り替えると、静的言語でデコレータを実装するには多大な労力がかかるかもしれませんが、js はいつでもオブジェクトにメソッドをスローできるため、js ではデコレータ パターンは役に立たなくなりました。

JavaScript のデザイン パターンについて説明している本は比較的少ないですが、『Pro JavaScript Design Patterns』は古典的なものですが、その中の例は非常に冗長なので、私が仕事で書いたコードと組み合わせました。要約します。私の理解に相違がある場合は、遠慮なく修正してください。

1. シングルトンモード

シングルトン パターンの定義は、クラスの一意のインスタンスを生成することですが、js 自体は「クラスレス」言語です。 JS デザイン パターンについて説明する多くの記事では、シングルトンとして {} が使用されていますが、これはほとんど意味がありません。 js でオブジェクトを生成する方法はたくさんあるので、より意味のある別のシングルトンを見てみましょう。

ボタンをクリックすると、ページ上にマスク レイヤーがポップアップする必要があるという一般的な要件があります。たとえば、クリックして web.qq.com にログインしたとき。

灰色の背景マスク レイヤーを生成するこのコードは、非常に簡単に作成できます。

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

var createMask = function(){
return document,body.appendChild( document.createElement(div) );
}
$( ‘ボタン’ ).click( function(){
変数マスク = createMask();
マスク.show();
})

問題は、このマスク レイヤーがグローバルに一意であるため、createMask が呼び出されるたびに新しい div が作成されることです。ただし、マスク レイヤーを非表示にするときにそれを削除することはできますが、これは明らかに不合理です。

2 番目のオプションを見てみましょう。ページの先頭にこの div を作成し、変数を使用してそれを参照します。

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

varマスク = document.body.appendChild( document.createElement( ”div' ) );
$( ”ボタン' ).click( function(){
マスク.show();
} )

この方法では、ページ上にマスク レイヤー div が 1 つだけ作成されますが、別の問題が発生する可能性があります。これにより、別の div が無駄になり、DOM ノードでの操作は不要になります。とてもケチです。

変数を使用して div が作成されたかどうかを判断できるとしたらどうなるでしょうか?

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

var マスク;
var createMask = function(){
if (マスク) return マスク;
それ以外{
マスク = document,body.appendChild( document.createElement(div) );
マスクを返す;
}
}

これで、単一列オブジェクトを生成する関数が完成しました。このコードの何が問題なのかを詳しく見てみましょう。

まず、この関数には、関数本体内で外部変数マスクへの参照が変更されるという副作用があります。一方、createMask は、グローバル変数です。マスクは絶対に必要というわけではありません。また改善しましょう。

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

var createMask = function(){
var マスク;
return function(){
マスクを返す || (マスク = document.body.appendChild( document.createElement('div') ) )
}
}()

変数マスクをラップするために単純なクロージャが使用されます。少なくとも createMask 関数では、クロージャは閉じられています。

これを見て、シングルトン パターンは単純すぎると感じるかもしれません。実際、デザイン パターンの概念に一度も注目したことがなくても、その一部は日常生活で無意識に使用されています。何年も前に、私が老人のベビーカーを理解したときと同じように、これは老人のベビーカーであることがわかりました。

GOF の 23 のデザイン パターンも、ソフトウェア開発で古くから存在し、繰り返し使用されてきたパターンです。プログラマーが特定のパターンを使用したことを明確に認識していないと、次回はより適切なデザインを見逃してしまう可能性があります。この一節は「まつもとゆきひろのプログラミングの世界」から引用しています)。

話題に戻りますが、以前のシングルトンにはまだ欠点があります。固有の xhr オブジェクトを作成する関数を作成する必要がある場合はどうすればよいでしょうか?

js の関数は最初のタイプです。つまり、関数をパラメーターとして渡すこともできます。

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

var singleton = function( fn ){
var 結果;
return function(){
結果を返す || ( result = fn .apply( this, argument ) );
}
}
var createMask = singleton( function(){
return document.body.appendChild( document.createElement('div') );
})

変数を使用して、最初の戻り値がすでに割り当てられている場合は、実際にマスク層を作成するコードがコールバック関数を通じてシングルトンに渡されます。このメソッドは実際にはブリッジモードと呼ばれます。ブリッジモードについては少し後で説明します。

ただし、シングルトン関数は完全ではありません。div の参照を格納するには変数の結果が必要です。残念ながら、js の関数特性は宣言とステートメントを完全に排除するのに十分ではありません。