JavaScript設計模式——單例模式
單例模式也稱為單體模式，規定一個類只有一個例項，並且提供可全域性訪問點；
在讀這篇文章之前，也許你對單例模式的概念感到模糊或者不清楚，但是其實在日常的開發中你肯定用到過單例模式；
JavaScript中沒有類的定義，單例模式的特點是”唯一“和”全域性訪問“，那麼我們可以聯想到JavaScript中的全域性物件，利用ES6的let不允許重複宣告的特性，剛好符合這兩個特點；是的，全域性物件是最簡單的單例模式；
let obj = {
name:"鹹魚",
getName:function(){}
}
上述程式碼中可以知道obj就是一個單例，因為obj剛好就符合單例模式的兩大特點："唯一"和"可全域性訪問"；
但是我們並不建議這麼實現單例，因為全域性物件/全域性變數會有一些弊端：
- 汙染名稱空間（容易變數名衝突）
- 維護時不容易管控 (搞不好就直接覆蓋了)
簡單版單例模式：
分析：只能有一個例項，所以我們需要使用if分支來判斷，如果已經存在就直接返回，如果不存在就新建一個例項；
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())
上面程式碼中我們是通過一個變數instance的值來進行判斷是否已存在例項，如果存在就直接返回this.instance，如果不存在，就新建例項並賦值給instance；
但是上面的程式碼還是存在問題，因為建立物件的操作和判斷例項的操作耦合在一起，並不符合”單一職責原則“；
改良版：
思路：通過一個閉包，來實現判斷例項的操作；
閉包警告：不理解閉包的同學請先學習閉包 https://www.cnblogs.com/dengyao-blogs/p/11475575.html
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())
代理版單例模式：
通過代理的形式，將建立物件的操作和例項判斷的操作進行解耦拆分，實現更小粒度的劃分，符合”單一職責原則“；
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()只負責判斷例項，Singlton只負責建立物件和賦值；
惰性單例模式
我們經常會有這樣的場景：頁面多次呼叫都有彈窗提示，只是提示內容不一樣；
這個時候我們可以立馬想到是單例模式，彈窗就是單例例項，提示內容是引數傳遞；我們可以用惰性單例模式來實現它；
<!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上下文並傳遞引數
}
}
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('看來真的是個鹹魚');
alertMessage.style.display = 'block';
}
</script>
</html>
惰性單例是指的是頁面開始載入的時候我們的例項是沒有進行建立的，是當我們點選頁面的div之後才開始建立例項（按需建立），這可以提高我們的網頁效能，加快我們的頁面渲染速度；
&n