js單例模式——建立彈窗

阿新 • • 發佈：2019-01-17

一、瞭解單例模式

單例模式的定義：保證一個類僅有一個例項，並提供一個訪問他的全域性訪問點

單例模式的核心：是確保只有一個例項，並提供全域性訪問

二、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

/**
 * 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;
}

3、div2.css

/**
 * 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

js單例模式——建立彈窗

相關推薦