博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
popup定位引擎popper.js介绍
阅读量:5842 次
发布时间:2019-06-18

本文共 3045 字,大约阅读时间需要 10 分钟。

https://medium.com/@FezVrasta/popper-js-v1-5e8b3acd888c

https://survivejs.com/blog/popper-interview/

本文译自popper.js作者的一篇博客

在过去,我为了在web app中更好地定位我的tooltips和popover,我会花几个小时写同样的一段代码,不断进行微调。每次我开始一个新的项目,总会根据不同的环境对定位有不同的需求。这种繁琐直到我用emberjs开发一个大型应用时达到极致,这个项目中由于比较烂的UX设计决定,几乎她想在每个元素上都支持hover出现一个popover!

在这个大项目中,我们开始使用bootstrap3的tooltip,并不断地通过hack代码来实现新的功能。

在这个大项目中,一个重要的需求是:不允许将tooltip元素移动到body元素的直接儿子,因为如果这样的话,我们的代码就会broken.

几乎经过一年的项目开发并且维护我们的定制化实现,我决定使用Tetcher,因为他貌似非常强大和稳定。。不幸的是,玩了几个小时后,发现他有一个重要的缺陷或者说限制:他会自动地修改dom节点,将popper移动到body的儿子位置。他会增加一些classes并且增加一些inline style,而这你几乎无法控制!

于是我又到github上花了很多时间去查找有没有备选的方案,但是我最终一无所获。难道是没有人需要一个类似的library?或者还没有人能够比较好的抽象出来并实现一个可以单独发布的lib?

我决定花一个周末的事件重写我们自己项目中使用的定位engine,这就是popper.js的又来。

在v0.x时代,popper仅仅是一个js文件,谢了几个函数,聚焦在保持lib小巧轻量级。我希望popperjs能够有很好的扩展性,所以我决定使用middleware system.主要的想法是:计算元素的位置并且允许middleware来根据特定的需求来修改这个位置。

比如:一旦我们有了popper的position,并给了一些边界约束,那么modifier就可以检查popper是否会overflow并且自动反转位置以确保popper不会被视窗cut off.

在工作了一段时间 后,我发现我们需要更好的代码结构以便更好地能够维护使用他,这就是v1.0版本发布的初衷。

为了管理好代码,我决定切换到es6模块上来。我引入了rollup作为code bundler并使用babel作为transpiler,我也将自动化测试引擎从一个无头的chrome setup切换到saucelabs cross-browser test suite上来。

在开发过程中,我决定各个功能模块一级modifier/middleware都放到他们自己的文件中,这样能在Libray中重用。

update流程:

我也重构了整个update流程,也就是每次popper需要更新元素的位置时需要调用的代码。

这个update process会在每一frame都被调用,也就是说大概60fps,这样能够保证位置修改的流畅连贯。为了实现这个连贯流畅的目标,整个update process的代码必须简练,并且尽可能地避免直接访问dom.下面是其工作流程

 

React, Vuejs等第三方view library的集成

我必须考虑为了支持react或者vuejs需要做些什么,由于这些view library都会直接做dom操作,那么popperjs应该做什么设计的思考呢?v1.0将所有的dom操作都集中到一个modifier中,applyStyle

这将允许使用vuejs,react的用户简单地disable掉applyStyle并且替换为vuejs,或者react兼容的函数。

 

Popper.js是如何工作的?

 popper.js使用一个reference element(通常是一个button或者一个link)和一个popper element(任何你需要position的元素),popper.js找到这两个元素的common offset parent,计算reference element相对于这个parent的位置,然后产生出一个坐标集用于设置popper元素的position.就这么简单。

最困难的地方在于必须考虑到一些边界条件,比如跨浏览器的兼容性,box model的能力,必须考虑scrollable element等。简单的用法:

new Popper(referenceElement, popperElement)

这段代码将会把popperElement放置到referenceElement的下发。而且,通过这段代码,你就可以访问所有的内置功能。

1. 如果referenceElement非常靠近了viewport的底部,那么popperElement将会被定位放置到referenceElement的上面,否则会出现popper部分不可见的问题;

2. 如果这两个元素位于两个不同的parents,那么popper.js也将会对这种情况考虑周全,也能很好的定位放置popper元素。

3. 它能够有效地处理scrollable elements和页面的resize场景.

Popper.js和其他类似的解决方案有什么不同呢?

主要的不同点在于该库不需要直接操作dom。这有两个好处:1.他不需要将popper节点移动到另外的context中,比如body的儿子,2.这样很容易将popper.js集成到react,angular,vuejs等view library中。你可以像下面的代码一样轻松地将dom manipulation delegate给vuejs:

new Popper(referenceElement, popperElement, {  modifiers: {    applyStyle: { enabled: false },    updateReactData: {      order: 900,      fn(data) {        this.setState({ data });        return data;      }    },  },});

上面的代码中,我们关闭了内置的applyStyle modifier,并且定义了我们客制化的modifier,该函数代理获取计算出来的popper坐标而将坐标输出到react组件中。

既然你具有了关于popper.js的所有knowledge,那么你就可以对popper element施加任何你想要的样式。

你可能注意到我的定制modifier返回data对象。这个对象是必须的,因为其他的modifier可能会在这个custom modifier之后执行,它们也需要使用这个data对象。这种链条方式的调用使得popper.js非常易于扩展。你可以注入任何定制化的函数在存续modifer之前或者之后运行,或者关闭部分modifer,或者修正其他的modifer的行为,而这只需要通过修改这个data对象数据就可以了。

 

转载于:https://www.cnblogs.com/kidsitcn/p/8987715.html

你可能感兴趣的文章
监控工具htop的安装及使用
查看>>
Nodejs使用图灵机器人获取笑话
查看>>
【读书笔记】第三章 大型网站核心架构要素
查看>>
jvm参数设置
查看>>
易宝典文章——玩转Office 365中的Exchange Online服务 之十三 怎样管理Exchange Online的邮件用户和联系人...
查看>>
nexus 从Window迁移至Linux
查看>>
Spring 任务调度 简单的,使用Schedule
查看>>
通過OPENSHIFT進行DJANGO開發
查看>>
数据库union ,和union all
查看>>
SQL 2005删除作业计划出错(DELETE语句与 REFERENCE约束"FK_subplan_job_id"冲突。)的解决...
查看>>
获取帮助
查看>>
7.4.4 IPv6的地址空间及其表示方法
查看>>
【Touch&input 】支持多个游戏控制器(18)
查看>>
2014年云计算五大趋势
查看>>
我的友情链接
查看>>
Java新手看招 常用开发工具介绍
查看>>
Windows Server 2008更改用户的环境变量和系统环境变量
查看>>
SQL语句学习
查看>>
初次安装系统注意选项
查看>>
mysql的SQL性能监控
查看>>