javascript設計モードの単体モードは対象に向かって基礎を学びます.

6383 ワード

単体モード(singleton)
単体はスクリプトローディング時に作成され、一連の関連変数と方法を論理ユニットとして組織し、論理ユニット内の内容は単一の変数でアクセスできます.
一つの単体は主に三つの部分に分けられます.
内部情報にアクセスするための入口変数(例えば、Sky)
属性(例:nikName/age/timeInfo)
方法(例:sayHello)
基本構造
 
  
var Sky = {

/*
* ,
*/

nickName: "sky",
age: "26",

/*
* ,
* Sky.info
*/

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

/*
* , ,
*/

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

}
// Sky ;
alert(Sky.timeInfo);
以下はもっと詳しい説明です.この文章を読み終わったら、ほぼ理解したと思います.ネット上で多くの達人のjs書き方ができました.単体モードはよく使われています.
単体は名前空間を分割して関連する属性と方法を一緒に組織する対象です.もし彼が実用化できるなら、彼は一回だけ実用化されます.
単体モードはjavascriptの中で最も基本的であり、最も有用なモードの一つです.
特徴:
名前空間を分割して、グローバル変数による危険を取り除くことができます.
ブランチ技術を利用してブラウザ間の違いをパッケージ化する.
コードの組織をより一体にすることができ、読みやすく、維持にも便利です.
単体の基本構造(正確な書き方):
 
  
/*Basic Singleton*/
var Singleton = {
attribute1:true,
attribute2:10,
method1:function(){},
     method2:function(){}
};
名前空間を区切る:
 
  
var box = {
width:0,
height:0,
getArea:function(){
return this.width*this.height;//js , this
},
init:function(w,h){
// width = w;
// height = h; ,( var )
// width height
//
this.width = w;
this.height = h;
}
}//box ,
上の単体のすべてのメンバーと方法は公有です.つまり、単体の外部で彼らを任意に変更することができます.なぜ単体で名前空間を提供しましたか?
私たちは続けます
 
  
var box = {
width:0,
height:0,//
getArea:function(){
return width*height;// ,width,height , init
}
init:function(w,h){
width = w;
height = h;
}
}//init width,height
window.onload = function(){
var init = box.getArea();
alert(init);
}
initのwidth、heightは初期化されていませんので、エラーが発生します.このように変更します.
 
  
var box = {
width:0,
height:0,
getArea:function(){
return width*height;
},
init:function(w,h){
width = w;
height = h;
}
}
window.onload = function(){
width = 0;
height = 0;
//or box.init(0,0);
var init = box.getArea();
alert(init);
}
initとgetAreaで使用されているwidthとheightは単量体のすべての変数ではなく、グローバル変数であることが分かりましたので、影響を受けずに単量体の外で自由に呼び出すことができます.
このように書いたらもっと分かります.
 
  
var box = {
width:0,
height:0,
getArea:function(){
return width*height;//js , this
},
init:function(w,h){
width = w;
height = h;
}
}// width,height
window.onload = function(){
width = 0;
height = 0;
var width = box.getArea();
alert(width);
}
このように書くとまたエラーが発生します.以上の方法はグローバル変数にとって名前空間が作られていません.グローバル変数は私たちに危険をもたらしています.一番上の書き方は正しいです.検証してみます.
 
  
var box = {
width:2,
height:2,
getArea:function(){
return this.width*this.height;//js , this
},
init:function(w,h){
this.width = w;
this.height = h;
}
}
window.onload = function(){
width = 0;
height = 0;
var width = box.getArea();
alert(width);
}
window.onloadの中のwidthとheightはもう邪魔されていません.単体ではwidthとheightのために名前空間を作っています.
メンバーの属性:
名前空間について議論してから、単体変数と方法の属性を設定します.他の言語を勉強したことがある人(java、c+、cxi...)は、その中のクラスのメンバーのpublicとprvateをよく知るべきです.
javascriptの中ではこんなに厳しい対象に向かっていませんが、クローズドを使って模倣することができます.結局ある変数はpublicに設定するのはよくないです.
 
  
var circle = (function(){
//pravite member!
var r = 5;
var pi = 3.1416;//
return{//public member
getArea:function(){
return r*r*pi;// this
},//
// r pi ,
init:function(setR){
r = setR;
}
}
})()
window.onload = function(){
circle.r = 0;// , circle r
alert(circle.getArea());
circle.init(0);// 。
alert(circle.getArea());
};
プライベート変数、方法は読み取り専用です.共有変数、方法は読み取り可能です.
アクセス:
プライベートメンバーに直接訪問すればいいです.
公有に対する訪問は、単体の作用域の前に「this.」を追加し、単量体の作用域外の前に「circule.」(単体の名前.)を追加します.
へへ,ちょっと味がしました.
ブランチ技術を利用してブラウザ間の違いをパッケージ化する
注意する点:
a必ずクローズドし、即時バインディングを実現してください.
b各枝の間はセミコロンで仕切られている.
c最後に戻るのは分岐の名前です.
d呼び出し時は単体名+分岐の方法名を使用する.
 
  
// XHR(XMLHttpRequest) ,
var XHR = (function(){
//The three branches
var standard = {
cXHR:function(){
return new XMLHttpRequest();
}
};
var activeXNew = {
cXHR:function(){
return new ActiveXObject('Msxml2.XMLHttp');
}
};
var activeXOld = {
cXHR:function(){
return new ActiveXObject('Microsoft.XMLHttp');
}
};
//To assign( ) the branch, try each method;return whatever doesn't fail
var testObject;
try{
testObject = standard.cXHR();
return standard;// return this branch if no error was thrown
}catch(e){
try{
testObject = activeXNew.cXHR();
return activeXNew;
}catch(e){
try{
testObject = activeXOld.cXHR();
return activeXOld;
}catch(e){
throw new Error('Create the XMLHttpRequestObject failed!');
}
}
}
})();
window.onload = function(){
alert(XHR.cXHR());
}
最後にまた、くどいです.
単体については一番よく使われているモデルの一つと言われていますが、利害については実践の中でゆっくりと体得していきます.本人も初心者なので、発言権があまりないです.