前端开发必备：实用依赖与代码片段分享

、

等标签，提高可读性和 SEO。

二、CSS 篇

CSS 方面，我会分享一些轻量的重置样式、常用工具类以及一些主流的 CSS 框架 CDN，方便快速搭建样式。

CSS 重置（Reset/Normalize）

normalize.css：保留有用默认值，修复浏览器 bug。
CDN 链接：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">

简易重置（个人常用）：

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    height: 100%;
}

img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
}

input, button, textarea, select {
    font: inherit;
}

p, h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
}

常用工具类（可复制到项目中）

/* 清除浮动 */
.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

/* 文本溢出省略号 */
.text-ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 多行文本溢出（WebKit 浏览器） */
.multiline-ellipsis {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 垂直居中（Flex） */
.flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 绝对定位居中 */
.abs-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* 禁止用户选择 */
.no-select {
    user-select: none;
}

快速引入 CSS 框架

· Tailwind CSS（通过 CDN 快速体验，但生产环境建议构建）

<script src="https://cdn.tailwindcss.com"></script>

· Bootstrap 5

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

· Bulma

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.2/css/bulma.min.css">

· Animate.css（动画库）

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">

常用 CSS 技巧

· 响应式字体

html {
      font-size: clamp(16px, 2vw, 24px);
  }

· 平滑滚动

html {
      scroll-behavior: smooth;
  }

· 自定义滚动条（WebKit）

::-webkit-scrollbar {
      width: 8px;
  }
  ::-webkit-scrollbar-track {
      background: #f1f1f1;
  }
  ::-webkit-scrollbar-thumb {
      background: #888;
      border-radius: 4px;
  }
  ::-webkit-scrollbar-thumb:hover {
      background: #555;
  }

三、JavaScript 篇

JS 是功能最丰富的部分，下面分享一些轻量但非常实用的依赖库和纯 JS 代码片段。

实用依赖库（推荐 CDN 或通过 npm 安装）

· Lodash – 一致性、模块化的工具函数库

<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>

常用方法：_.debounce、_.throttle、_.deepClone、_.get 等。
· Axios – 基于 Promise 的 HTTP 客户端

<script src="https://cdn.jsdelivr.net/npm/axios@1.6.7/dist/axios.min.js"></script>

· Day.js – 轻量级日期处理库（2kB 大小，Moment.js 的现代替代）

<script src="https://cdn.jsdelivr.net/npm/dayjs@1.11.10/dayjs.min.js"></script>

· qs – 查询字符串解析和序列化

<script src="https://cdn.jsdelivr.net/npm/qs@6.12.1/dist/qs.min.js"></script>

· nanoid – 生成唯一 ID

<script src="https://cdn.jsdelivr.net/npm/nanoid@5.0.7/async/index.browser.js"></script>

· uuid – 生成 UUID（比 nanoid 稍大，但兼容性更好）

<script src="https://cdn.jsdelivr.net/npm/uuid@9.0.1/dist/umd/uuidv4.min.js"></script>

高频工具函数（可直接复制使用）

防抖（Debounce）

function debounce(func, delay) {
    let timer;
    return function (...args) {
        clearTimeout(timer);
        timer = setTimeout(() => func.apply(this, args), delay);
    };
}
// 使用：window.addEventListener('resize', debounce(() => { ... }, 200));

节流（Throttle）

function throttle(func, limit) {
    let inThrottle;
    return function (...args) {
        if (!inThrottle) {
            func.apply(this, args);
            inThrottle = true;
            setTimeout(() => inThrottle = false, limit);
        }
    };
}
// 使用：window.addEventListener('scroll', throttle(() => { ... }, 100));

深拷贝（简易版，不考虑循环引用和特殊对象）

function deepClone(obj) {
    if (obj === null || typeof obj !== 'object') return obj;
    if (obj instanceof Date) return new Date(obj);
    if (obj instanceof RegExp) return new RegExp(obj);
    if (Array.isArray(obj)) return obj.map(item => deepClone(item));
    return Object.fromEntries(
        Object.entries(obj).map(([key, value]) => [key, deepClone(value)])
    );
}

获取 URL 参数

function getQueryParam(param) {
    const urlParams = new URLSearchParams(window.location.search);
    return urlParams.get(param);
}
// 示例：getQueryParam('id') 返回 '123'

格式化日期（简单版）

function formatDate(date, format = 'YYYY-MM-DD') {
    const d = new Date(date);
    const year = d.getFullYear();
    const month = String(d.getMonth() + 1).padStart(2, '0');
    const day = String(d.getDate()).padStart(2, '0');
    const hours = String(d.getHours()).padStart(2, '0');
    const minutes = String(d.getMinutes()).padStart(2, '0');
    const seconds = String(d.getSeconds()).padStart(2, '0');

    return format
        .replace('YYYY', year)
        .replace('MM', month)
        .replace('DD', day)
        .replace('HH', hours)
        .replace('mm', minutes)
        .replace('ss', seconds);
}
// formatDate(new Date(), 'YYYY年MM月DD日 HH:mm:ss')

复制文本到剪贴板

async function copyToClipboard(text) {
    try {
        await navigator.clipboard.writeText(text);
        console.log('复制成功');
    } catch (err) {
        console.error('复制失败', err);
        // 降级方案
        const textarea = document.createElement('textarea');
        textarea.value = text;
        document.body.appendChild(textarea);
        textarea.select();
        document.execCommand('copy');
        document.body.removeChild(textarea);
    }
}

DOM 操作实用函数

选择元素（简化版）

const $ = (selector, parent = document) => parent.querySelector(selector);
const $$ = (selector, parent = document) => parent.querySelectorAll(selector);

添加/移除类

function addClass(el, className) {
    el.classList.add(className);
}
function removeClass(el, className) {
    el.classList.remove(className);
}
function toggleClass(el, className) {
    el.classList.toggle(className);
}

事件委托

function on(parent, eventType, childSelector, handler) {
    parent.addEventListener(eventType, function(e) {
        const target = e.target.closest(childSelector);
        if (target) {
            handler.call(target, e);
        }
    });
}
// 使用：on(document, 'click', '.delete-btn', function(e) { ... });

常用的第三方工具库轻量替代

· 本地存储封装

const storage = {
      set(key, value) {
          localStorage.setItem(key, JSON.stringify(value));
      },
      get(key) {
          const value = localStorage.getItem(key);
          try {
              return value ? JSON.parse(value) : null;
          } catch {
              return value;
          }
      },
      remove(key) {
          localStorage.removeItem(key);
      },
      clear() {
          localStorage.clear();
      }
  };

· Cookie 操作

const cookie = {
      set(name, value, days = 7) {
          const expires = new Date(Date.now() + days * 864e5).toUTCString();
          document.cookie = `${name}=${encodeURIComponent(value)}; expires=${expires}; path=/`;
      },
      get(name) {
          const match = document.cookie.match(new RegExp('(^| )' + name + '=([^;]+)'));
          return match ? decodeURIComponent(match[2]) : null;
      },
      delete(name) {
          document.cookie = `${name}=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;`;
      }
  };

四、开发工具与构建配置（简要）

· Vite：极速的前端构建工具，支持 Vue、React、原生 JS 等，开发体验极佳。
· ESLint + Prettier：代码规范和格式化，保证团队代码风格一致。
· Husky + lint-staged：Git 提交前自动检查和格式化代码。

总结

以上便是我在日常开发中常用的一些依赖和代码片段。合理使用这些工具和代码，可以让我们避免重复造轮子，专注于业务逻辑的实现。当然，实际项目中还需要根据需求选择最合适的库，并注意性能和体积的平衡。

希望这份分享对你有所帮助！如果你有更好的建议或常用工具，欢迎在评论区补充交流。Happy coding!