模態框與單例、簡單工廠、發佈訂閱

模態框與單例、簡單工廠、發佈訂閱

原文/代碼連接

模態窗的拆分

1. ModalService: 負責打開模態窗界面，也就是帶透明度的蒙版，而後展現模態窗內容；
2. ModalComponent: 每個用戶自定義的模態框，表單，內容，操做按鈕等；
3. Trigger: 訂閱了每個 ModalComponent 的打開方法，可以打開 ModalComponent

模態窗模塊分析

1. ModalService

   ModalService 是一個服務，一個單例，由於整個頁面只會有一個 ModalService 的服務用來打開模態窗的界面，而後將須要展現的模態窗展現在打開的模態窗頁面。

2. ModalComponent

   每個 ModalComponent 都是一個獨立的對象，存在於 ModalService 的維護隊列裏，他們擁有本身的展現內容以及各自發布本身的 open / close 事件。

3. Trigger

   Trigger 能夠訂閱 ModalComponent 的 open 事件，來打開對應的 ModalComponent ，通常狀況下一個 Trigger 訂閱一個 ModalComponent 的打開。

代碼實現

• ModalComponent

  ModalComponent 是一個簡單工廠，能夠根據參數不一樣產出不一樣的模態框

  var ModalComponent = function (modal, id) {
      var that = this;
      that.modal = modal;
      that.id = id;
      that.init = function () {
        ···
        cancelBtn.onclick = function (e) {
          cancelEvent(e);
          that.close();
        }
        confirmBtn.onclick = function (e) {
          confirmClick(e);
          that.close();
        }
        ···
      }
  
      that.close = function () {
        that.modal.remove();
        MarkModalService.close();
      }
  
      that.open = function () {
        MarkModalService.show(that.modal);
      }
      that.init();
    };
  複製代碼

  每個 ModalComponent 內部會本身綁定 cancelBtn / confirmBtn，來進行相關的操做；

• ModalService

  對於 ModalService 咱們建立一個單例，由於整個系統都只須要存在一個這樣的對象；

  var MarkModalService = (function (MarkModalService) {
          MarkModalService.modalList = {};
          MarkModalService.container = null;
  
          MarkModalService.register = function () {
            ···
            for (var i = 0; i < modals.length; i++) {
              var id = modals[i].id;
              var mod = new ModalComponent(modals[i], id);
              MarkModalService.modalList[id] = mod;
            }
            for (var j = 0; j < triggers.length; j++) {
              var trg = triggers[j];
              var clickEvt = trg.onclick;
              trg.onclick = function (e) {
                var trgName = triggers[j].name;
                // let trgName === modal.id so that they can be linked
                MarkModalService.modalList[trgName].open();
                clickEvt && clickEvt(e);
              }
            }
            ···
          }
  
          MarkModalService.show = function (modal) {
            ···
          }
  
          MarkModalService.createContainer = function () {
            ···
          }
  
          MarkModalService.close = function () {
            ···
          }
  
          MarkModalService.createContainer();
          MarkModalService.register();
          return MarkModalService;
    })(MarkModalService || {});
  複製代碼

  1. 在這個對象裏面咱們有一個 register 函數，初始化若干個 ModalComponent。
  2. 而後將這些 ModalComponent 存在 ModalService 的 modalList 發佈訂閱的隊列中。
  3. 接着將對應的 Trigger 綁定上 modalList 對應的 ModalComponent 的 open 事件，進行事件訂閱。