ES6稍微点心之通用弹窗

一.概况

eoLinker 是眼下正式领先、国内极特别的在线 API 接口管理平台,提供自动生成 API 文档、API 自动化测试、Mock 测试、团队通力合作等功效,旨在缓解由于前后端分离造成的付出效率低下问题。

当前 eoLinker 为 Google、IBM、腾讯、中国联通、海尔、神州优车、国美等数千贱店供快速、专业、稳定的
API 管理服务。同时 eoLinker 还是 Google 谷歌开发者联盟的协作产品以及合作社,不期开办线下交流分享活动推向国内
API 管理领域的进步。

 

图片 1

图片 2

二.初步源项目及链接

汉语官网:www.eolinker.com

开源支持:https://www.eolinker.com/#/os/download

Github:https://github.com/eolinker

码云:https://gitee.com/eoLinker-API-Management

Coding:https://coding.net/u/eolinker/project

Blog:http://blog.eolinker.com

视频教程:http://blog.eolinker.com/\#/course/

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

三.特性

1、免费还开源,eoLinker 拥有强大的免费产品,在过去之一致年里
eoLinker 已迭代超过 300 个本子,优化近千功夫能点,同时采纳开源精神,提供国际化的开源产品(支持中文简体、繁体以及英语),为常见的开销、测试和管理人员提供标准的产品。

2、同类产品中最强大的 API 文档管理网,支持时 HTTP/HTTPS 协议及独具主流请求方式,并且提供了强劲的本管理功能,可以随时随地回滚
API 信息。同时支持数据库管理、状态码管理、项目文档管理等于常用管理力量。

3、代码自动生成文档,通过读取代码中的 EOML ( eoLinker 标注语言)注解,eoLinker 可以自动生成 API 文档,省去了还录入的难为,无缝连接开发和管理工作。

4、API 接口测试,支持文件、在线、跨域、自动化测试相当力量。同时有参数构造器,可以对要参数进行活动构造,加密、分割、随机字符串等功能全面。配合测试用例可以死好地比请求结果与模型,找来
API 可能出现的问题。

5、API 自动化测试,eoLinker 是时全球唯一一放缓支持界面与代码双模式之自动化测试工具。在
UI 界面模式下,你免欲编制任何代码即可创建数量交互关联的
API 测试用例(比如注册-登录-检查登陆状况-退出登录);同时您也可由此编制 Javascript 代码来布局复杂的自动化测试场景。这些还大幅度地简化了开发测试人员的
API 测试工作,每次出形成就待一个键即可自动测试所有
API 并且转变测试报告,帮助了解项目 API 的健康状况。

6、API Mock 测试,提供极致强之 Mock 功能,支持 MockJS,支持电动刷新返回结果及强赶回的结果。同时还支持针对
API 进行呼吁校验,当参数或值未符合预设的模板时亦可即时找有问题所在。

7、支持文档分享和导出,你可经 eoLinker 在线生成接口文档,也可以导出成为 HTML、PDF 以及 Word 等,快速分享要发表 API 信息。

8、支撑 Postman、RAP、RestClint 等数码导入,无需再录入 API 信息,一键导入即可切换平台。

9、精的团队协作功能,你可由此 URL 快速邀请成员或参加某个项目,eoLinker 提供了周全的日志追踪和权限管理效能。

10、具最完善的产品线,eoLinker 除了拥有线及本之外,还提供了免费开源版本、浏览器插件、PC 端桌面程序等,可以满足公司有的 API 管理需求。

前端业务逻辑主要分为【交互作用】和【数据显示】两上面。数据展示可利用
MVVM
框架来落实。前端的彼此作用常用的也便那几种,比如弹窗,楼层定位,倒计时,下拉刷新,上拉加载重多等等。这些交互作用了可领到出来做成通用的模块,以后不要还劳心费神去想怎么落实。就比如
Swiper
封装了一个看似来特别召开轮播图一样,本系列的目的是经过包装一层层类来落实弹窗,楼层定位,倒计时等竞相作用。

四.图片简介

图片 3

图片 4

图片 5

 

图片 6

 

弹窗就无需多说了,几乎有在交互的页面还见面因此到,一个页面及竟会来 N
多独弹窗。弹弹弹,弹出鱼尾纹。

 总结:

 eoLinker 吸收了 Postman 以及 RAP 等接口管理产品之助益,开发有了很多正规首创以及领先的机能,同时针对国内市场做出了森的优化改进,提倡远程办公及便捷开发,深受全球的汉语开发者的爱护,真正成功了为接口管理还简便。如果您在工作中可能会见因此到接口,或者对接口感兴趣,推荐你注册一波打探一下。

弹窗的逻辑其实很简单,就是开辟和关闭。如果及时还不够,那便更加个回调。如果起面向对象的角度去看,把弹窗看成一个类想必是太好的,与之绑定的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')
        })
    },
}
...