ES6小点心之通用弹窗

先贴上 Bug 链接: https://issuetracker.google.com/issues/68969655

图片 1

图片 2

小点心,顾名思义,开箱即食,拿来就用。

Bug 本身是异常简短的,就是 Google 的 Android
在线参考文档中,有一致地处示例代码,有一个特别惨重的错,
会引起上上下下章节的代码都心有余而力不足有效执行.

前端业务逻辑主要分为【交互作用】和【数据展示】两面。数据显示可使
MVVM
框架来兑现。前端的彼此作用常用之吗就算那么几种,比如弹窗,楼层定位,倒计时,下拉刷新,上拉加载重多等等。这些交互作用完全可提出来做成通用的模块,以后不要再度劳心费神去思怎么落实。就比如
Swiper
封装了一个近乎来特别做轮播图一样,本系列之目的是通过包一密密麻麻类来兑现弹窗,楼层定位,倒计时等相作用。

对 Android 的 Service
服务有了解的,可以来这里看下,看会无克发现大错误:
https://developer.android.com/training/connect-devices-wirelessly/nsd.html#discover

弹窗就无需多说了,几乎有在交互的页面都见面为此到,一个页面上甚至会见产生 N
多个弹窗。弹弹弹,弹出鱼尾纹。

图片 3

弹窗的逻辑其实很简短,就是打开和关。如果当时尚不够,那就是再加个回调。如果打面向对象的角度去押,把弹窗看成一个类想必是极致好的,与的绑定的DOM块是她的习性,打开和关是其的办法,而且这么可以兑现弹窗样式与逻辑的分手。

依据文章所谓代码,每次注册服务,都见面失败,错误码是0.其实这里,还有其它一样处错误,就是服务类型的格式,必须是为点符号
(.) 结尾,因为以一一回调里,如果注册服务成功,你用到之 service type
都见面给机关抬高点符号了.关于 errcode 为0的底细讨论,可以看看
https://stackoverflow.com/questions/36232339/while-using-network-service-discovery-registration-fails-with-error-code-0,被采纳的答案的评论区,有老彩蛋,呼哈哈~~

出于需要操作DOM,果断选择了国王级库——jQuery。

图片 4

先定一个小目标:

还有,就是提 Bug 时,我还捎带截了下 Google 的 Bug
自动提交系统的希冀,留作以后好拘留:

  • 易用性,如果协调都觉得难用,那就算不曾享受的不可或缺了 ̄□ ̄||;
  • 兼容性,兼容主流浏览器,但不用有(比如 IE 低版本);
  • 运动优先,主要为移动端做重新多之考虑;

图片 5

Swiper 在就方面曾建立了范。因此依系列都拟 Swiper 的 API 风格,力求
Keep It Simple and Stupid。只需要相对宽松有序的 DOM
结构以及平等的实例化风格,That’s it,多同碰不人性化的东西到底俄输。

图片 6

下一场就是闹矣第一个小点心:NormalPopup

说到底自己想说的凡: 我还是当这种文档性质的事物,放到一定仓库里,直接 fork
修改发 PR 更有益于,快捷.不管怎样, Google 的 Bug
系统,也染上上自的痕了,比想象着而善呀~~

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')
        })
    },
}
...