ES6小點心之通用彈窗

小點心，顧名思義，開箱即食，拿來即用。

前端業務邏輯主要分為【交互效果】和【數據展示】兩方面。數據展示可使用 MVVM 框架來實現。前端的交互效果常用的也就那么幾種，比如彈窗，樓層定位，倒計時，下拉刷新，上拉加載更多等等。這些交互效果完全可以提出來做成通用的模塊，以后不必再勞心費神去想怎么實現。就像 Swiper 封裝了一個類來專門做輪播圖一樣，本系列的目的是通過封裝一系列類來實現彈窗，樓層定位，倒計時等交互功能。

彈窗就無需多說了，幾乎所有存在交互的頁面都會用到，一個頁面上甚至會有 N 多個彈窗。彈彈彈，彈出魚尾紋。

彈窗的邏輯其實很簡單，就是打開和關閉。如果這還不夠，那就再加個回調。如果從面向對象的角度去看，把彈窗看成一個類想必是極好的，與之綁定的DOM塊是它的屬性，打開和關閉是它的方法，而且這樣可以實現彈窗樣式和邏輯的分離。

由於需要操作DOM，果斷選擇了王者級庫——jQuery。

先定一個小目標：

• 易用性，如果自己都覺得難用，那就沒有分享的必要了￣□￣｜｜；
• 兼容性，兼容主流瀏覽器，但並非所有（比如 IE 低版本）；
• 移動優先，主要為移動端做更多的考慮；

Swiper 在這方面已經樹立了典范。因此本系列均效仿 Swiper 的 API 風格，力求 Keep It Simple and Stupid。只需要相對寬松有序的 DOM 結構和一致的實例化風格，That's it，多一點不人性化的東西算俄輸。

然后就有了第一個小點心：NormalPopup。

GitHub

在線演示

基本示例

本示例包含了最基本的使用，只需傳入彈窗 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')
        })
    },
}
...