简介
juggle-resource 是一个用于前端资源加载的 npm 包。它可以根据传入的资源列表并发加载资源，并返回一个 Promise。当所有资源都加载完成时，Promise 会被解决并返回加载的资源列表。同时，它也提供了资源加载的事件监听。
安装
使用 npm 进行安装：
npm install juggle-resource --save
用法
加载资源
-- -------------------- ---- -------
------ - ---- - ---- ------------------
----- ------------ - -
-
----- -----
---- ---------------------
--
-
----- ------
---- -------------
--
-
----- ------
---- ----------------
-
--
----------------------------------- -- -
---------------- --------- --------- -----------
-- ------- -- -
-------------------- ----------- -------
---在以上示例中，我们首先引入了 juggle-resource 的 load 方法。然后，声明了一个名为 resourceList 的数组，其中包含了需要加载的资源列表。其中，每个资源都包含了 type 和 url 两个属性，type 表示资源类型，取值可以是 'js'、'css' 或 'img'，url 表示资源路径。最后，我们调用 load 方法，并传入 resourceList，得到一个 Promise。当 所有资源加载完成后，Promise 会被解决，我们就可以在 Promise 的回调中获取加载的资源数组了。此外，第二个回调函数会在加载资源出错时执行。
加载事件监听
juggle-resource 同时支持资源加载的事件监听。当资源加载时，会触发一个 loading 事件，加载完成后会触发 loaded 事件，如果加载出错，则会触发错误事件 error。我们可以通过监听这些事件，实现更复杂的功能。
-- -------------------- ---- -------
------ - ---- - ---- ------------------
----- ------------ - -
-
----- -----
---- ---------------------
--
-
----- ------
---- -------------
--
-
----- ------
---- ----------------
-
--
----- ------ - -------------------
-------------------- ---------- ------ -- -
-------------------- ---------------- ---------------- ------ -----------
---
------------------- ---------- ------ -- -
------------------- ---------------- ---------------- ------ -----------
---
------------------ ----- -- -
----------------------- -----
---
----------------------- -- -
---------------- --------- --------- -----------
---在以上示例中，我们首先引入了 juggle-resource 的 load 方法。然后，声明了一个名为 resourceList 的数组，其中包含了需要加载的资源列表。对于 load() 返回的对象 loader，我们调用了它的 on() 方法来监听 loading、loaded 和 error 事件。然后，我们调用 load() 得到一个 Promise，当所有资源都加载完成时，Promise 会被解决，我们就可以在 Promise 的回调中获取加载的资源数组了。
总结
juggle-resource 是一个方便的资源加载器，支持并发加载多个资源，并提供了资源加载的事件监听。除了本篇文章中的用法，juggle-resource 还有更多高级功能，具体请参考文档。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600565fd81e8991b448e1e9b