npm 是前端开发中非常重要的工具，它提供了大量的第三方插件包，使得前端工程化开发变得更加轻松和高效。在这篇文章中，我们将介绍一个非常实用的 npm 包 - kaboodle。
kaboodle 简介
kaboodle 是一个能够帮助我们在开发过程中快速生成骨架屏的 npm 包。它的作用是在页面网络请求加载过程中，快速展示一个“骨架屏”，避免出现空白页面的情况。使得用户有更好的体验感，并降低页面的跳出率。
安装 kaboodle
在使用 kaboodle 之前，我们首先需要安装它。我们可以在命令行中执行以下命令：
npm install kaboodle --save
kaboodle 使用教程
详细了解了 kaboodle 的作用和安装之后，接下来我们将开始使用 kaboodle。使用 kaboodle 非常简单，我们只需要引入 kaboodle 包并调用它的 API 就可以创建一个骨架屏。
引入 kaboodle 包
我们可以使用 require 或 import 方法引入 kaboodle 包。在这个例子中，我们将使用 import 方法。
import kaboodle from 'kaboodle';
创建骨架屏
在引入 kaboodle 包之后，我们需要使用 kaboodle.createSkeletonAPI() 方法创建一个骨架屏。使用该方法时，我们可以向其传入一些自定义参数以根据我们的需求生成一个个性化的骨架屏。这个 API 可以通过以下方式调用：
const skeleton = kaboodle.createSkeletonAPI(options);
options 参数说明：
background：骨架屏的背景颜色，默认为 #f3f3f3。highlightColor：骨架屏生成时需要高亮的区域的颜色，默认为 #ffffff。highlightOpacity：骨架屏高亮区域的透明度，默认为 0.3。highlightAnimate：骨架屏高亮区域的动画时间，默认为 1。单位为秒。defaultOpacity：骨架屏默认透明度，默认为 0.5。zIndex：骨架屏的 CSS 层级，默认为 9999。
示例代码：
const skeleton = kaboodle.createSkeletonAPI({
background: '#f3f3f3',
highlightColor: '#ffffff',
highlightOpacity: 0.3,
highlightAnimate: 1,
defaultOpacity: 0.5,
zIndex: 9999,
});创建骨架屏样式
完成了骨架屏的创建之后，我们需要为其添加 CSS 样式。
-- -------------------- ---- -------
----------------- -
--------- ------
-------- ------ ----------
----- --
------ --
---- --
------- --
----------------- ------ -------------
-
------------------- -
----------------- ------ -----------------
-------- ------ -------------------
---------- ---------------- ------ ------------------- -------- ---------
--------- ---------
-
---------- ---------------- -
-- -
---------- ---------------- ---
-
---- -
---------- --------------- ---
-
-使用骨架屏
在骨架屏创建和样式设置完毕后，我们可以将其应用在我们的页面上。具体方法是：通过 kaboodle.createSkeletonAPI() 生成出骨架屏之后，我们可以传入需要预加载的 DOM 元素，然后生成骨架屏。
skeleton.apply(document.getElementById('target'), {
exclude: ['.exclude1', '.exclude2'],
});apply API 参数说明：
element：DOM 元素，即需要预加载的 DOM 元素，该参数为必填项。exclude：一个包含 CSS 选择器字符串的数组，需要从骨架屏中排除的元素，默认值为 []。
示例代码：
<div id="target"> <div class="exclude1">这个 div 不需要预加载</div> <div>这个 div 需要预加载</div> <img class="exclude2" src="./example.jpg"/> </div>
skeleton.apply(document.getElementById('target'), {
exclude: ['.exclude1', '.exclude2'],
});kaboodle 源码解析
最后，让我们来看一下 kaboodle 的源码。需要注意的是，kaboodle 的源码非常优秀，带有详细的注释和代码结构。阅读该源码将非常有益于加深对于其原理和实现过程以及提高自身的代码质量和编码能力。
-- -------------------- ---- -------
------ ------- ---- ---------------
-- --
----- ------------------ - ---------------------
----- ----------------- - -------------------
----- ------------------ - --------------------
---
- ---------
--
--- -----------
-- --- -------- -----------
-- -- ------------------- ---------------
-- ----------------------
-- ---- ------- -----
----- ----------------- - ------- -- -
----- ---- - --------------
-
----------- ----------
--------------- ----------
----------------- ----
----------------- --
--------------- ----
------- -----
--
--------
--
----- -------- - -
---------- --------------------------------
--------------- ----- ---- ------ ------ -- -------- -
----- -- - ------------------------------
----- ------------ -
------ ------- --- -----------
- ---------------------
- ----------------------------------
------------------------ ---------------------- ------------------------
------------------------ ------------------------------------------------------------------------------------
-------------------
--------------------
------ ---
--
-- ----
--------------- -
----- -- - ------------------------------
------------------------ --------------------- ------------------------
------------------------ - ----------------
----------------- - --------
------------- - --
-------------- - --
------------ - --
--------------- - --
--------------- - ------------
------ ---
--
-- ------------------------------------------
----------------- -
----- --- - --------------------------------
----- ---- - --------------
----- --- - ---------------------
----- ------- - -------------------------
----- --------- - --------------- -- ----------------- -- ---------------
----- ---------- - --------------- -- ------------------ -- ----------------
----- --------- - ----------------- -- -------------- -- --
----- ---------- - ------------------ -- --------------- -- --
----- --- - ------- - --------- - ----------
----- ---- - -------- - ---------- - -----------
----- ----- - ----------
----- ------ - -----------
------ - ---- ----- ------ ------ --
--
--
-- ------------------
-- ------------- -
----- ----- - --------------------------------
---------- - -----------
---------------------------------
---------- - ------------
-
----------------------
-
---------------------- -
--------- ---------
---------- ---------------- ------------------------- -------- ---------
-
--
------------------------
--
-- --------
----------------------
-
---------- ---------------- -
---- -
---------- --------------------- - ----------------------- - --------
-
-- -
---------- -------------------- - ----------------------- - --------
-
-
--
------------------------
--
------ ---------
--
----- ----- - ---------- -------- -------- -- -
----- ---- - --------------- -------- -- -- ---------
----- ------------- - ----------------------------------------------------------
-- ----------------------- -
-------
-
----- ------- - -------------------------
----- ----- - -------------------------------------
-------------------------- -- -
---------------------------------------
---
----------------------------------------
---------------- ---- ----- ------ ------ -- -- -
----- -- - ------------------------ ---- ----- ------ ------ ---
------------------------
---
-----------------------------------
--
------ ------- - ------------------ ----- --总结
通过阅读本文，相信您已经掌握了 kaboodle 的使用方法和一些原理知识，同时也深入了解了简单的骨架屏原理，这对于提高自身的前端开发能力和实用性做得非常有帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056caa81e8991b448e6154