介绍
npm 包 rarely 是一款用于生成稀缺项目元素的工具，常见于前端开发中的样式设计领域。稀缺元素指的是只在特定的情况下显示的元素，如特定浏览器、特定位置等等。通常这些元素需要通过 JavaScript 进行动态生成，所以可能需要较高的技术水平。
而 npm 包 rarely 的出现，简化了这一过程，使得开发者能够简单地使用稀缺元素，为页面增加更好的体验、交互、视觉效果等等。
安装
npm 包 rarely 可以通过如下命令进行安装：
npm install --save rarely
快速开始
-- -------------------- ---- ------- ---- ------- --- --- ----- ---------------- ----------------------------------------- -- ---- ------- -- --- ------- ---------------------------------------------------- ---- ----- --- ---- -------------------- -------- ------- -- ---- ------- -- ------ --- ----------- ------ ---- --------------------- ------- -- ---- ------- -- ------ ------------ ------
以上代码添加了 css 和 js 的引用，然后在不同的 div 标签上设置了不同的 data-rarely 属性，指定了该 div 元素所在的环境，在指定环境下才会显示。
现在打开页面，可以发现只有符合条件的 div 才会被渲染出来。
API
rarely.add
添加新的环境，后续可以根据添加的环境名称来指定元素的显示条件。
rarely.add('ios', () => {
return /iPhone|iPad|iPod/i.test(navigator.userAgent)
})rarely.remove
删除指定的环境。
rarely.remove('ios')rarely.refresh
根据环境条件重新渲染所有被标记的元素。
rarely.refresh()
示例
-- -------------------- ---- ------- ---- ------- --- --- ----- ---------------- ----------------------------------------- -- ---- ------- -- --- ------- ---------------------------------------------------- ---- --- --------- -- --- --- -------- ----------------- -- -- - ------ --------------------------------------------- -- --------- ---- ----- --- ---- -------------------- -------- ------- -- ---- ------- -- ------ --- ----------- ------ ---- --------------------- ------- -- ---- ------- -- ------ ------------ ------ ---- ------------------ ------- -- ---- ------- -- --- ------------ ------
以上代码添加了一个新的环境 'ios'，并在三个 div 元素上设置了不同的 data-rarely 属性，在符合条件的环境中才会显示。
我们打开页面，可以看到只有在 iOS 设备上打开页面时，第三个 div 才会被渲染出来。
结语
通过 npm 包 rarely，我们可以轻松地添加稀缺元素，为页面增加更好的交互效果，提高用户体验。同时，rarely 也提供了完善的 API，可以帮助开发者更加灵活地进行条件设置。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600557db81e8991b448d4e7d