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

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

原文/代碼連接jquery

模態窗的拆分

  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 是一個簡單工廠,能夠根據參數不一樣產出不一樣的模態框git

    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,來進行相關的操做;github

  • 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 存在 ModalServicemodalList 發佈訂閱的隊列中。
    3. 接着將對應的 Trigger 綁定上 modalList 對應的 ModalComponentopen 事件,進行事件訂閱。
相關文章
相關標籤/搜索