笔录自个儿发现的率先个有关 谷歌(【葡京在线开户】Google) 的 Bug

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

葡京在线开户 1

葡京在线开户 2

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

Bug 本人是很简单的,正是 谷歌(Google) 的 Android
在线参考文书档案中,有一处示例代码,有一个很惨重的荒唐,
会引起上上下下章节的代码都不能有效执行.

前者业务逻辑主要分为【交互功用】和【数据彰显】两地方。数据体现可选拔MVVM
框架来促成。前端的互相功用常用的也就那么两种,比如弹窗,楼层定位,倒计时,下拉刷新,上拉加载越来越多等等。这个交互效率完全能够提议来做成通用的模块,今后不用再劳心费神去想怎么落到实处。就像Swiper
封装了1个类来专门做轮播图一样,本种类的指标是通过包装一多级类来贯彻弹窗,楼层定位,倒计时等相互成效。

对 Android 的 瑟维斯服务具有理解的,能够来此处看下,看能还是不可能窥见不行错误:
https://developer.android.com/training/connect-devices-wirelessly/nsd.html#discover

弹窗就无需多说了,差不多全数存在交互的页面都会用到,贰个页面上竟然会有 N
七个弹窗。弹弹弹,弹出鱼尾纹。

葡京在线开户 3

弹窗的逻辑其实很简短,便是打开和关闭。假若那还不够,那就再加个回调。若是从面向对象的角度去看,把弹窗看成3个类想必是极好的,与之绑定的DOM块是它的属性,打开和倒闭是它的办法,而且这么能够兑现弹窗样式和逻辑的分手。

依照作品所谓代码,每一趟注册服务,都会战败,错误码是0.其实那里,还有另一处错误,便是服务类型的格式,必须是以点符号
(.) 结尾,因为在一3次调里,如若注册服务成功,你获得的 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

最终笔者想说的是: 小编或然认为那种文书档案性质的事物,放到一定仓Curry,直接 fork
修改发 P汉兰达 更有益,神速.不管怎么样, 谷歌 的 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 实例都有1个 open 方法和二个 close
方法,并且可在调用时传出3个回调。请留意,在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')
        })
    },
}
...