携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第5天，点击查看活动详情
前言
大家好，我是小阵 🔥，一路奔波不停的码字业务员
如果喜欢我的文章，可以关注 ➕ 点赞，与我一同成长吧~😋
加我微信：zzz886885，邀你进群，一起学习交流，摸鱼学习两不误🌟
开开心心学技术大法~~
来了来了，他真的来了~
正文
平时前端开发时总会用到mock数据，一般的mock数据可以通过mockjs来生成
但是html结构怎样mock生成呢？
比如我要调试一个瀑布流的组件，我需要高度不一的图片或者文案，文案的话可以通过mockjs来生成，但是高度不一的图片怎样生成呢？
因此我们可以通过dummyjs来生成
安装
通过cdn
<script src="https://dummyjs.com/js"></script>
通过node包
const Dummy = require('dummyjs'); // es5 or node
import Dummy from 'dummyjs'; // es6
使用
在html中使用
<p data-dummy></p>
比如，如果要生成包含150个单词的p标签
<p data-dummy="150"></p>
生成随机30-100个单词的的p标签
<p data-dummy="30,100"></p>
生成指定宽高的占位图片img
<img data-dummy="400x300" />
生成随机宽高的占位图片img
<img data-dummy="400,100x100,400" />
一键生成复杂的html结构
// 生成包含table、image、form的复杂html结构
<div data-html></div>
一键生成指定的html结构
<div data-html="h1,table,form,ul,p"></div>
重复多个html结构
<div data-repeat="3">Team Member</div>
在js中使用
返回一个img的base64字符串
Dummy.img(400,300)
返回指定个数的word
Dummy.text(4,7)
具体示例
console.log('Dummy 400*300的img',Dummy.img(400,300))
console.log('Dummy 随机4-7个word',Dummy.text(4,7))
快速调试
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- <p data-dummy></p>
<p data-dummy="150"></p>
<p>哈啥都好说</p> -->
<div id="root"></div>
<!-- <div data-html></div> -->
<!-- <script src="https://dummyjs.com/js"></script> -->
<p data-dummy="150"></p>
<img data-dummy="400x300" />
<script src="https://dummy.paulcollett.com/js"></script>
<script>
console.log('Dummy 400*300的img',Dummy.img(400,300))
console.log('Dummy 随机4-7个word',Dummy.text(4,7))
</script>
</body>
</html>
直接粘贴验证即可
结语
如果文章真的有帮到你，希望可以多多点赞、收藏、关注支持一波呀！！小阵会很开心哒~
文章如有错误或不严谨之处，还望指出，感谢感谢！！！
往期好文推荐「我不推荐下，大家可能就错过了史上最牛逼vscode插件集合啦！！！(嘎嘎嘎~)😄」
