介绍
前端开发中，mock 数据是必不可少的环节之一。而使用 mock 数据的过程中，我们经常需要随机获取一个符合条件的变量。这时，我们可以使用一个 npm 包 mock-variable 来简化我们的代码工作。
mock-variable 是一个方便的 npm 包，可用于生成随机的变量，并生成具有指定属性的变量数组。在使用它之前，我们需要先在命令行中安装它。
npm install mock-variable
使用
使用 mock-variable 的过程相对简单。首先，我们需要根据它的规则，定义一个 json 对象。
-- -------------------- ---- ------- ----- ------------ - ------------------------- --- ---- - - ----------- ------ ------------ -- -------- ----- ----- ------------------- -- --------------------- -- ----- --------- -- --- ------ - ------------------------展开代码
在这个 json 对象中，我们可以随意定义变量名和类型，包括字符串、数值、数组、正则表达式等等，这些变量名和类型可以任意组合。当我们定义完规则之后，就可以使用 mock-variable 的 mock 方法创建一个随机变量对应的对象。我们看一下这个方法的具体参数。
MockVariable.mock(rule, count, prefix, postfix);
- rule：定义变量的规则，可以是任意的 json 格式。
- count：指定生成的变量个数，可省略，如果省略，则默认为 1。
- prefix：指定每个变量名的前缀，可省略，如果省略，则默认为''。
- postfix：指定每个变量名的后缀，可省略，如果省略，则默认为''。
示例
-- -------------------- ---- ------- ----- ------------ - ------------------------- --- ---- - - ----------- ------ ------------ -- -------- ----- ----- ------------------- -- --------------------- -- ----- --------- -- --- ------ - ------------------------ --------------------展开代码
输出：
[{ "name": "ma", "age": 22, "sex": "M", "weight": 102.1, "height": 164.0, "sn": "0111638657" }]
深度
如果我们希望生成的变量数组长度大于 1，可以在调用 mock 方法时，指定 count 参数。例如：
-- -------------------- ---- ------- ----- ------------ - ------------------------- --- ---- - - ----------- ------ ------------ -- -------- ----- ----- ------------------- -- --------------------- -- ----- --------- -- --- ------ - ----------------------- --- --------------------展开代码
输出：
-- -------------------- ---- ------- - - ------- ------ ------ --- ------ ---- --------- ------ --------- ------ ----- ------------ -- - ------- ----- ------ --- ------ ---- --------- ------ --------- ------ ----- ------------ -- - ------- ------ ------ --- ------ ---- --------- ------ --------- ------ ----- ------------ - -展开代码
学习和指导意义
使用 mock-variable 可以大大简化我们的代码编写工作，也可以方便我们在开发阶段复现一些特殊的场景，以便调试。使用规则灵活、生成的数据多样性高、生成数量可控，真正做到了捣鬼、玩笑、测试以及研究敏捷！希望大家可以尝试使用并体验其中的方便和快捷。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600560b181e8991b448def40
