在前端开发中，我们经常需要生成随机的位置信息，比如在游戏中产生随机的道具位置，或者在一些页面中随机生成一些元素的位置等。这时候，我们可以使用 npm 包 random-position 来实现。
什么是 random-position
random-position 是一个基于 JavaScript 的 npm 包，它可以帮助我们生成随机位置的信息。
如何安装 random-position
你可以使用 npm 命令来安装 random-position：
npm install random-position
如何使用 random-position
安装完 random-position 后，我们就可以在我们的项目中使用它来生成随机位置信息。下面是一个简单的使用示例：
import { getRandomPosition } from "random-position";
const element = document.getElementById("my-element");
element.style.position = "absolute";
element.style.top = getRandomPosition(0, window.innerHeight - element.getBoundingClientRect().height) + "px";
element.style.left = getRandomPosition(0, window.innerWidth - element.getBoundingClientRect().width) + "px";在上述示例中，我们首先通过 import 将 getRandomPosition 函数引入进来。然后我们获取了一个 DOM 元素（这里的 DOM 元素是假设已经存在的），并将它的 position 样式设置为 absolute，以便我们可以将它的位置设置为随机值。
接着，我们使用 getRandomPosition 函数来生成随机的位置信息。这个函数接收两个参数：起始和终止位置的范围。在上述示例中，我们将 x 和 y 轴的起始位置设置为 0，终止位置设置为浏览器窗口的宽度和高度减去元素的宽度和高度，即元素在两个轴上可移动的范围。最后，我们使用得到的随机值来设置元素的 top 和 left 样式属性，以此将元素的位置设置为随机值。
注意事项
在使用
getRandomPosition函数时，一定要确保传入的起始位置小于终止位置。为了获得更好的用户体验，我们应该避免生成过多的重叠位置信息。
总结
使用 random-position 包可以方便地生成随机位置信息，帮助我们实现一些有趣的效果和功能。在使用时，我们需要注意传入参数范围以及避免生成重叠位置信息，这样才能使随机位置信息的生成效果更好。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056abf81e8991b448e5237