彈窗是一種通用性極強(qiáng)的頁(yè)面操作，無(wú)論是用戶的登錄注冊(cè)還是提示信息都會(huì)用到我們要說(shuō)的彈窗吁脱，所以對(duì)于各種各樣的彈窗我們?cè)撛趺慈?fù)用呢晒来？首先我們需要把彈窗組件化鹿响，每個(gè)需要用到彈窗的頁(yè)面調(diào)用該組件就可以了，這樣還不夠傻唾，我們還需要通過(guò)繼承組件來(lái)達(dá)到定制化彈窗開(kāi)發(fā)投慈，這也是我們今天要說(shuō)的。
Alert彈窗組件預(yù)覽
Login彈窗組件預(yù)覽
需求分析
通用彈窗組件作為父組件提供給其他具體業(yè)務(wù)彈窗組件繼承
通用彈窗提供基本的邊框樣式和隱藏顯示功能
業(yè)務(wù)彈窗則只需要定制自己需要的內(nèi)容和功能即可
繼承自定義的alert彈窗和登錄彈窗
通用彈窗思路
父組件一般提供通用性的功能即可冠骄，所以這里考慮到alert彈窗和登錄彈窗的相同點(diǎn)和不同點(diǎn)伪煤，我們給通用彈窗定義一個(gè)容器以及邊框和水平垂直居中，然后右上角需要一個(gè)關(guān)閉的button猴抹，提供隱藏和顯示彈窗的方法带族，其實(shí)挺簡(jiǎn)單的吧 ~
// 定義父容器
let html = `<div class="m-modal"></div>`;
通過(guò)extend方法拿到傳入的參數(shù)，并將html轉(zhuǎn)成node方便操作蟀给，然后將節(jié)點(diǎn)渲染到頁(yè)面上即可
function Modal(option) {
// 繼承配置
_.extend(this, option);
// 緩存節(jié)點(diǎn)
this.container = _.html2node(html);
this.container.innerHTML = this.content || '';
this.parent.appendChild(this.container);
}
提供顯示和隱藏彈窗的方法
show: function() {
_.delClassName(this.container, 'f-dn');
},
hide: function() {
_.addClassName(this.container, 'f-dn');
this.emit('hide');
},
到這里我們通用組件就完成了蝙砌，接下來(lái)看定制化的alert彈窗組件吧
// alert彈窗html結(jié)構(gòu)
let html = `<div class="m-alertmodal">
<span class="close_btn u-icon u-icon-close"></span>
<div class="modal_tt">
<strong>Alert Information</strong>
</div>
<div class="modal_ct">
<p class="alert_msg"></p>
<button class="u-btn u-btn-primary submit_btn">確定</button>
</div>
</div>`;
首先傳入html節(jié)點(diǎn)到 this.content 阳堕，通過(guò)原型式繼承得到 AlertModal.prototype ，這里要多謝冴羽大神幫我分析原型是繼承和淺拷貝的困惑择克，這里可以看一下恬总，當(dāng)做筆記記在小本本里。
function AlertModal(option) {
// 傳入content
this.content = html;
// 借調(diào)構(gòu)造函數(shù)實(shí)現(xiàn)繼承
Modal.call(this, option);
// 緩存節(jié)點(diǎn)
this.alertMsg = this.container.querySelector('.alert_msg');
this.submitBtn = this.container.querySelector('.submit_btn');
this.closeBtn = this.container.querySelector('.close_btn');
this.initModal();
}
// 通過(guò)原型式繼承會(huì)導(dǎo)致AlertModal.prototype.constructor === Modal肚邢，需要手動(dòng)指回去
AlertModal.prototype = Object.create(Modal.prototype);
這里也貼一下extend的代碼：
// 屬性賦值壹堰，通過(guò)淺拷貝
_.extend = function(o1, o2) {
for (var i in o2) if (typeof o1[i] === 'undefined') {
o1[i] = o2[i];
}
return o1;
};
使用 Object.create 的關(guān)系圖為：
使用 extend 的關(guān)系圖為：
使用 extend，我們僅僅是給 AlertModal.prototype 添加各種方法而已骡湖，就類似于 AlertModal.prototype.a = fn;
如果非要說(shuō)區(qū)別的話贱纠，比如我給 Modal.prototype 添加了一個(gè)函數(shù), 使用 Object.create 實(shí)現(xiàn)繼承的話，alertModal 可以自動(dòng)獲得這個(gè)方法响蕴，而使用 extend 的方式谆焊，必須要再執(zhí)行一次 _.extend(AlertModal.prototype, Modal.prototype) 才能讓 alertModal 獲得該方法
在這里通過(guò)Object.create方式會(huì)使 AlertModal.prototype.constructor === Modal 指回去就好了~
接著往下看，我們需要初始化alertModal組件
初始化的時(shí)注冊(cè)alert彈窗事件浦夷，顯示自定義內(nèi)容辖试，然后綁定事件
_.extend(AlertModal.prototype, {
initModal: function() {
// 觸發(fā)alert彈窗
this.on('alert', this.showMsg.bind(this));
_.addEvent(this.closeBtn, 'click', this.hide.bind(this));
_.addEvent(this.submitBtn, 'click', this.success.bind(this));
},
showMsg: function(msg) {
this.alertMsg.innerHTML = msg;
this.show();
}
});
在測(cè)試頁(yè)面我們提供父容器節(jié)點(diǎn)和觸發(fā)對(duì)應(yīng)的事件即可，到這里我們完成了alert彈窗的繼承組件開(kāi)發(fā)的一般流程劈狐，實(shí)際中考慮的內(nèi)容比這多很多罐孝，這里只是簡(jiǎn)化過(guò)程，明白實(shí)現(xiàn)彈窗并且怎么繼承組件即可肥缔。
let alert = new AlertModal({
parent: document.body,
});
// 觸發(fā)事件
alert.emit('alert', '我是Alert彈窗');
alert.on('hide', function() {
console.log('觸發(fā)hide事件')
});
alert.on('success', function() {
console.log('觸發(fā)success事件')
})
登錄彈窗實(shí)現(xiàn)
有了上面alert彈窗繼承的完成后莲兢，登錄彈窗的繼承也就變得很簡(jiǎn)單，只需要改動(dòng)幾行代碼就可以辫继，重復(fù)的步驟就不講了怒见，這里看一看代碼，首先還是通過(guò)繼承得到父類的方法和屬性
// 繼承父類Modal的原型
LoginModal.prototype = Object.create(Modal.prototype);
LoginModal.prototype.constructor = LoginModal;
初始化時(shí)注冊(cè)登錄彈窗并綁定相應(yīng)的事件姑宽，這里由于和注冊(cè)彈窗有交互遣耍，所以這里不去實(shí)現(xiàn)
// 初始化登錄彈窗組件并綁定事件
initLoginEvent: function() {
this.on('showLoginModal', this.show.bind(this));
_.addEvent(this.close, 'click', this.hide.bind(this));
_.addEvent(this.goregister, 'click',
function() {
this.hide();
// 此處不實(shí)現(xiàn)真實(shí)的注冊(cè)彈窗
this.emit('showRegisterModal');
}.bind(this));
_.addEvent(this.submit, 'click', this._submit.bind(this));
}
check表單驗(yàn)證方法是真實(shí)項(xiàng)目中用到的，通過(guò)正則驗(yàn)證用戶名和密碼是否為空以及是否符合具體要求炮车，這里貼出來(lái)僅供參考舵变。
// 檢查用戶名和密碼是否為空以及長(zhǎng)度判斷
check: function() {
let isValid = true,
flag = true;
// 驗(yàn)證用戶名
flag = _.isPhone(this.userName.value) && flag;
flag = !_.isNotEmpty(this.userName.value) && flag;
flag ? _.delClassName(this.userName, 'error') : _.addClassName(this.userName, 'error');
isValid = isValid && flag;
// 驗(yàn)證密碼
flag = true;
flag = !_.isNotEmpty(this.password.value) && flag;
flag = _.pwdLength(this.password.value) && flag;
flag ? _.delClassName(this.password, 'error') : _.addClassName(this.password, 'error');
isValid = isValid && flag;
isValid || (this.nError.innerText = '賬號(hào)或密碼錯(cuò)誤，請(qǐng)輸入正確密碼~');
this.showError();
isValid ? _.addClassName(this.ErrorParent, 'f-dn') : this.showError();
return isValid;
},
實(shí)際應(yīng)用中我們檢測(cè)完成后會(huì)提交到服務(wù)器上瘦穆，這里為了演示省略這一步纪隙，通過(guò)觸發(fā)事件了解我們登錄是正確的即可。
// 提交用戶信息前先阻止默認(rèn)事件
// 檢查cookie狀態(tài)扛或，并設(shè)置選中‘保持登錄’的失效時(shí)間
_submit: function(event) {
let that = this;
event.preventDefault();
let user = {
username: that.userName.value.trim(),
password: hex_md5(that.password.value),
remember: !!that.remember.checked
};
// 這里不做真實(shí)登錄绵咱，僅做一下演示
if (that.check()) {
console.log(user);
that.emit('showLoginModal');
that.hide();
// _.ajax({
// url: '/api/login',
// method: 'POST',
// data: user,
// success: function (data) {
// let dataOrz = JSON.parse(data);
// console.log(data)
// if (dataOrz.code === 200) {
// that.hide();
// that.emit('login', data.result);
// that.lastSuc();
// _.setCookie('loginSuc', 'loginSuc');
// } else {
// that.hide();
// }
// },
// fail: function () {}
// })
}
}
總結(jié)
至此，我們就算完成了通過(guò)繼承的方式實(shí)現(xiàn)彈窗組件熙兔，注意到原型式繼承會(huì)改變本身的constructor屬性悲伶，需要手動(dòng)指回來(lái)艾恼。這里僅僅是拋磚引玉，希望你能了解思路后寫(xiě)出更加高可用的組件麸锉，預(yù)計(jì)后期還會(huì)寫(xiě)級(jí)聯(lián)組件钠绍、分頁(yè)器組件和上傳文件等組件，難度也是逐漸增加啊花沉，繼續(xù)加油柳爽，晚安 ~
