工具库演示 - Demo Shop

Lodash - JavaScript 工具函数库

Lodash 提供了数百个实用的工具函数，让 JavaScript 开发更加高效。

数组操作演示

// 数组去重、分块、随机打乱
const numbers = [1, 2, 2, 3, 4, 4, 5];
const unique = _.uniq(numbers);
const chunks = _.chunk([1,2,3,4,5,6], 2);
const shuffled = _.shuffle([1,2,3,4,5]);
                    

对象操作演示

// 深度克隆、属性获取、对象合并
const obj = {a: {b: {c: 1}}};
const cloned = _.cloneDeep(obj);
const value = _.get(obj, 'a.b.c');
const merged = _.merge({a: 1}, {b: 2});
                    

字符串操作演示

函数式编程演示

Axios - HTTP 请求库

Axios 是一个基于 Promise 的 HTTP 库，支持请求和响应拦截器。

GET 请求演示

// GET 请求示例
axios.get('/api/demo-data')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });
                    

POST 请求演示

// POST 请求示例
axios.post('/api/users', {
  name: '新用户',
  email: 'user@example.com'
})
.then(response => {
  console.log('创建成功:', response.data);
});
                    

并发请求演示

Alpine.js - 轻量级 JavaScript 框架

Alpine.js 提供了类似 Vue.js 的声明式语法，但更加轻量。

响应式数据演示

计数器:

名称:

Hello, !

<div x-data="{ count: 0, name: 'Alpine.js' }">
  <p>计数器: <span x-text="count"></span></p>
  <button @click="count++">增加</button>
  <input x-model="name">
</div>
                    

条件渲染和循环

HTMX - 动态 HTML 加载

HTMX 让任何 HTML 元素都能发送 AJAX 请求并更新页面内容。

动态内容加载

<button hx-get="/api/time" 
        hx-target="#time-display">
  获取服务器时间
</button>
<div id="time-display"></div>
                    

表单提交

Grid.js - 现代表格组件

Grid.js 是一个功能强大的表格库，支持搜索、排序、分页等功能。

new gridjs.Grid({
  columns: ['姓名', '邮箱', '职位', '部门'],
  data: [
    ['张三', 'zhangsan@example.com', '前端工程师', '技术部'],
    ['李四', 'lisi@example.com', '后端工程师', '技术部']
  ],
  search: true,
  sort: true,
  pagination: true
}).render(document.getElementById('grid-demo'));
            

Lightbox2 - 图片灯箱效果

Lightbox2 提供优雅的图片查看体验，支持画廊模式和键盘导航。

<a href="large-image.jpg" 
   data-lightbox="gallery" 
   data-title="图片标题">
  <img src="thumbnail.jpg" alt="缩略图">
</a>
            

Swiper.js - 现代轮播组件

Swiper 是最流行的移动端轮播组件，支持触摸滑动和丰富的配置选项。

幻灯片 1

这是第一张幻灯片的内容

幻灯片 2

这是第二张幻灯片的内容

幻灯片 3

这是第三张幻灯片的内容

幻灯片 4

这是第四张幻灯片的内容

const swiper = new Swiper('.mySwiper', {
  direction: 'horizontal',
  loop: true,
  pagination: {
    el: '.swiper-pagination',
  },
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
});
            

Chart.js - 图表库

Chart.js 提供了丰富的图表类型，支持响应式设计和动画效果。

图表控制

SweetAlert2 - 美观弹窗

SweetAlert2 提供了美观、响应式的弹窗组件，可以替代原生的 alert。

// 成功提示
Swal.fire({
  icon: 'success',
  title: '操作成功!',
  text: '您的操作已经成功完成。'
});

// 确认对话框
Swal.fire({
  title: '确定要删除吗?',
  text: "删除后无法恢复!",
  icon: 'warning',
  showCancelButton: true,
  confirmButtonText: '确定删除'
});
            

Animate.css - CSS 动画库

Animate.css 提供了丰富的 CSS 动画效果，即插即用。

动画演示

动画演示元素

点击下面的按钮查看不同的动画效果

动画控制

// 添加动画类
element.classList.add('animate__animated', 'animate__bounce');

// 监听动画结束事件
element.addEventListener('animationend', () => {
  element.classList.remove('animate__animated', 'animate__bounce');
});
            

Font Awesome - 矢量图标库

Font Awesome 提供了数千个高质量的矢量图标，涵盖各种使用场景。

基础图标

社交媒体

技术图标

动画图标

<i class="fas fa-home"></i>

<i class="fas fa-user fa-2x"></i>
<i class="fas fa-user fa-3x"></i>

<i class="fas fa-spinner fa-spin"></i>
<i class="fas fa-heart fa-beat"></i>

<i class="fas fa-star text-warning"></i>

前端工具库演示中心