经过多年的发展，前端开发已经成为了 web 应用程序开发的核心要素之一。而 npm 作为 node.js 的默认包管理工具，可以大幅度提升前端开发效率。其中 tm-service-dummy 是一个非常有用的 npm 包之一，本文将为大家介绍 tm-service-dummy 的使用方法，让大家更加方便的进行前端开发。
什么是 tm-service-dummy
tm-service-dummy 是一个用于前端开发的虚拟数据生成器，可以用来快速创建虚拟数据，进行前端页面开发和测试。在前端开发中，很多情况下需要一些测试数据来验证程序在实际运行过程中的表现。这时 tm-service-dummy 就可以为开发者提供一个简单而可靠的解决方案。
安装 tm-service-dummy
tm-service-dummy 可以通过 npm 包管理工具进行安装，只需要在命令行中输入以下命令即可：
npm i tm-service-dummy
使用 tm-service-dummy
基本使用
在使用 tm-service-dummy 时，需要按特定的结构格式定义需要生成的数据。可以在创建的 js 文件中，定义一个返回对象的方法，来定义所需要的数据。例如，在创建一个数据集合源的 js 文件 dummyData.js 中，可以定义如下的 js 代码：
module.exports = () => ({
'articles|10': [{
title: '@ctitle(5, 10)',
content: '@cparagraph(3, 7)'
}]
});这段代码中，我们定义了一个长度为 10 的文章集合，每篇文章都有一个随机生成的标题和正文内容。其中 @ctitle(5, 10) 是生成中文 5 到 10 个字符长度的字符串的命令，@cparagraph(3, 7) 是生成中文 3 到 7 句话长度的字符串的命令。详情可以参考 Mock.js。
然后，在需要使用这个数据集合的前端页面代码中，可以引用此数据集合源文件，并调用方法来生成所需要的数据，如下所示：
const dummyData = require('./dummyData');
const articleList = dummyData().articles;
console.log(articleList);这段代码会在控制台中打印出包含 10 篇文章的文章集合。
配置自定义规则
除了可以使用预定义的模板指令外，Mock.js 还支持开发者扩展自定义指令。例如，我们需要测试网页中的一个日期格式化函数，可以使用 Mock.js 自定义指令来生成日期，如下所示：
-- -------------------- ---- -------
--------------------
------------- ------- - ---- -- -
----- ---- - --- -------
----- ---- - -------------------
----- ----- - --------------------- - ---------------
----- --- - ----------------------------------
------ ------------------------------------------
-
---上面代码中，我们定义了一个名为 dateYYYYMMDD 的自定义指令，用于生成格式为 yyyy-MM-dd 的日期字符串。然后在数据集合源的 js 文件中，指定需要生成日期的键时，可以使用该指令来生成日期字符串，如下所示：
module.exports = () => ({
'articles|10': [{
title: '@ctitle(5, 10)',
content: '@cparagraph(3, 7)',
createdTime: '@dateYYYYMMDD'
}]
});上面代码中，我们在生成文章数据集合时，指定了每篇文章的创建日期使用了 @dateYYYYMMDD 指令，生成格式为 yyyy-MM-dd 的日期字符串。
自定义函数
Mock.js 中除了可以使用指令来生成数据外，还提供了对于数据的额外操作，例如数据的过滤和排序。在使用这些操作时，mock.js 需要传入一个参数为数组的回调函数，每次执行函数时将把需要操作的临时数据存放在参数中，此时我们可以对数据进行自定义处理。
例如，我们需要将文章数据集合按照创建时间 descending 排序，可以使用 Mock.js 提供的 sort 方法，并结合自定义函数进行处理，代码如下：
-- -------------------- ---- ------- ----- --------------------------- - --- -- -- - ----- ----- - --- -------------------- ----- ----- - --- -------------------- ------ ----- - ------ -- ----- ----------- - ------------------------------------------------------- -------------------------
上述代码中，我们首先定义了一个根据文章创建时间进行 descending 排序的自定义 sort 比较函数 sortByCreatedTimeDescending，然后使用这个函数对生成的文章集合进行排序，打印结果即为按照创建时间 descending 排序的文章集合。
总结
本文介绍了 npm 包 tm-service-dummy 使用方法和相关技巧，包括如何创建和调用数据集合源、如何自定义规则和函数。使用 tm-service-dummy 能够快速生成测试数据，方便我们进行前端开发，并且可以应对各种需要使用虚拟数据的场合。希望本文对于前端开发者有所指导和帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005600781e8991b448ddd4c