前端开发实用技巧

约 386 字大约 1 分钟

frontendjavascriptcss

2026-01-01

这里分享一些前端开发中的实用技巧和最佳实践。

JavaScript 技巧

1. 数组去重

// 使用 Set
const unique = [...new Set(array)];

// 使用 filter
const unique = array.filter((item, index) => array.indexOf(item) === index);

2. 对象解构

// 解构赋值
const { name, age } = user;

// 重命名
const { name: userName } = user;

// 默认值
const { name = 'Anonymous' } = user;

3. 可选链操作符

const city = user?.address?.city;

CSS 技巧

1. 居中元素

/* Flexbox */
.center {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Grid */
.center {
  display: grid;
  place-items: center;
}

2. 文本截断

.truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

3. 自定义滚动条

::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 4px;
}

性能优化

1. 图片懒加载

<img src="placeholder.jpg" data-src="image.jpg" loading="lazy" alt="Image">

2. 防抖和节流

// 防抖
function debounce(func, wait) {
  let timeout;
  return function executedFunction(...args) {
    const later = () => {
      clearTimeout(timeout);
      func(...args);
    };
    clearTimeout(timeout);
    timeout = setTimeout(later, wait);
  };
}

// 节流
function throttle(func, limit) {
  let inThrottle;
  return function executedFunction(...args) {
    if (!inThrottle) {
      func(...args);
      inThrottle = true;
      setTimeout(() => inThrottle = false, limit);
    }
  };
}

3. 代码分割

// 动态导入
const module = await import('./module.js');

工具推荐

代码编辑器: VS Code
版本控制: Git
包管理器: npm, pnpm, yarn
构建工具: Vite, Webpack
测试框架: Jest, Vitest
CSS 框架: Tailwind CSS, Bootstrap

学习资源

结语

持续学习和实践是成为优秀前端开发者的关键。希望这些技巧对你的开发工作有所帮助！