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

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

ES6小点心之通用弹窗的更多相关文章

  1. ES6小点心第二弹——底部浮现弹窗

    小点心,顾名思义,开箱即食,拿来即用. 献上第二个小点心:SlidePopup. GitHub 在线演示 GitHub 上欢迎大家来找茬^_^ 前端朋友们,今天要介绍的这款小点心牛B了.相信是个前端都 ...

  2. 去掉Win7快捷方式小箭头(win10通用)

    我是一个有强迫症的优化控 , 因为近视的缘故 , 喜欢将桌面图标放大 ,  但是win7快捷方式的小箭头 , 确实不好看 . 用win7魔方之类的软件 , 可以解决这个问题 , 但是有时候重启 ,   ...

  3. 6个讨喜的 ES6 小技巧

    [编者按]本文作者为 Axel Rauschmayer,主要介绍6个 ES6 小技巧.文章系国内 ITOM 管理平台 OneAPM 编译呈现. 在本文中,笔者将介绍6个由 ES6 新功能带来的小技巧. ...

  4. 百度小程序自定义通用toast组件

    百度小程序Toast组件 author: @TiffanysBear 百度小程序自定义通用toast组件 BdToast百度小程序自定义通用组件-github地址 需求 手百小程序的toast仅支持在 ...

  5. 百度智能小程序弹窗组件wcPop|智能小程序自定义model弹窗模板

    百度智能小程序自定义弹窗组件wcPop|百度小程序model对话框|智能小程序弹窗界面模板 最近百度也推出了自己的智能小程序,如是就赶紧去试了下,官方提供的api还不是狠完整.而且官方提供的弹窗组件也 ...

  6. 浅谈JS-cookie,你是香甜可口的小点心吗?

    引言: 想必大家一定听过或看过浏览器cookie,早在nokia雄霸天下.我们还不太明白浏览器的时候,cookie就已经悄悄地存在于浏览器的“设置选项”中了.当时它的用途仅仅是让你选择是否“清除”.年 ...

  7. 小程序自定义modal弹窗封装实现

    前言小程序官方提供了 wx.showModal 方法,但样式比较固定,不能满足多元化需求,自定义势在必行~ 老规矩先上图 点击某个按钮,弹出 modal框,里面的内容可以自定义,可以是简单的文字提示, ...

  8. 微信小程序封装自定义弹窗

    最近在做小程序的登录,需要同时获取用户手机号和头像昵称等信息,但是小程序又不支持单个接口同时获取两种数据,因此想到自定义一个弹窗,通过弹窗按钮触发获取手机号事件.记录一下. 具体代码如下: 业务代码中 ...

  9. 答应我,这次必须搞懂!痛点难点Promise。(小点心async/await,基于Promise的更优方案)

    Promise 出现的原因 在 Promise 出现以前,我们处理一个异步网络请求,大概是这样: // 请求 代表 一个异步网络调用. // 请求结果 代表网络请求的响应. 请求1(function( ...

随机推荐

  1. 最重要的 Java EE 最佳实践

    參考:IBM WebSphere 开发人员技术期刊: 最重要的 Java EE 最佳实践 IBM WebSphere 开发人员技术期刊: 最重要的 Java EE 最佳实践 2004 年 IBM® W ...

  2. Android-Volley网络通信框架(ImageRequest,ImageLoader,NetWorkImageView)

    1.回想 上篇已经学习了,RequestQueue  , StringRequest ,JsonObjectRequest 的使用 2.重点 (1)Volley请求图片的三种方式 (2)ImageRe ...

  3. Android查缺补漏--BroadcastReceiver的类型与使用

    Broadcast 是一种被用于应用内和应用之间传递信息的机制.一个广播可以对应多个接受者.一个完整的广播机制,需要具有以下三个要素: 发送广播的Broadcast 接受广播的BroadcastRec ...

  4. 通过Graph 浏览器体验Microsoft Graph

    作者:陈希章 发表于 2017年3月18日 上一篇介绍了Microsoft Graph的基本概念,接下来我们快速体验一下Microsoft Graph到底能做什么? 为了帮助开发人员直观和快速体验Mi ...

  5. wordpess关闭评论的方法,wordpress开发

    由于某种原因,需要把wordpress的评论关闭,下面讲一下方法. 在wordpress模板中,找到文章模板页面文件single.php,在里面找到 <?php comments_templat ...

  6. java 正则学习

    前言 在网上找了许多关于正则解析 URL,结果不是很满意,所以自己学习正则: java url 那么解析 url 的代码如下: import java.util.regex.Matcher; impo ...

  7. puppet配置问题统计

    一. [root@client puppet]# puppetd --test --server master.test.cominfo: Creating a new SSL key for cli ...

  8. [array] leetcode - 31. Next Permutation - Medium

    leetcode - 31. Next Permutation - Medium descrition Implement next permutation, which rearranges num ...

  9. ucore lab1 bootloader学习笔记

    ---恢复内容开始--- 开机流程回忆 以Intel 80386为例,计算机加电后,CPU从物理地址0xFFFFFFF0(由初始化的CS:EIP确定,此时CS和IP的值分别是0xF000和0xFFF0 ...

  10. Python 多线程进程高级指南(二)

    本文是如何<优雅地实现Python通用多线程/进程并行模块>的后续.因为我发现,自认为懂了一点多线程开发的皮毛,写了那么个multi_helper的玩意儿,后来才发现我靠原来就是一坨屎.自 ...