ES6小点心之通用弹窗
小点心，顾名思义，开箱即食，拿来即用。
前端业务逻辑主要分为【交互效果】和【数据展示】两方面。数据展示可使用 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')
})
},
}
...