本文實例講述了JavaScript設(shè)計模式---單例模式.分享給大家供大家參考，具體如下：

單例模式也稱為單體模式，其中：

1，單體模式用于創(chuàng)建命名空間，將系列關(guān)聯(lián)的屬性和方法組織成一個邏輯單元，減少全局變量。　邏輯單元中的代碼通過單一的變量進行訪問。

2，三個特點：　① 該類只有一個實例；　② 該類自行創(chuàng)建該實例，即在該類內(nèi)部創(chuàng)建自身的實例對象；　③ 向整個系統(tǒng)公開這個實例接口

3，單體模式有四種基本形式：

第一種，最簡單的單體，只被實例化一次 我簡記為json對象

（1）基本結(jié)構(gòu)

var userInfo={//已經(jīng)自行被實例化 其實是一json對象 name:'測試名稱', dept:'測試PD', code:'測試PD001', getName:function () { return '測試' } };

（2）使用方法與json的使用方法一致：使用點 ' . '的方式訪問

alert(userInfo.getName())

單體模式用來劃分命名空間，并將一群相關(guān)的屬性和方法組織到一起的簡單介紹：

var comm={};//一個空對象 comm.userInfo={//空對象下的第一個命名空間 name:'命名空間1下的', code:'001' } comm.funcInfo={//空對象下的第二個命名空間 funcName:'命名空間2下的', code:'002' }

總結(jié)：該種方式可以看出對象的變量值不是動態(tài)加載的，而且對象沒有顯示初始化，由此有了第二種單體模式。

第二種，具有局部變量的單體

要求:模擬一個使用ajax從數(shù)據(jù)庫加載數(shù)據(jù)的過程

（1）簡單模擬一下ajax過程

//模擬一個Ajax操作 function Ajax() {};//空對象 //靜態(tài)函數(shù) 模擬作為從數(shù)據(jù)庫取值 此處值寫死的 Ajax.request=function (url,fn) { //默認永遠回調(diào)成功 if(true){ fn('測試值1','測試值2') } }

（2）在最簡單的單體中出現(xiàn)了數(shù)據(jù)不是動態(tài)從數(shù)據(jù)庫加載的，而且沒有顯示實例化對象，此處使用閉包原理解決上述問題

//使用閉包的原理解決：動態(tài)從數(shù)據(jù)庫加載數(shù)據(jù) ，顯示實例化 var userInfo=(function () { //（1）利用閉包使單體有自己的私有局部變量 var name=''; var code=''; //（2）利用ajax訪問數(shù)據(jù)庫取到數(shù)據(jù) Ajax.request('url',function (n,c) {//由于模擬的ajax中只是簡單傳遞參數(shù)，所以第一個參數(shù)可以任意 name=n; code=c; }) //（3）單體實現(xiàn)私有變量的賦值 return { name:name, code:code } })()

（3）使用該種方式的單體，不用實例化 可以直接返回一個單體 【因為使用userInfo時，直接return一個單體回來】

alert(userInfo.name);

總結(jié)：

（1）優(yōu)點，靈活

（2）弊端：return 單體數(shù)據(jù)量比較大時，都需要從數(shù)據(jù)庫取數(shù)據(jù)，每次加載都要執(zhí)行，會影響程序性能。由于該種方式每次加載都要直接執(zhí)行，return單體數(shù)據(jù)量大時會影響呈現(xiàn)的性能，于是有了第三種單體模式。

第三種，惰性單體 提供的解決方案為：調(diào)方法時才實例化單體，而不是加載時就執(zhí)行。

于是在第二種的基礎(chǔ)上進行修改為，

（1）模擬ajax從數(shù)據(jù)庫加載數(shù)據(jù)不變

//模擬一個Ajax操作 function Ajax() {} //靜態(tài)函數(shù) 模擬作為從數(shù)據(jù)庫取值 Ajax.request=function (url,fn) { //默認永遠回調(diào)成功 if(true){ fn('測試值1','測試值2') } }

（2）動態(tài)從數(shù)據(jù)庫加載數(shù)據(jù) ，顯示實例化，使用一個函數(shù)（Init()）封裝產(chǎn)生單體的函數(shù)，通過一個私有變量來返回函數(shù)（Init()）

//使用閉包的原理解決：動態(tài)從數(shù)據(jù)庫加載數(shù)據(jù) ，顯示實例化 var UserInfo=(function () { var userInfo='';//私有變量 function Init() {//在產(chǎn)生單體方式為包裹一層初始化函數(shù) //利用閉包使單體有自己的私有局部變量 var name=''; var code=''; //利用ajax訪問數(shù)據(jù)庫取到數(shù)據(jù) Ajax.request('url',function (n,c) {name=n;code=c; }) //單體 return {name:name,code:code, } } return {//此時開始調(diào)用初始化函數(shù)實現(xiàn)單體的產(chǎn)生 getInstance:function () {if(userInfo){//userInfo=''為false return userInfo;}else { userInfo=Init(); return userInfo;} } } })()

（3）使用 訪問UserInfo對象里面的獲取初始化獲取對象的函數(shù)（getInstance()）

alert(UserInfo.getInstance().name);

總結(jié)：使用惰性單體實質(zhì)上是通過對產(chǎn)生單體的函數(shù)進行再一次封裝（使用函數(shù)封裝），再在通過該類提供的唯一接口（getInstance()方法）訪問初始化單體 的函數(shù)。

第四種，分支單體

簡單的用處：做Ajax的時候根據(jù)不同的瀏覽器獲得不同的XHR。（將瀏覽器之間的差異封裝到動態(tài)方法，適用于解決瀏覽器之間的差異。）

比如下面一個簡單的例子：在電腦不同分辨率的情況下初始化不一樣的界面。（這里只是彈窗顯示而已）

（1）獲取電腦的分辨率

//得到機器的分辨率 var screenWidth=window.screen.width;//width var screenHeight=window.screen.height;//height

（2）進行分支判斷處理 ，將差異封裝到動態(tài)方法中

var portalInfo=(function () { //單體 var $1280_1024={info:’1,2,3,5’}//單體1 var $1366_768={info:’4,2,1,2’}//單體2 //動態(tài)圖選擇瀏覽器的差異結(jié)果（這里是分辨率） if(screenWidth==1280){ return $1280_1024;//返回單體進行初始化 }else if(screenWidth==1366){ return $1366_768;//返回單體進行初始化 }else { throw new Error('請檢查你當前的電腦分辨率') } })();

（3）使用 ，獲取最終的結(jié)果

alert(portalInfo.info)//我的結(jié)果為4,2,1,2 這是由于我的電腦的分辨率為1366*768

總結(jié)一下，對于分支單體有一個缺點：分支中，單體1和單體2都被創(chuàng)建了，并保存在內(nèi)存中了，但只用到一個。需要在 計算時間 和 占用內(nèi)存 兩者中取舍。

感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運行工具：http://tools.jb51.net/code/HtmlJsRun測試上述代碼運行效果。

更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《javascript面向?qū)ο笕腴T教程》、《JavaScript錯誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運算用法總結(jié)》

希望本文所述對大家JavaScript程序設(shè)計有所幫助。