js單例模式——建立彈窗
一、瞭解單例模式
單例模式的定義:保證一個類僅有一個例項,並提供一個訪問他的全域性訪問點
單例模式的核心:是確保只有一個例項,並提供全域性訪問
二、javascript中的單例模式
在js中,我們經常會把全域性變數當做單例模式來使用,例如:
var a={};
為什麼a可以當做全域性變數來使用呢,因為其滿足以下兩個條件:
1、物件a獨一無二
2、a定義在全域性作用域下,提供了全域性訪問
注:但是在js中建議使用名稱空間,來減少全域性變數的數量
三、惰性單例
惰性單例:在需要的時候才建立的物件例項
用途:在頁面中有兩個按鈕,點選的時候需要顯示響應彈窗並載入相應的css檔案
注:有些開發人員習慣在頁面載入時就寫進去,然後設定隱藏狀態,這樣就會浪費DOM節點
下面是實現程式碼:
1、主頁面
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>單例模式</title> <style type="text/css"> body{ background: #fffff2; } h3{ text-align: center; } </style> </head> <body> <h3>建立唯一的視窗</h3> <button type="button" id="btn1">建立div1</button> <button type="button" id="btn2">建立div2</button> </body> <script type="text/javascript"> /** * 管理單例 */ var getSingle=function(fn){ var result; return function(){ return result || (result=fn.apply(this,arguments)); } }; // 彈框關閉開啟 function LayerAction(){ this.layer=null;//彈窗element if(typeof this.setLayer !== "function"){ // 設定彈窗 LayerAction.prototype.setLayer=function(layer){ if(!layer){ console.error("引數不完整,必須傳入layer"); return; }else{ this.layer=layer; } }; // 顯示彈窗 LayerAction.prototype.showLayer=function(){ this.layer.style.display="block"; }; // 關閉彈窗 LayerAction.prototype.closeLayer= function(){ this.layer.style.display="none"; } ; } } /** * div1彈窗 */ var div1={ div1Layer:null, layerAction: new LayerAction(), // 建立div1彈窗 createDiv1Layer:function(){ var div=document.createElement("div"); div.innerHTML="我是div1"; div.style.display='none'; div.id="div1"; document.body.appendChild(div); var closeBtn=document.createElement("span"); closeBtn.innerText="關閉"; closeBtn.id="closeDiv1"; div.appendChild(closeBtn); return div; }, // 引入div1彈窗樣式列表 createDiv1Style: function() { var styleElement = document.createElement('link'); styleElement.type = 'text/css'; styleElement.href = 'div1.css'; styleElement.rel = 'stylesheet'; document.getElementsByTagName('head')[0].appendChild(styleElement); console.log(document.getElementsByTagName('head')[0].innerHTML); return styleElement }, // 為關閉按鈕繫結事件 bindActionForCloseLayer: function(){ var that=div1; document.getElementById("closeDiv1").onclick=function(){ that.layerAction.closeLayer(); } }, // 呼叫彈窗1 startDiv1Layer: function(){ var createDiv1singleLayer=getSingle(this.createDiv1Layer); var createDiv1singleStyle=getSingle(this.createDiv1Style); var bindCloseEvent=getSingle(this.bindActionForCloseLayer); var that=this; document.getElementById("btn1").onclick=function(){ createDiv1singleStyle(); that.div1Layer=createDiv1singleLayer(); that.layerAction.setLayer(that.div1Layer); that.layerAction.showLayer(); bindCloseEvent(); } } }; div1.startDiv1Layer(); /** * div2彈窗 */ var div2={ div2Layer:null, layerAction: new LayerAction(), // 建立div2彈窗 createDiv2Layer: function(){ var div=document.createElement("div"); div.innerHTML="我是div2"; div.style.display='none'; div.id="div2"; document.body.appendChild(div); var closeBtn=document.createElement("span"); closeBtn.innerText="關閉"; closeBtn.id="closeDiv2"; div.appendChild(closeBtn); return div; }, // 引入div2彈窗樣式列表 createDiv2Style: function () { var styleElement = document.createElement('link'); styleElement.type = 'text/css'; styleElement.href = 'div2.css'; styleElement.rel = 'stylesheet'; document.getElementsByTagName('head')[0].appendChild(styleElement); console.log(document.getElementsByTagName('head')[0].innerHTML); return styleElement }, // 為關閉按鈕繫結事件 bindActionForCloseLayer: function(){ var that=div2; document.getElementById("closeDiv2").onclick=function(){ that.layerAction.closeLayer(); } }, // 呼叫彈窗2 startDiv2Layer: function(){ var createDiv2singleLayer=getSingle(this.createDiv2Layer); var createDiv2singleStyle=getSingle(this.createDiv2Style); var bindCloseEvent=getSingle(this.bindActionForCloseLayer); var that=this; document.getElementById("btn2").onclick=function(){ createDiv2singleStyle(); that.div2Layer=createDiv2singleLayer(); that.layerAction.setLayer(that.div2Layer); that.layerAction.showLayer(); bindCloseEvent(); } } } div2.startDiv2Layer(); </script> </html>
2、div1.css
3、div2.css/** * Description: * Created by wxy on 2018/2/13 11:02 */ #div2{ width: 500px; height: 300px; background: #ffdd00; color: #fff; position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%); } #closeDiv2{ cursor: pointer; margin-right: 5px; margin-top: 5px; float: right; border: 1px solid #fff; }
/**
* Description: style of div1
* Created by wxy on 2018/2/13 11:01
*/
#div1{
width: 500px;
height: 300px;
background: #0b0a0a;
color: #fff;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
#closeDiv1{
cursor: pointer;
margin-right: 5px;
margin-top: 5px;
float: right;
border: 1px solid #fff;
}
相關推薦
js單例模式——建立彈窗
一、瞭解單例模式 單例模式的定義:保證一個類僅有一個例項,並提供一個訪問他的全域性訪問點 單例模式的核心:是確保只有一個例項,並提供全域性訪問二、javascript中的單例模式 在js中,我們經常會把全域性變數當做單例模式來使用,例如: va
飄逸的python - 單例模式亂彈
trac obj single not def pop nbsp asa sel 方法一:裝飾器 利用“裝飾器只會執行一次”這個特點 1 def singleton(cls): 2 instances = []# 為什麽這裏不直接為None,因為內部函數沒法訪
單例模式 建立型 設計模式(六)
package singleton; /** * Created by noteless on 2018/10/11. * Description: */ public class LazySingleton { private LazySingleton() { }
JS單例模式
// 遊戲管理物件,單例類 var GameManager = (function () { function _GameManager() { // 敵人[波組] this.groupVector = []; // 敵人[陣列]
js單例模式的es5實現和es6實現,以及通用惰性單例實現
單例模式 es5實現 es6實現 單例模式 一開始不建立例項物件,當第一次使用時才建立 用一個變數標誌當前是否已經為某個類建立過物件,如果已建立則在下次獲取時返回之前建立的例項
單例模式建立工具類
/* * *JdbcUtilsSing.java * * 這是一個工具類,一般工具類不能被繼承,定義成final * 不需要構造例項,用私有的構造方法 * 單例模式或者用static靜態程式碼塊,本例用單例模式 * * */ package
單例模式(建立型)
單例模式的主要作用是保證在java程式中,某個類只有一個例項存在,許多時候整個系統只需要擁有一個的全域性物件,這樣有利於協調系統整體的行為。 一些管理器和控制器常被設計成單例模式,例如在某個伺服器程式中,該伺服器的配置資訊存放在一個檔案中,這些配置資料
js之 單例模式
new message charset 業務邏輯 包含 render bin init () 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta ch
理解js設計模式之單例模式
單例 false single 這樣的 字面量 不可靠 urn 如果 == 單例模式的定義:只提供唯一的一個實例來讓你訪問 js中單例是天然存在的: var a1={ hello:‘js‘ } var a2={ hello:‘js‘ } cons
[js高手之路]設計模式系列課程-單例模式實現模態框
ges 點擊 eat abs select nbsp str osi 控制 什麽是單例呢? 單,就是一個的意思。例:就是實例化出來的對象,那合在一起就是保證一個構造函數只能new出一個實例,為什麽要學習單例模式呢?或者說單例模式有哪些常見的應用場景.它的使用還是很廣泛,比如
js設計模式之單例模式
想要 判斷 mage blog nbsp mes new 1-1 單例 1 var xiaowang = (function(argument){ 2 var xiaowangjia = function(message){
[轉]js設計模式-單例模式
bsp append 線程池 get 有一個 layer 代理 分享圖片 獨立 單例模式是指保證一個類僅有一個實例,並提供一個訪問它的全局訪問點。 單例模式是一種常用的模式,有一些對象往往只需要一個,比如線程池、全局緩存、瀏覽器中的window對象等。在javaScrip
js之單例模式
getmenu pro iter urn null 實現 ole prot 賦值 單例模式是指一個類,只有一個實例。實現的思路是,創建實例時候加判斷,如果有實例則返回,如果沒有就new一個,並返回。 第一步: 創建類。 function Waiter(id, name,
設計模式-建立模式--【單例模式】的多種寫法
單例模式是最常用到的設計模式之一,熟悉設計模式的朋友對單例模式都不會陌生。一般介紹單例模式的書籍都會提到 餓漢式 和 懶漢式 這兩種實現方式。但是除了這兩種方式,本文還會介紹其他幾種實現單例的方式,讓
單例模式:建立獨一無二的物件
單例模式(Singleton Pattern): 用來建立獨一無二的,只能有一個例項的物件的入場券。 作用:有些物件我們只需要一個,比如:執行緒池、快取、對話方塊、處理偏好設定、登錄檔等物件,這些物件只能有一個例項,如果製造出多個例項,就會導致很多問題產生,例如:程式行為異常、資源使用過量、或者
Java設計模式(三)之建立型模式:單例模式
一、概念: java中單例模式是一種常見的設計模式,單例模式的寫法有好幾種,這裡主要介紹三種:懶漢式單例、餓漢式單例、登記式單例。 單例模式有以下特點: (1)單例類只能有一個例項; (2)單例類必須自己建立自己的唯一例項; (3)單例類必須給所有其他物件提供這一例項。 單例
建立——單例模式
英文名Singleton 最簡單的設計模式 應用 當一個類在整個系統生命週期中只需要一個例項的時候使用,並且提供一個給其他類可以訪問的介面。 例子 spring中維護的bean,servlet容器中管理的servlet類等。 使用 可以定義一個工廠方法返回該單例類。
設計模式01 建立型模式 - 單例模式(Singleton Pattern)
參考 [1] 設計模式之:建立型設計模式(6種) | 部落格園 [2] 單例模式的八種寫法比較 | 部落格園 單例模式(Singleton Pattern) 確保一個類有且僅有一個例項,並且為客戶提供一個全域性訪問點。 特點 1) 保證被訪問資
第3章 建立型模式—單例模式
1. 單例模式(Singleton Pattern) (1)定義:保證一個類僅有一個例項,同時提供能對該例項加以訪問的全域性訪問方法。 (2)解決思路: ①在類中,要構造一個例項,就必須呼叫類的建構函式。如此,為了防止在外部呼叫類的建構函式而建立例項,需要將建構函式的訪問許可權
建立模式-單例模式
建立模式-單例模式(Singleton) 定義: 確保某一個類只有一個例項,而且自行例項化並向整個系統提供這個例項 實現: <?php class Singleton { private static $_instance = null; private