溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要為大家展示了JavaScript中單例模式是什么，內容簡而易懂，希望大家可以學習一下，學習完之后肯定會有收獲的，下面讓小編帶大家一起來看看吧。
單例模式也稱為單體模式，其中：
1，單體模式用于創建命名空間，將系列關聯的屬性和方法組織成一個邏輯單元，減少全局變量。
邏輯單元中的代碼通過單一的變量進行訪問。
2，三個特點：
① 該類只有一個實例；
② 該類自行創建該實例，即在該類內部創建自身的實例對象；
③ 向整個系統公開這個實例接口
3，單體模式有四種基本形式：
第一種，最簡單的單體，只被實例化一次 我簡記為json對象
（1）基本結構
var userInfo={//已經自行被實例化 其實是一json對象
name:"測試名稱",
dept:"測試PD",
code:"測試PD001",
getName:function () {
return "測試"
}
};（2）使用方法與json的使用方法一致：使用點 " . "的方式訪問
alert(userInfo.getName())
單體模式用來劃分命名空間，并將一群相關的屬性和方法組織到一起的簡單介紹：
var comm={};//一個空對象
comm.userInfo={//空對象下的第一個命名空間
name:"命名空間1下的",
code:"001"
}
comm.funcInfo={//空對象下的第二個命名空間
funcName:"命名空間2下的",
code:"002"
}總結：該種方式可以看出對象的變量值不是動態加載的，而且對象沒有顯示初始化，由此有了第二種單體模式。
第二種，具有局部變量的單體
要求:模擬一個使用ajax從數據庫加載數據的過程
（1）簡單模擬一下ajax過程
//模擬一個Ajax操作
function Ajax() {};//空對象
//靜態函數 模擬作為從數據庫取值 此處值寫死的
Ajax.request=function (url,fn) {
//默認永遠回調成功
if(true){
fn("測試值1","測試值2")
}
}（2）在最簡單的單體中出現了數據不是動態從數據庫加載的，而且沒有顯示實例化對象，此處使用閉包原理解決上述問題
//使用閉包的原理解決：動態從數據庫加載數據 ，顯示實例化
var userInfo=(function () {
//（1）利用閉包使單體有自己的私有局部變量
var name="";
var code="";
//（2）利用ajax訪問數據庫取到數據
Ajax.request("url",function (n,c) {//由于模擬的ajax中只是簡單傳遞參數，所以第一個參數可以任意
name=n;
code=c;
})
//（3）單體實現私有變量的賦值
return {
name:name,
code:code
}
})()（3）使用該種方式的單體，不用實例化 可以直接返回一個單體 【因為使用userInfo時，直接return一個單體回來】
alert(userInfo.name);
總結：
（1）優點，靈活
（2）弊端：return 單體數據量比較大時，都需要從數據庫取數據，每次加載都要執行，會影響程序性能。由于該種方式每次加載都要直接執行，return單體數據量大時會影響呈現的性能，于是有了第三種單體模式。
第三種，惰性單體 提供的解決方案為：調方法時才實例化單體，而不是加載時就執行。
于是在第二種的基礎上進行修改為，
（1）模擬ajax從數據庫加載數據不變
//模擬一個Ajax操作
function Ajax() {}
//靜態函數 模擬作為從數據庫取值
Ajax.request=function (url,fn) {
//默認永遠回調成功
if(true){
fn("測試值1","測試值2")
}
}（2）動態從數據庫加載數據 ，顯示實例化，使用一個函數（Init()）封裝產生單體的函數，通過一個私有變量來返回函數（Init()）
//使用閉包的原理解決：動態從數據庫加載數據 ，顯示實例化
var UserInfo=(function () {
var userInfo="";//私有變量
function Init() {//在產生單體方式為包裹一層初始化函數
//利用閉包使單體有自己的私有局部變量
var name="";
var code="";
//利用ajax訪問數據庫取到數據
Ajax.request("url",function (n,c) {
name=n;
code=c;
})
//單體
return {
name:name,
code:code,
}
}
return {//此時開始調用初始化函數實現單體的產生
getInstance:function () {
if(userInfo){//userInfo=""為false
return userInfo;
}else {
userInfo=Init();
return userInfo;
}
}
}
})()（3）使用 訪問UserInfo對象里面的獲取初始化獲取對象的函數（getInstance()）
alert(UserInfo.getInstance().name);
總結：使用惰性單體實質上是通過對產生單體的函數進行再一次封裝（使用函數封裝），再在通過該類提供的唯一接口（getInstance()方法）訪問初始化單體 的函數。
第四種，分支單體
簡單的用處：做Ajax的時候根據不同的瀏覽器獲得不同的XHR。（將瀏覽器之間的差異封裝到動態方法，適用于解決瀏覽器之間的差異。）
比如下面一個簡單的例子：在電腦不同分辨率的情況下初始化不一樣的界面。（這里只是彈窗顯示而已）
（1）獲取電腦的分辨率
//得到機器的分辨率 var screenWidth=window.screen.width;//width var screenHeight=window.screen.height;//height
（2）進行分支判斷處理 ，將差異封裝到動態方法中
var portalInfo=(function () {
//單體
var $1280_1024={info:'1,2,3,5'}//單體1
var $1366_768={info:'4,2,1,2'}//單體2
//動態圖選擇瀏覽器的差異結果（這里是分辨率）
if(screenWidth==1280){
return $1280_1024;//返回單體進行初始化
}else if(screenWidth==1366){
return $1366_768;//返回單體進行初始化
}else {
throw new Error("請檢查你當前的電腦分辨率")
}
})();（3）使用 ，獲取最終的結果
alert(portalInfo.info)//我的結果為4,2,1,2 這是由于我的電腦的分辨率為1366*768
總結一下，對于分支單體有一個缺點：分支中，單體1和單體2都被創建了，并保存在內存中了，但只用到一個。需要在 計算時間 和 占用內存 兩者中取舍。
以上就是關于JavaScript中單例模式是什么的內容，如果你們有學習到知識或者技能，可以把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
