欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

javascript 設(shè)計模式之單體模式 面向?qū)ο髮W(xué)習(xí)基礎(chǔ)

 更新時間：2010年04月18日 01:09:56   作者：  
單體是在腳本加載時創(chuàng)建的，能將一系列有關(guān)聯(lián)的變量和方法組織為一個邏輯單元，邏輯單元里面的內(nèi)容通過單一的變量進(jìn)行訪問，也是筆記基礎(chǔ)與常用的面向?qū)ο蟮亩x方法。
單體模式（singleton）

單體是在腳本加載時創(chuàng)建的，能將一系列有關(guān)聯(lián)的變量和方法組織為一個邏輯單元，邏輯單元里面的內(nèi)容通過單一的變量進(jìn)行訪問；

一個單體主要分為三部分

用于訪問內(nèi)部信息的入口變量（如：Sky）
屬性（如：nickName/age/timeInfo）
方法（如：sayHello）

基本結(jié)構(gòu)

復(fù)制代碼 代碼如下:

var Sky = {

/*
* 作用一，變量管理
*/

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

/*
* 作用二，加載中初始化變量
* 在加載過程中執(zhí)行并初始化Sky.info
*/

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

/*
* 作用三，函數(shù)管理，讓你的函數(shù)看起來不再那么散亂
*/

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

}
//所有內(nèi)部信息通過Sky這個變量進(jìn)行訪問；
alert(Sky.timeInfo);


以下是更詳細(xì)的說明，看完了這篇文章，相信你應(yīng)該差不多了解了，網(wǎng)上好多高手的js寫法了，單體模式很常用。

單體是一個用來劃分命名空間并將一批相關(guān)的屬性和方法組織在一起的對象，如果他可以被實例化，那么他只能被實例化一次。
單體模式是javascript里面最基本但也是最有用的模式之一。
特點：

. 可以來劃分命名空間，從而清除全局變量所帶來的危險。
. 利用分支技術(shù)來來封裝瀏覽器之間的差異。
. 可以把代碼組織的更為一體，便于閱讀和維護(hù)。

單體的基本結(jié)構(gòu)（正確寫法）：

復(fù)制代碼 代碼如下:

/*Basic Singleton*/
var Singleton = ｛
attribute1：true,
attribute2:10,
method1:function(){},
　　　　　method2:function(){}
｝;

劃分命名空間：
復(fù)制代碼 代碼如下:

var box = {
width:0,
height:0,
getArea:function(){
return this.width*this.height;//js中對象成的訪問必須是顯示的，即this是不能省略的
},
init:function(w,h){
// width = w;
// height = h;這種方式相當(dāng)于定義了兩個全局變量，（沒加var聲明的變量為全局變量）
// 并不是對對象width和height的賦值
//下面是正確的
this.width = w;
this.height = h;
}
}//box劃分了一個命名空間，命名空間里的變量只在空間里有效

上面的單體中的所有的成員以及方法都是公有的（public），也就是在單體的外部可以對他們進(jìn)行任意的改動，那為什么說單體提供了一個命名空間呢？

我們繼續(xù)：
復(fù)制代碼 代碼如下:

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進(jìn)行初始化，所以會報錯，這樣改一下：
復(fù)制代碼 代碼如下:

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);
}

發(fā)現(xiàn)可以了，由于init和 getArea所用的width和height并不是歸單體所有的變量，而是一個全局變量，所以我們可以在單體外面進(jìn)行隨意調(diào)用而不受影響

如果我們這樣寫一下就更明白了：

復(fù)制代碼 代碼如下:

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);
}

這樣寫又會報錯了，可見我們以上的方式對于全局變量并沒有建立起一個命名空間，全局變量為我們帶來了危險。所以最上面的寫法是對的，我們來驗證一下：
復(fù)制代碼 代碼如下:

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已經(jīng)沒有干擾了，因為單體為單體中的width和height建立了一個命名空間。

成員的屬性：

討論完命名空間，我們來對單體變量和方法的屬性做一下設(shè)定。學(xué)過其他語言的人（java，c++，c#...）都應(yīng)該很了解其中類成員的public和private，
雖然在javascript中沒有這么嚴(yán)格的面向?qū)ο?oop)，但是我們可以借助閉包來進(jìn)行一個模仿，畢竟有的變量設(shè)為public是很不好的。

復(fù)制代碼 代碼如下:

var circle = (function(){
//pravite member!
var r = 5;
var pi = 3.1416;//后面用分號
return{//public member
getArea:function(){
return r*r*pi;//訪問私有成員不要加this
},//后面用逗號
//如果想改變r和pi的值，只能通過設(shè)置一個公有的函數(shù)來實現(xiàn)
init:function(setR){
r = setR;
}
}
})()
window.onload = function(){
circle.r = 0;//無法訪問私有成員,相當(dāng)于又為circle創(chuàng)建了一個共有成員r
alert(circle.getArea());
circle.init(0);//通過公有的工具函數(shù)便可以訪問了。
alert(circle.getArea());
};

私有變量、方法是只讀的，公有變量、方法是可讀可寫的
訪問：
對于私有成員，直接訪問即可，前面不用加任何修飾，
對于公有的訪問在單體作用域內(nèi)前面要加上“this.”，在單體作用域外前面要加上“circle.”（單體名字.）

呵呵，似乎有點味道了！
.利用分支技術(shù)來來封裝瀏覽器之間的差異
注意的地方：
a一定要用閉包，實現(xiàn)即時綁定
b每個分支之間用分號隔開
c最后返回的是分支的名字
d調(diào)用的時候用單體名+分支的方法名；
復(fù)制代碼 代碼如下:

// 利用單體的分支技術(shù)來定義XHR（XMLHttpRequest）對象,必須要用閉包才可以實現(xiàn)
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());
}

最后再啰嗦幾句：
對于單體據(jù)說是最常用的模式之一了，至于利弊嘛要在實踐中慢慢的體會了，由于本人也是初學(xué)，所以沒有太多的發(fā)言權(quán)，不足指出還忘高手指教

相關(guān)文章

最新評論