图片 1

聊点心,顾名思义,开箱即吃,拿来就是用。

前者业务逻辑主要分为【交互作用】和【数据展示】两面。数据显示可使
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')
        })
    },
}
...

相关文章

网站地图xml地图