小點心，顧名思義，開箱即食，拿來即用。彈窗就無需多說了，幾乎所有存在交互的頁面都會用到，一個頁面上甚至會有 N 多個彈窗。彈彈彈，彈出魚尾紋。如果從面向對象的角度去看，把彈窗看成一個類想必是極好的，與之綁定的DOM塊是它的屬性，打開和關閉是它的方法，而且這樣可以實現彈窗樣式和邏輯的分離。 ...
小點心，顧名思義，開箱即食，拿來即用。
前端業務邏輯主要分為【交互效果】和【數據展示】兩方面。數據展示可使用 MVVM 框架來實現。前端的交互效果常用的也就那麼幾種，比如彈窗，樓層定位，倒計時，下拉刷新，上拉載入更多等等。這些交互效果完全可以提出來做成通用的模塊，以後不必再勞心費神去想怎麼實現。就像 Swiper 封裝了一個類來專門做輪播圖一樣，本系列的目的是通過封裝一系列類來實現彈窗，樓層定位，倒計時等交互功能。
彈窗就無需多說了，幾乎所有存在交互的頁面都會用到，一個頁面上甚至會有 N 多個彈窗。彈彈彈，彈出魚尾紋。
彈窗的邏輯其實很簡單，就是打開和關閉。如果這還不夠，那就再加個回調。如果從面向對象的角度去看，把彈窗看成一個類想必是極好的，與之綁定的DOM塊是它的屬性，打開和關閉是它的方法，而且這樣可以實現彈窗樣式和邏輯的分離。
由於需要操作DOM，果斷選擇了王者級庫——jQuery。
先定一個小目標：
- 易用性，如果自己都覺得難用，那就沒有分享的必要了￣□￣｜｜；
- 相容性，相容主流瀏覽器，但並非所有（比如 IE 低版本）；
- 移動優先，主要為移動端做更多的考慮；
Swiper 在這方面已經樹立了典範。因此本系列均效仿 Swiper 的 API 風格，力求 Keep It Simple and Stupid。只需要相對寬鬆有序的 DOM 結構和一致的實例化風格，That's it，多一點不人性化的東西算俄輸。
然後就有了第一個小點心：NormalPopup。
基本示例
本示例包含了最基本的使用，只需傳入彈窗 DOM 的選擇器和要作為打開/關閉彈窗的選擇器。
const popupA = new NormalPopup({
popup: '#popup-A',
openBtn: '.open-popup-A',
closeBtn: '.close-popup-A',
})
使用回調
可以在實例化時傳入打開或關閉回調函數，回調將在彈窗完全打開或關閉後（即在打開或關閉動畫結束之後）被調用。
const popupB = new NormalPopup({
popup: '#popup-B',
openBtn: '.open-popup-B',
closeBtn: '.close-popup-B',
onOpen(){
alert('open B')
},
onClose(){
alert('close B')
},
})
點擊遮罩關閉
可以在實例化時設置點擊遮罩關閉，但需要提供一個額外的 mask 選項，也就是需要彈窗的遮罩和彈窗的內容相分離。
const popupC = new NormalPopup({
mask: '#popup-C-mask',
popup: '#popup-C',
openBtn: '.open-popup-C',
closeOnClickMask: true,
})
過渡動畫時長
可以在實例化時傳入可選的動畫時長，預設是 0 毫秒。
const popupD = new NormalPopup({
popup: '#popup-D',
openBtn: '.open-popup-D',
closeBtn: '.close-popup-D',
duration: 600,
})
with jQuery
每個 NormalPopup 實例都有一個 open 方法和一個 close 方法，並且可在調用時傳入一個回調。請註意，在API方法中傳入的回調將排在實例化傳入的回調之後被調用。
$(document).on('click', '.clickBtnA', function(){
popupA.open(function(){
alert('open A with jQuery')
})
})
with Vue
可以在任何時候實例化 NormalPopup 而不必非要等到 Vue 掛載到 DOM 之後。
...
methods: {
openPopupC(){
popupC.open(function(){
alert('open C with Vue')
})
},
}
...
