溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章給大家分享的是有關(guān)如何使用Javascript實(shí)現(xiàn)單例模式的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過來看看吧。
JavaScript是一種直譯式的腳本語言，其解釋器被稱為JavaScript引擎，是瀏覽器的一部分，JavaScript是被廣泛用于客戶端的腳本語言，最早是在HTML網(wǎng)頁上使用，用來給HTML網(wǎng)頁增加動態(tài)功能。
單例模式也稱為單體模式，規(guī)定一個(gè)類只有一個(gè)實(shí)例，并且提供可全局訪問點(diǎn)；
在讀這篇文章之前，也許你對單例模式的概念感到模糊或者不清楚，但是其實(shí)在日常的開發(fā)中你肯定用到過單例模式；
JavaScript中沒有類的定義，單例模式的特點(diǎn)是”唯一“和”全局訪問“，那么我們可以聯(lián)想到JavaScript中的全局對象，利用ES6的let不允許重復(fù)聲明的特性，剛好符合這兩個(gè)特點(diǎn)；是的，全局對象是最簡單的單例模式；
let obj = {
name:"咸魚",
getName:function(){}
}上述代碼中可以知道obj就是一個(gè)單例，因?yàn)閛bj剛好就符合單例模式的兩大特點(diǎn)："唯一"和"可全局訪問"；
但是我們并不建議這么實(shí)現(xiàn)單例，因?yàn)槿謱ο?全局變量會有一些弊端：
污染命名空間（容易變量名沖突）維護(hù)時(shí)不容易管控 (搞不好就直接覆蓋了)
分析：只能有一個(gè)實(shí)例，所以我們需要使用if分支來判斷，如果已經(jīng)存在就直接返回，如果不存在就新建一個(gè)實(shí)例；
let Singleton = function(name){
this.name = name;
this.instance = null;
}
Singleton.prototype.getName = function(){
console.log(this.name);
}
Singleton.getInstance = function(name){
if(this.instace){
return this.instance;
}
return this.instance = new Singleton(name);
}
let winner = Singleton.getInstance("winner"); //winner
console.log(winner.getName());
let sunner = Singleton.getInstance("sunner"); //winner
console.log(sunner.getName())上面代碼中我們是通過一個(gè)變量instance的值來進(jìn)行判斷是否已存在實(shí)例，如果存在就直接返回this.instance，如果不存在，就新建實(shí)例并賦值給instance；
但是上面的代碼還是存在問題，因?yàn)閯?chuàng)建對象的操作和判斷實(shí)例的操作耦合在一起，并不符合”單一職責(zé)原則“；
思路：通過一個(gè)閉包，來實(shí)現(xiàn)判斷實(shí)例的操作；
閉包警告：不理解閉包的同學(xué)請先學(xué)習(xí)閉包
let CreateSingleton = (function(){
let instance = null;
return function(name){
this.name = name;
if(instance){
return instance
}
return instance = this;
}
})()
CreateSingleton.prototype.getName = function(){
console.log(this.name);
}
let winner = new CreateSingleton("winner"); //winner
console.log(winner.getName());
let sunner = new CreateSingleton("sunner"); //winner
console.log(sunner.getName())通過代理的形式，將創(chuàng)建對象的操作和實(shí)例判斷的操作進(jìn)行解耦拆分，實(shí)現(xiàn)更小粒度的劃分，符合”單一職責(zé)原則“；
let ProxyCreateSingleton = (function(){
let instance = null;
return function(name){
if(instance){
return instance
}
return instance = new Singlton(name);
}
})();
let Singlton = function(name){
this.name = name;
}
Singlton.prototype.getName = function(){
console.log(this.name);
}
let winner = new ProxyCreateSingleton("winner");
console.log(winner.getName());
let sunner = new ProxyCreateSingleton("sunner");
console.log(sunner.getName());上面的代碼中，ProxyCreateSingleton()只負(fù)責(zé)判斷實(shí)例，Singlton只負(fù)責(zé)創(chuàng)建對象和賦值；
我們經(jīng)常會有這樣的場景：頁面多次調(diào)用都有彈窗提示，只是提示內(nèi)容不一樣；
這個(gè)時(shí)候我們可以立馬想到是單例模式，彈窗就是單例實(shí)例，提示內(nèi)容是參數(shù)傳遞；我們可以用惰性單例模式來實(shí)現(xiàn)它；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="loginBtn">有夢想的咸魚</div>
</body>
<script>
let getSingleton = function(fn) {
var result;
return function() {
return result || (result = fn.apply(this, arguments)); // 確定this上下文并傳遞參數(shù)
}
}
let createAlertMessage = function(html) {
var div = document.createElement('div');
div.innerHTML = html;
div.style.display = 'none';
document.body.appendChild(div);
return div;
}
let createSingleAlertMessage = getSingleton(createAlertMessage);
document.getElementById('loginBtn').onclick=function(){
let alertMessage = createSingleAlertMessage('看來真的是個(gè)咸魚');
alertMessage.style.display = 'block';
}
</script>
</html>惰性單例是指的是頁面開始加載的時(shí)候我們的實(shí)例是沒有進(jìn)行創(chuàng)建的，是當(dāng)我們點(diǎn)擊頁面的div之后才開始創(chuàng)建實(shí)例（按需創(chuàng)建），這可以提高我們的網(wǎng)頁性能，加快我們的頁面渲染速度；
感謝各位的閱讀！關(guān)于“如何使用Javascript實(shí)現(xiàn)單例模式”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識，如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機(jī)網(wǎng)站二維碼