原文/代碼連接jquery
open
/ close
事件。open
事件,來打開對應的 ModalComponent ,通常狀況下一個 Trigger 訂閱一個 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
咱們建立一個單例,由於整個系統都只須要存在一個這樣的對象;函數
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 || {});
複製代碼
register
函數,初始化若干個 ModalComponent
。ModalComponent
存在 ModalService
的 modalList
發佈訂閱的隊列中。Trigger
綁定上 modalList
對應的 ModalComponent
的 open
事件,進行事件訂閱。