js設計模式——單例模式
阿新 • • 發佈：2020-09-08
什麼是單例模式
保證一個類僅有一個例項，並提供一個訪問它的全域性訪問點。
實現單例模式需要有一個變數標記是否已經建立過例項。如果已經建立過例項，就返回之前建立的例項。沒有，則返回新建的例項。
實現方法可以考慮閉包，高階函式等。
需要注意單一變數原則：一個類只關注一種職責。
javascript的單例模式
javascript是一門無型別語言，所以我們只需要一個唯一的物件，無需創造出一個類。
var
var全域性變數符合確保只有一個例項，並提供了全域性訪問。所以全域性變數不是單例模式，但是我們可以將全域性變數當做單例來使用。
但是全域性變數的大量使用容易造成名稱空間的汙染，不利於多人開發。我們可以通過全域性物件建立名稱空間和使用閉包來緩解問題。
惰性單例
惰性單例是指在需要的時候偶才建立物件例項。減少節點的浪費。比如WebQQ 的登入浮窗，我們只有在點選登入的時候使用。如果在頁面載入的時候就建立浮窗，那麼當我們只是想在webQQ頁面看看天氣，不會進行登入，那麼久就白白浪費了一個DOM節點。
<!DOCTYPE html> <html> <head> <title>設計模式測試</title> <script type="text/javascript" src="./單例模式.js"></script> </head> <style type="text/css"> </style> <body> <div class="box"> <button id='btn'>登入</button> </div> </body> <script type="text/javascript"> var createDiv=(function() { var div=null; return function(){ if(!div){ div=document.createElement('div'); div.innerHTML='登入浮框'; div.style.display = 'none'; document.body.appendChild(div); } return div; } })(); document.getElementById('btn').onclick=function(){ var login=createDiv(); login.style.display='block'; } </script> </html>
考慮單一職責原則
<!DOCTYPE html> <html> <head> <title>設計模式測試</title> <script type="text/javascript" src="./單例模式.js"></script> </head> <style type="text/css"> </style> <body> <div class="box"> <button id='btn'>登入</button> </div> </body> <script type="text/javascript"> var createDiv=function(){ var div=document.createElement('div'); div.innerHTML='登入浮框1'; div.style.display = 'none'; document.body.appendChild(div); return div; } var getSingle=function(fn){ var element; return function(){ return element||(element=fn.apply(this,arguments)); } } var createSingleDiv=getSingle(createDiv); document.getElementById('btn').onclick=function(){ var login=createSingleDiv(); login.style.display='block'; } </script> </html>