什么是 useless-things？
翻译成中文，useless-things 意思就是“没用的东西”，那么这个 npm 包又是干什么用的呢？其实，这是一款提供一大堆有趣但没有实际应用场景的前端组件的 npm 包，使用时可以让你的网站看起来更有趣味性，同时也可以在实现这些组件时锻炼自己的前端技能。
如何使用 useless-things？
1. 安装
在使用 useless-things 前，你需要先将它安装到你的项目中。打开终端（如 Git Bash 或者命令行界面），进入项目的根目录，输入以下命令：
npm install useless-things
2. 导入组件
在你想要使用 useless-things 组件的文件中（如 index.html），导入组件，以引入导入 fractalCloud （云朵效果）为例，导入方式如下：
<script src="node_modules/useless-things/dist/scripts/fractalCloud.js"></script>
这样就可以在文件中使用 fractalCloud 组件了。
3. 调用组件
在导入完 fractalCloud 组件之后，需要在脚本中调用组件，以 fractalCloud 为例，调用方式如下：
const canvas1 = document.getElementById("canvas1");
new FractalCloud(canvas1, {
colors: ["#FFF", "#F0F"],
maxDepth: 16,
drawsPerFrame: 50,
fade: 0.95
}).initialize();这样 fractalCloud 组件就会在 #canvas1 元素中生成。
组件使用指导
fractalCloud
colors: 云朵的颜色数组，默认为["#FFF"];maxDepth: 绘制深度，默认为12;drawsPerFrame: 每一帧绘制的次数，默认为10;fade: 每一帧之间的淡出比例，默认为0.85。
示例代码：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
--------------------- ------------ ------------
------- ------------------------------------------------------------------------
-------
------
------- ----------------------
--------
----- ------- - -----------------------------------
--- --------------------- -
------- -------- --------
--------- ---
-------------- ---
----- ----
----------------
---------
-------
-------fireworks
count: 花火的数量，默认为50；minPower: 花火的最小强度，默认为3；maxPower: 花火的最大强度，默认为6；minSize: 花火的最小尺寸，默认为5；maxSize: 花火的最大尺寸，默认为10；maxAge: 花火最长寿命（秒），默认为2.5。
示例代码：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
--------------------- --------- ------------
------- ---------------------------------------------------------------------
-------
------
------- ----------------------
--------
----- ------- - -----------------------------------
--- ------------------ -
------ ----
--------- --
--------- --
-------- --
-------- ---
------- ---
----------------
---------
-------
-------halftone
density: 半色调的密度，越大越密集，默认为4；smoothness: 半色调的平滑度，越大越平滑，默认为16。
示例代码：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
--------------------- -------- ------------
------- --------------------------------------------------------------------
-------
------
------- ----------------------
--------
----- ------- - -----------------------------------
--- ----------------- -
-------- --
----------- --
----------------
---------
-------
-------总结
通过使用 useless-things 这个 npm 包，我们可以快速地在项目中引入一些有趣的前端组件，美化我们的网站。同时，组件的调用和参数的传入也要求我们对前端的相关技术有一定的了解，这对我们的学习和成长也有着正面的促进作用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055ec681e8991b448dc87f