专业JavaScript开发技能
打造动态交互体验

// ES6+ 示例
const handleData = (items = []) => {
  return items
    .filter(item => item.active)
    .map(({id, name}) => ({id, name}));
}

// React组件示例
function UserProfile({ user }) {
  const [isEditing, setIsEditing] = useState(false);

  return (
    <div className="profile">
      {isEditing ? <EditForm /> : <UserInfo />}
    </div>
  );
}

// 异步数据获取示例
async function loadUserData(userId) {
  try {
    const response = await fetch(`/api/users/${userId}`);
    const user = await response.json();
    return user;
  } catch (error) {
    console.error('加载失败:', error);
    return null;
  }
}

// 动画效果示例
function animateElement(element, duration) {
  element.animate([
    { opacity: 0, transform: 'translateY(20px)' },
    { opacity: 1, transform: 'translateY(0)' }
  ], {
    duration: duration,
    easing: 'ease-out',
    fill: 'forwards'
  });
}

// 性能优化示例
// 图片懒加载实现
document.addEventListener('DOMContentLoaded', () => {
  const lazyImages = document.querySelectorAll('img.lazy');
  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        entry.target.src = entry.target.dataset.src;
        observer.unobserve(entry.target);
      }
    });
  });
});

// 响应式交互示例
function handleResponsiveLayout() {
  const isMobile = window.innerWidth < 768;
  const navigation = document.getElementById('main-nav');
  if (isMobile) {
    navigation.classList.add('mobile-nav');
    initializeMobileMenu(navigation);
  } else {
    navigation.classList.remove('mobile-nav');
  }
}