JavaScriptの定番デザインパターンシングルトンパターンを詳しく解説-jsチュートリアル-php.cn

JavaScriptの定番デザインパターンシングルトンパターンを詳しく解説

黄舟

リリース： 2017-03-20 11:09:18

オリジナル

1527 人が閲覧しました

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

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

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

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

一

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

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

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

var createMask = function(){
return document,body.appendChild(  document.createElement(p)  );
}
$( ‘button’ ).click( function(){
Var mask  = createMask();
mask.show();
})

ログイン後にコピー

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

2 番目のオプションを見てみましょう。この p をページの先頭に作成してから使用します。

変数

を参照してください。

var mask = document.body.appendChild( document.createElement( ”p’ ) );
$( ”button’ ).click( function(){
mask.show();
} )

ログイン後にコピー

これは確かにページ上にマスクレイヤー p を作成するだけですが、おそらく別の問題が発生し、このマスクレイヤーは p の場合は無駄になります。 DOM ノード上の操作は非常に手間がかかるはずです

p が作成されたかどうかを判断するために変数を使用できたらどうでしょうか?

var mask;
var createMask = function(){
if ( mask ) return mask;
else{
mask = document,body.appendChild(  document.createElement(p)  );
return mask;
}
}

ログイン後にコピー

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

まず第一に、この関数には、関数本体内で外部変数マスクへの参照が変更されるため、createMask は安全ではありません。一方で、グローバル変数マスクは必要ありません。

var createMask = function(){
var mask;
return function(){
return mask || ( mask = document.body.appendChild( document.createElement(‘p’) ) )
}
}()

ログイン後にコピー

は変数マスクをラップするために、少なくとも createMask 関数では閉じられています。この時点で、シングルトンパターンは単純すぎると感じるでしょう。実際、デザインパターンの概念に注意を払ったことがなくても、日常のコードでいくつかのデザインパターンを使用したことがあります。何年も前に、老人のカートが何であるかを理解したときと同じように、これも老人のカートであることがわかりました。ソフトウェア開発で、

プログラマー

が特定のパターンを使用したことを明確に認識していない場合、次回はより適切な設計を見逃す可能性があります (この一節は「まつもとゆきひろのプログラミングの世界」から引用しています)。

本題に戻ります。、以前のシングルトンにはまだ欠点があります。独自の xhr オブジェクトを作成する関数を作成する必要がある場合はどうすればよいですか? js の関数は次のとおりです。最初のタイプは、関数をパラメーターとして渡すこともできることを意味します。最終的なコードを見てください。

var singleton = function( fn ){var result;return function(){return result || ( result = fn .apply( this, arguments ) );}}
var createMask = singleton( function(){
return document.body.appendChild( document.createElement(‘p’) );
})

ログイン後にコピー

最初の戻り値を保存するために変数を使用します。それが割り当てられている場合、その変数は後続の呼び出しで最初に返されます。実際にマスクレイヤーを作成するコードは

コールバック関数

を介してシングルトンラッパーに渡されます。このメソッドは実際には

ブリッジモードと呼ばれます。ブリッジモードについては後ほど説明します

。は完璧ではありませんが、p の参照を保存するには変数の結果が必要です。残念ながら、js の関数特性は宣言とステートメントを完全に排除するのに十分ではありません

古典的なJavaScriptデザインパターン、Strategyパターンの詳細な説明

JavaScriptデザインパターン、古典的なシンプルなファクトリーパターンのコード例

JavaScriptデザインパターンのObserverパターンの詳細な紹介

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