在前端开发中，我们经常需要使用各种第三方库和工具来提高开发效率和优化项目架构。其中，npm 是前端最常用的包管理器之一，在 npm 上有各种各样的包可以供我们使用。这篇文章将介绍一个 npm 包 swell 并给出使用教程。
什么是 swell
swell 是一个可以生成简洁、响应式、易于自定义的骨架屏的 npm 包。在网页加载慢或网速差的情况下，骨架屏可以帮助用户快速看到网页的大致布局，减少等待时间，提高用户体验。
如何使用 swell
安装
使用 npm 包管理器来安装 swell：
npm install swell --save
基本使用
在项目中引入 swell，然后使用 Swell() 函数来生成骨架屏：
-- -------------------- ---- ------- ------ ----- ---- -------- ----- ------- - --- ------- ------- ----------------------------------------- -- ---- ------- - ------ -------- ------- -------- ------------- ----- -- ------ - ------ -------- ------- ------- ---------- ------ -- ----------- -- ------ ------- ------- ------- ---------- ------ --- ---
上面代码中，首先从 swell 包中导入 Swell() 函数。new Swell() 会生成一个新的骨架屏对象，接受一个对象参数，对象中的 target 属性表示将要放置骨架屏的元素，这里指定了 body。然后，我们可以在可选参数里指定一些自定义的骨架屏展示元素，这里使用了头像、标题和段落三个元素。
最后要注意的是，Swell 实例必须在浏览器环境中初始化。
自定义
swell 提供了多种自定义骨架屏的方式，下面列出其中的几种：
- 指定容器元素：通过指定
target属性将骨架屏放置在指定的容器元素中。 - 使用 SVG：SVG 图形可以灵活地展示各种形状并与 CSS 优雅结合。可以使用
svg属性来指定 SVG 元素的类型和样式。 - 指定 animation-delay：使用
differentDelay配置项来指定不同骨架屏元素的动画延迟时间，增加动画效果的多样性。
下面是一个自定义骨架屏例子：
-- -------------------- ---- -------
------ ----- ---- --------
----- ------- - --- -------
------- ----------------
---- -
------- -------------- ------- ------- ------ --
----- ------------ ------ ------- ------- ------- ----------- ----------- --
--
--------------- -
------- --
----- ----
--
---上述代码中，我们将骨架屏放在 custom-swell 元素中，并使用 SVG 展示两个元素。同时对这两个元素添加了不同的动画延迟时间，让它们有不同的动画效果。当然，你也可以根据自己的需要来自定义展示元素。
总结
如上所述，swell 包可以帮助我们快速、简便地生成自定制的骨架屏，进一步优化用户体验。在使用过程中，我们需要注意初始化时必须在浏览器环境中进行，并且可以根据需要自定义骨架屏的展示元素。
示例代码：https://github.com/davidewells/swell
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/75505