JavaScript デザイン パターン - シングル モード オブジェクト指向の学習の基礎_js オブジェクト指向

シングルトン モード (シングルトン)

シングルトンは、スクリプトがロードされるときに作成され、一連の関連する変数とメソッドを論理ユニットに編成でき、論理ユニット内のコンテンツは次のようになります。

単一のエンティティは主に 3 つの部分に分かれています

内部情報へのアクセスに使用されるエントリ変数 (例: Sky)
属性 (例:nickName/age/timeInfo)
メソッド (例:sayHello)

基本構造

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

var Sky = {

/*
* 関数 1 、変数管理
*/

nickName: "sky"、
age: "26"、

/*
* 関数 2、ロード中に変数を初期化
* 読み込み処理中に Sky を実行して初期化します。 .info
*/

timeInfo: function()
{
var _year = new Date().getFull Year()
; return _year;
}(),

/*
* 関数 3、関数管理。関数が散在しているように見えなくなります。
*/

sayHello: function ()
{
alert("hello, world!");
}

}
//すべての内部情報は変数
alert( Sky.timeInfo);

この記事を読めば、インターネット上に多くの専門家が書いているので、ほぼ理解できると思います。 js であり、シングル モードが非常によく使用されます。

シングルトンは、名前空間を分割し、関連するプロパティとメソッドのグループをまとめて編成するために使用されるオブジェクトです。インスタンス化できる場合、インスタンス化できるのは 1 回だけです。
シングル モードは、JavaScript で最も基本的なモードの 1 つですが、最も便利なモードでもあります。
機能:

。名前空間を分割して、グローバル変数によって引き起こされる危険性を排除できます。
。ブランチング技術を使用してブラウザ間の違いをカプセル化します。
。コードをより統合して整理できるため、読みやすく、保守しやすくなります。

モノマーの基本構造 (正しい書き方):

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

/*Basic Singleton*/
var Singleton = ｛
attribute1: true,
attribute2:10,
method1:function( ){}
コードをコピーします

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

var box = { width:0,

height:0 , getArea:function(){ return this.width*this.height; //js 内のオブジェクトへのアクセスは明示的に行う必要があります。つまり、これを省略することはできません }, init: function(w,h){ // width = w; // height = h; このメソッドは 2 つのグローバル変数を定義するのと同じです (var なしで宣言された変数はグローバル変数です)

//オブジェクトの幅と高さの割り当てではありません

//以下は正しいです
this.width = w;
this.height = h;
}
}//ボックスは名前空間を分割します。名前空間内 変数は空間


内でのみ有効です。 上記のモノマー内のすべてのメンバーとメソッドはパブリックです。つまり、モノマーの外部で任意に変更できます。シングルトンは名前空間を提供しますか?


続けましょう:





コードをコピーします

コードは次のとおりです:
var box = {
width:0,

height:0,//単一変数 getArea:function(){ return width*height;//width in 、実際には高さは単一の変数ではなく、init } init:function(w,h){ width = w; height = h;

}//init の幅と高さは実際には単一の変数ではありません

window.onload = function(){
var init = box.getArea();
alert(init );


init の幅と高さは初期化されていないため、エラーが報告されます:




コードをコピーします。


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


var box = {

width:0,
height:0,
getArea:function() {

return width*height; init:function(w,h){ width = w; } window.onload = function(){ width = 0; height = 0;

var init = box.getArea();

アラート(初期化);
}


init と getArea で使用される幅と高さはモノマーが所有する変数ではなく、グローバル変数であるため、影響を受けることなくモノマーの外部でランダムな呼び出しを行うことができることがわかりました。次のように書くとわかりやすくなります:

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

var box = {

width:0,
height:0,
getArea:function(){
return width*height;//js 内のオブジェクトへのアクセスは表示、つまり省略できません
},
init:function(w,h){
width = w;
height = h;
} //ここでの幅、高さは実際には単一のオブジェクトではありません
window.onload = function(){
width = 0;
var width = box.getArea(); >alert (width);
}


このように書くとエラーが報告されます。上記の方法ではグローバル変数の名前空間が確立されていないことがわかります。また、グローバル変数は危険をもたらします。 。上の記述は正しいので、確認してみましょう:

コードをコピーします

コードは次のとおりです: var box = { width:2, height:2,

getArea:function(){

return this.width*this.height; // js 内のオブジェクトへのアクセスrequired が表示されます。つまり省略できません。
},
init:function(w,h){
this.width = w;
this.height = h;
}
window.onload = function(){
width = 0;
height = 0;
var width = box.getArea(); 🎜 >}


シングルトンはシングルトン内の幅と高さの名前空間を確立しているため、window.onload の幅と高さには干渉がないことがわかります。


メンバーの属性:


名前空間について説明した後、単一の変数とメソッドの属性を設定しましょう。他の言語 (java、c、c#...) を学習したことがある人は、クラス メンバーのパブリックとプライベートについてよく知っているはずですが、

JavaScript にはそのような厳密なオブジェクト指向 (oop) はありません。結局のところ、いくつかの変数を public に設定するのは非常に悪いです。



コードをコピー


コードは次のとおりです。

var Circle = (function( ){ //pravite member! var r = 5; var pi = 3.1416;//後でセミコロンを使用しますreturn{//public member getArea:function(){

return r*r*pi;//プライベートメンバーにアクセスするときはこれを追加しないでください

}, //その後はカンマを使用してください
//rとpiの値を変更したい場合は、パブリック関数を設定することによってのみ実行できます
init:function(setR){
r = setR;
}
}
})()
window.onload = function( ){
circle.r = 0 ;//プライベートメンバーにアクセスできません。これはサークルのパブリックメンバー r を作成するのと同じです
alert(circle.getArea())
circle.init(0) );//公共ユーティリティ関数を使用できます。
alert(circle.getArea());
};



パブリック変数とメソッドは読み取りおよび書き込み可能です

アクセス:
プライベート メンバーの場合は、先頭を変更せずに直接アクセスできます。
パブリック アクセスの場合は、単一スコープ内でその前に「this.」を追加する必要があります。単一のスコープ。"circle." (単一の名前。) を先頭に追加する必要があります。

はは、味があるようです。
。ブランチ技術を使用してブラウザ間の違いをカプセル化します注: a インスタント バインディングを実現するには必ずクロージャを使用してください
b 各ブランチをセミコロンで区切ります
c を開くと、最終的に名前が返されますブランチの
d. 呼び出すときは、シングルトン名を持つブランチのメソッド名を使用します。


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

//単一分岐テクノロジを使用して XHR (XMLHttpRequest) オブジェクトを定義します。このオブジェクトはクロージャを使用して実装する必要があります。
var XHR = (function(){
// 3 つの分岐
var標準 = {
cXHR:function(){
return new XMLHttpRequest();
}
};
var activeXNew = {
cXHR:function(){
return new ActiveXObject('Msxml2.XMLHttp');
}
}
var activeXOld = {
cXHR:function(){
return new ActiveXObject('Microsoft.XMLHttp' ); 🎜>}
};
//ブランチを割り当てるには、失敗しないものをすべて返します。
try{
testObject = standard.cXHR ();
return standard;// エラーがスローされなかった場合はこのブランチを返す
}catch(e){
try{
testObject = activeXNew.cXHR();
}catch(e){
try{
testObject = activeXOld.cXHR();
return activeXOld;
throw new Error( ' XMLHttpRequestObject が失敗しました!');
}
}
}
})();
window.onload = function(){
alert(XHR.cXHR() ;私も初心者なので、指摘するほどの発言力はなく、専門家からのアドバイスを忘れてしまいます。