6 个让我的 JavaScript 开发工作更轻松的超强函数
感谢阅读
本文算是对上周发布的《JavaScript 七大杀手级单行代码》的延伸。如果您还没读过那篇文章，强烈建议您先阅读一下。
1. 检查元素是否在视口中可见
IntersectionObserver这是检查元素是否在视口中可见的好方法。
const callback = (entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
// `entry.target` is the dom element
console.log(`${entry.target.id} is visible`);
}
});
};
const options = {
threshold: 1.0,
};
const observer = new IntersectionObserver(callback, options);
const btn = document.getElementById("btn");
const bottomBtn = document.getElementById("bottom-btn");
observer.observe(btn);
observer.observe(bottomBtn);
您可以使用参数自定义观察者的行为option。threshold是最有用的属性，它定义了元素需要在视口中可见的百分比，观察者才会触发。
2. 检测设备
您可以使用它navigator.userAgent来获取细微的洞察信息并检测运行应用程序的设备。
const detectDeviceType = () =>
/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
navigator.userAgent
)
? "Mobile"
: "Desktop";
console.log(detectDeviceType());
3. 隐藏元素
你可以使用属性切换元素的可见性style.visibility，如果你想将其从渲染流中移除，可以使用style.display属性。
const hideElement = (element, removeFromFlow = false) => {
removeFromFlow
? (element.style.display = "none")
: (element.style.visibility = "hidden");
};
如果未将元素从渲染流中移除，它将被隐藏，但其占用的空间仍然会被保留IntersectionObserver。这在渲染长列表元素时非常有用，因为可以隐藏不在视图中的元素（可以使用 `show_view` 进行测试） ，从而提升性能。
4. 从 URL 获取参数
使用JavaScriptparameters对象，从任何地址获取数据都易如反掌URL。
const url = new URL(window.location.href);
const paramValue = url.searchParams.get("paramName");
console.log(paramValue);
5. 轻松深度复制对象
你可以deep copy通过将任何对象转换为字符串，然后再转换回对象来获取它。
const deepCopy = (obj) => JSON.parse(JSON.stringify(obj));
6.wait功能
JavaScript确实自带一个setTimeout函数，但它不返回Promise对象，这使得它在项目中难以使用async functions。因此，我们必须编写自己的wait函数sleep。
const wait = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
const asyncFunc = async () => {
await wait(1000);
console.log("async");
};
asyncFunc();
感谢阅读
需要一位顶尖的软件开发自由职业者来解决您的开发难题吗？请通过Upwork联系我。
想联系我？请在领英上联系我。
关注我的博客，即可在Medium上获取每两周更新的精彩内容。
常问问题
以下是一些我经常被问到的问题。希望这个常见问题解答部分能解答您的疑问。
-
我是新手，应该如何学习前端Web开发？
请参考以下文章： -
您愿意指导我吗？
抱歉，我已经工作很忙了，没有时间指导任何人。