返回

前端从业者的12个实用小妙招

前端

在前端开发的广阔天地中，掌握一些实用的小技巧可以极大地提高我们的工作效率和优化用户体验。本文精心整理了12个前端小知识，涵盖了CSS、HTML、JavaScript等方面的内容，希望能为各位前端开发者带来启发和帮助。

1. 一行文本超出隐藏

text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;

2. 多行文本溢出隐藏

overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;

3. iOS手机容器滚动条滑动不顺

在iOS设备上，当容器内内容较多时，滚动条滑动可能会不顺畅。这是因为iOS默认对overflow:scroll的元素使用了-webkit-overflow-scrolling:touch，可以将其改为auto来解决这个问题。

-webkit-overflow-scrolling: auto;

4. 阻止iOS设备缩放

在移动端开发中，我们可以使用meta标签来阻止iOS设备的缩放功能。

<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />

5. 禁止页面回退

window.history.pushState(null, null, location.href);
window.addEventListener('popstate', function () {
  window.history.pushState(null, null, location.href);
});

6. 获取元素距离页面顶部距离

element.getBoundingClientRect().top;

7. 获取元素距离页面底部距离

document.documentElement.clientHeight - element.getBoundingClientRect().bottom;

8. 判断元素是否在可视区域内

const elementRect = element.getBoundingClientRect();
const clientRect = document.documentElement.getBoundingClientRect();

elementRect.top >= 0 &&
elementRect.left >= 0 &&
elementRect.bottom <= (window.innerHeight || clientRect.height) &&
elementRect.right <= (window.innerWidth || clientRect.width);

9. 延迟执行函数

setTimeout(function () {
  // 要执行的代码
}, delay);

10. 判断对象是否为空

Object.keys(obj).length === 0;

11. 数组去重

[...new Set(arr)];

12. 深拷贝对象

JSON.parse(JSON.stringify(obj));

以上12个前端小技巧涵盖了日常开发中常用的CSS、HTML、JavaScript等方面的知识，熟练掌握这些技巧可以极大地提高我们的开发效率和优化用户体验。希望本文能对各位前端开发者有所帮助，让我们共同探索前端开发的更多奥秘。