你不知道的Popperjs上篇

       ElementUI中Tooltip、Select、源码Cascader、代码TimePicker等组件是滚动滚动如何实现提示框定位到目标元素的？答案是借助于Popperjs，本文将深入探讨Popperjs的源码用法和特性。

       在ElementUI的代码ardusub 源码源码中首次了解到Popperjs，但不清楚其具体版本。滚动滚动通过对比ElementUI代码与Popperjs 0.5.2版本，源码发现二者高度相似，代码因此可以判断ElementUI使用的滚动滚动是0.5.2版本的Popperjs。接下来，源码我们将从0.5.2版本开始，代码学习Popperjs的滚动滚动使用。

       Popperjs的源码infy源码主要功能是将一个DOM元素定位到目标DOM元素附近，例如Tooltip、代码Popover、Popconfirm、Dropdown、Select等组件的提示框或弹窗位置。通过`getBoundingClientRect()`方法获取目标元素的位置，设置Popper元素的样式，使得其位于目标元素的右侧。

       实现定位的基本思路是获取目标元素的位置，将Popper元素设置为固定定位，并根据目标元素的`right`和`top`值调整自己的位置。考虑到兼容性问题，对于IE9及以下浏览器，边疆源码需要对`getBoundingClientRect()`方法进行兼容性处理。

       除了基本功能实现，Popperjs还提供了丰富的扩展使用场景，如在不同方位定位Popper元素。通过配置属性`placement`，可以指定Popper元素的定位方位，如`top-start`、`top-end`、`bottom-start`等。

       为了实现不同方位的定位，Popperjs内部定义了`baseOffsets`数组，用于存储不同方位的默认位置。在计算最终位置时，彩灯源码根据`placement`值和`start`、`end`属性进行定位。此外，还需要考虑`margin`值对元素大小的影响，通过`getOuterSizes()`函数计算Popper元素的实际大小。

       实现定位的代码中还包含了对`Window.getComputedStyle()`方法的使用，以获取元素的样式属性值。`_getOffsets`函数用于获取参考元素和Popper元素的位置和尺寸，计算最终的定位信息。在定位过程中，`_getOffsets`函数中使用了`shift`函数调整位置，确保`right`和`bottom`值的正确计算。

       为了提升定位性能，源码打牌可以利用CSS3硬件加速。通过`transform`属性实现元素的平移，避免页面重排和重绘。同时，需要对计算值进行四舍五入处理，以避免字体模糊。考虑到浏览器兼容性问题，需要添加获取当前浏览器支持的前缀属性。

       最后，将定位功能封装在`applyStyle`函数中，提供了一套完整的定位解决方案。此外，Popperjs还支持滚动容器、保持DOM上下文、兼容性、可配置性、避免裁剪和溢出、快速翻转等特性。

       本文仅介绍了Popperjs的扩展使用场景和CSS3硬件加速的基本概念。下篇将深入探讨保留DOM上下文、处理滚动条、裁剪和溢出、快速翻转等场景，以及如何进行自定义扩展。敬请期待。

分钟快速入门rollup.js

       学习rollup.js的原因

       rollup.js是用于打包JavaScript ES模块的工具，许多知名框架和库如Vue、React都是通过它进行打包。相比于Webpack专注于应用打包，rollup.js更专注于JavaScript类库的打包。学习rollup.js对于理解Vue和React等框架源码，或者自建JavaScript类库至关重要。

       rollup.js的工作原理

       rollup.js可以将自定义的JavaScript代码与第三方模块打包在一起，形成库或应用，并允许使用插件实现特定功能。其运行机制支持ES模块标准，并可通过rollup-plugin-commonjs插件支持CommonJS标准。

       安装rollup.js

       使用nodejs环境安装rollup.js。首先全局安装rollup，依赖于nvm（Node Version Manager）来管理nodejs版本。

       rollup.js打包实例

       通过几个简单的步骤，从创建目录和文件开始，编写模块并使用rollup指令预览和输出打包后的代码。注意-f参数用于指定输出格式，如AMD、CJS、ESM等，并通过-o参数指定输出文件路径。

       验证打包结果

       打包成功后，尝试运行生成的文件，注意不同格式可能需要额外的工具或配置来兼容运行。通过babel-node和.babelrc配置文件实现ES模块到CommonJS格式的转换。

       rollup.js配置文件

       创建rollup.config.js文件，自定义打包配置，包括输入和输出。使用rollup -c指令进行打包，并查看生成文件的内容。

       API打包编写

       借助rollup.js API实现更个性化和模块化的打包方式，通过rollup-input-options.js和rollup-output-options.js配置输入和输出，实现多种格式的输出。

       总结

       本文介绍了rollup.js的多种打包方式，包括命令行、配置文件和API，并简要提及了更多特性如Tree-shaking、watch等。下文将详细演示各种插件的用途及用法，敬请关注。推荐阅读其他相关资源以深化JavaScript打包工具的理解。