javascript 設計模式之單例模式

單例模式是一種簡單而很是實用的模式特別是惰性單例技術,下面例子貼出了單列模式的代碼設計模式

<button id="loginBtn">登陸</button>
    <script>
      // 通用單例模式
      let getSingle = function(fn) {
        let result;
        return function() {
          return result || (result = fn.apply(this, arguments));
        };
      };

      let createLoginLayer = function() {
        let div = document.createElement("div");
        div.innerHTML = "我是登錄浮窗";
        div.style.display = "none";
        return div;
      };

      let createSingleLoginLayer = getSingle(createLoginLayer);

      document.getElementById("loginBtn").onclick = function() {
        let loginLayer = createSingleLoginLayer();
        loginLayer.style = "block";
      };

      // 建立惟一的 iframe

      let createSingIframe = getSingle(function() {
        let iframe = document.createElement("iframe");
        document.body.appendChild(iframe);
        return iframe;
      });

      document.getElementById("loginBtn").onclick = function() {
        let loginLayer = createSingIframe();
        loginLayer.src = "http://baidu.com";
      };
複製代碼

在這個例子中,咱們把建立實例對象的職責和管理單例的職責分別放置在兩個方法中,這兩個方法能夠獨立的變化而相互不影響。 當它們鏈接在一塊兒的時候, 就完成了建立惟一實例對象的功能。bash

該資料來源曾探著的《設計模式與開發實踐》app

相關文章
相關標籤/搜索