在前端开发中，我们往往需要使用大量的数据来模拟接口返回等场景，此时就需要用到 mock 数据的技术。常用的 mock 工具有 json-server，mockjs 等，但这些工具都需要手写数据，费时费力。今天我们介绍一个好用的 npm 包，名为 spirit-site-data，它可以根据某个站点的 HTML 代码自动生成 mock 数据，并且支持多种渲染引擎。
安装
首先需要全局安装 spirit-site-data，命令如下：
npm install -g spirit-site-data
使用
在终端中输入命令 ssd -u [url]，url 表示你想要生成 mock 数据的站点链接。如下：
ssd -u https://book.douban.com/
这样就会在当前目录下生成一个以该站点域名为名字的 json 文件，其中就存储了大量的 mock 数据。
这些数据包括了该站点的大部分 HTML 元素，如 div、img、a 等等，每个元素中都包含该元素的所有属性和子元素，以及一些随机数据，如下：
-- -------------------- ---- -------
-
------ ------
-------- -
-------- -------
--------- -----
------ ----
--
----------- -----
------- -----
-------- ---
----------- ---------------------------
------- ---------------------
-我们可以根据这些数据随意组合，来模拟各种场景，如渲染一个列表，实现下拉框选择等功能。
配置
在生成 mock 数据的时候，我们还可以配置一些选项。
-p/--page n：指定生成页面的数量，默认为 1 个页面。-e/--engine engine：指定渲染引擎，支持多种引擎，包括vue、react、angular等。-o/--outDir path：指定生成数据的目录，默认为当前目录。
示例代码
下面是一个示例代码，使用 spirit-site-data 自动生成的 mock 数据来渲染一个 Todo List：
-- -------------------- ---- ------- --------- ----- ------ ------ ----- ---------------- ----------- ------------ ------- ------ -------- --------- --- ------------------- ------- ------------------------- ------- -------
-- -------------------- ---- -------
------ - ---- - ---- -------------------
----- ------- - -------------------------------
----- -------- - ----------------------------
-- ----------- -
---------------------- --- ---------
- ---- -
--- ---- - - -- - - --- ---- -
----- -- - ----------------------------
----- -------- - -------------------------------
----------------------------- ------------
----- ---- - ------------------------------
-------------- - ----- --- - ----
------------------- ------
--------------------
-
-我们可以看到，在这段代码中，我们首先导入了 load 函数，并使用它加载了 book.douban.com.json 这个文件中存储的数据。接着，我们使用 select 函数选中了一个 id 为 #todoList 的元素，然后在循环中创建了 10 个 li 元素，每个 li 元素包含一个 checkbox 和一个 span，最后将它们全部加到了 todoList 中。由于 ssdData 对象中的 Li 元素是使用碎片对象创建的，因此需要使用 append 方法将它们添加到页面中。最终效果如下：
通过这个简单易用的 npm 包，我们可以方便地生成大量的 mock 数据，并实现各种需求，大大提高了我们的开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6006709f8ccae46eb111f043