ホームページ  >  記事  >  ウェブフロントエンド  >  JavaScriptを深く理解するシリーズ(25):デザインパターンのシングルトンパターンを詳しく解説_基礎知識

JavaScriptを深く理解するシリーズ(25):デザインパターンのシングルトンパターンを詳しく解説_基礎知識

WBOY
WBOYオリジナル
2016-05-16 16:11:30917ブラウズ

はじめに

この章から、JavaScript で使用されるさまざまなデザイン パターンの実装を徐々に紹介していきます。ここでは、パターン自体の理論についてはあまり紹介せず、実装についてのみ説明します。はい、正式に始まりました。

従来の開発エンジニアにとって、シングルトンとは、クラスにインスタンスが 1 つだけ存在することを保証するものであり、インスタンスが存在するかどうかを最初に判断し、存在しない場合はそれを直接返します。これにより、クラスにはインスタンス オブジェクトが 1 つだけ存在することが保証されます。 JavaScript では、シングルトンは名前空間プロバイダーとして機能し、グローバル名前空間からオブジェクトへの一意のアクセス ポイントを提供します。

テキスト

JavaScript では、シングルトンを実装する方法が数多くあります。最も簡単な方法の 1 つは、多数のプロパティとメソッドを含めることができるオブジェクト リテラルを使用することです。

コードをコピー コードは次のとおりです:
var mySingleton = {
プロパティ 1: 「何か」、
プロパティ 2: 「他のもの」、
方法1: function () {
console.log('hello world');
}
};

後でこのオブジェクトを拡張する場合は、独自のプライベート メンバーとメソッドを追加し、クロージャを使用してこれらの変数と関数の宣言をその内部にカプセル化できます。公開するパブリック メンバーとメソッドのみを公開します。サンプル コードは次のとおりです。

var mySingleton = function () {

/* ここでプライベート変数とメソッドを宣言します */ var privateVariable = 'プライベートなもの';

関数 showPrivate() {
console.log(privateVariable);
}

/* パブリック変数とメソッド (プライベート変数とメソッドにアクセス可能) */

戻り値 {

publicMethod: function () {
showPrivate();
}、
publicVar: '一般の人もこれを見ることができます!'
};
};

var single = mySingleton();

single.publicMethod(); // 'プライベートなもの' を出力します

console.log(single.publicVar); // 出力「一般の人もこれを見ることができます!」


上記のコードは非常に優れていますが、使用するときのみ初期化したい場合はどうすればよいでしょうか?リソースを節約するために、次のように、これらのコードを別のコンストラクターで初期化できます。

コードをコピーします コードは次のとおりです: var シングルトン = (関数 () {
var がインスタンス化されました;
関数 init() {
/*ここにシングルトンコードを定義します*/
return {
publicMethod: function () {
console.log('hello world');
},
publicProperty: 'テスト'
};
}

リターン {
getInstance: function () { if (!インスタンス化) {

インスタンス化 = init();
}
インスタンス化された戻り値;
}
};
})();

/*パブリック メソッドを呼び出してインスタンスを取得します:*/
Singleton.getInstance().publicMethod();

シングルトンの実装方法はわかりましたが、シングルトンはどのようなシナリオで使用するのが最適でしょうか?実際、シングルトンは通常、システム間のさまざまな通信モードを調整するために使用されます。次のコードはシングルトンのベスト プラクティスです。

コードをコピーします コードは次のとおりです:
var SingletonTester = (function () {
//パラメータ: シングルトンに渡されるパラメータのセット

関数 Singleton(args) {

// args 変数を受け取ったパラメータまたは空 (指定されていない場合) に設定します

var args = args ||
//名前パラメータを設定します
This.name = 'SingletonTester';
//pointXの値を設定します
This.pointX = args.pointX || // 受け取ったパラメータから取得するか、デフォルト値に設定します
//pointY
の値を設定します This.pointY = args.pointY || 10;

}

//インスタンスコンテナ

var インスタンス;

var _static = {

名前: 'SingletonTester'、

//インスタンスを取得するメソッド

// シングルトン インスタンスを返します
getInstance: function (args) {
If (インスタンス === 未定義) {
インスタンス = new Singleton(args);
}
インスタンスを返す;
}
};
_static を返す;
})();

var singletonTest = SingletonTester.getInstance({ pointX: 5 });

console.log(singletonTest.pointX); // 出力 5

その他の実装方法

方法 1:

コードをコピーします コードは次のとおりです:
function Universe() {
// インスタンスが存在するかどうかを判断します

If (typeof Universe.instance === 'object') {
return Universe.instance;
}

// その他のコンテンツ

This.start_time = 0;
This.bang = "ビッグ";

// キャッシュ

Universe.instance = this;

// 暗黙的にこれを返します

}

//テスト

var uni = 新しい Universe();
var uni2 = 新しい Universe();
console.log(uni === uni2) // true

方法 2:

コードをコピーします コードは次のとおりです:
function Universe() {
// キャッシュされたインスタンス

var インスタンス = this;

// その他のコンテンツ

This.start_time = 0;
This.bang = "ビッグ";

// コンストラクターをオーバーライドします

Universe = function () {
return インスタンス;
};
}

//テスト

var uni = 新しい Universe();
var uni2 = 新しい Universe();
uni.bang = "123";
console.log(uni === uni2) // true
console.log(uni2.bang); // 123

方法 3:

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

function Universe() {

// キャッシュインスタンス
var インスタンス;

// リコンストラクター関数
Universe = function Universe() {
return インスタンス;
};

// 後処理プロトタイプのプロパティ
Universe.prototype = this;

// 例
インスタンス = new Universe();

// コンストラクター ポインターをリセットします
Instance.constructor = Universe;

// その他の関数
Instance.start_time = 0;
Instance.bang = "ビッグ";

インスタンスを返します;
}


// テスト
var uni = 新しい Universe();
var uni2 = 新しい Universe();
console.log(uni === uni2) // true

//プロトタイプ属性を追加します
Universe.prototype.nothing = true;

var uni = new Universe();

Universe.prototype.everything = true;

var uni2 = 新しい Universe();

console.log(uni.nothing) // true
console.log(uni2.nothing) // true
console.log(uni.everything) // true
; console.log(uni2.everything) // true
console.log(uni.constructor === Universe); // true

方法 4:

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

var ユニバース;

(関数() {

変数インスタンス;

Universe = function Universe() {

if (インスタンス) {
インスタンスを返す;
}

インスタンス = this;

// その他のコンテンツ
This.start_time = 0;
This.bang = "ビッグ";
};
} ());

//テストコード
var a = 新しいユニバース();
var b = 新しいユニバース();
アラート(a === b) // true
a.bang = "123";
アラート(b.bang); // 123

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。