js实现淘宝

使用 JavaScript 实现淘宝核心功能

淘宝是一个复杂的电商平台，涉及商品展示、购物车、支付等多个模块。以下是使用 JavaScript 实现淘宝部分核心功能的代码示例。

商品列表展示

通过 JavaScript 动态渲染商品列表，通常结合 AJAX 获取后端数据。

// 模拟获取商品数据
function fetchProducts() {
  // 实际项目中这里会是 AJAX 请求
  return [
    { id: 1, name: '商品1', price: 99.9, image: 'product1.jpg' },
    { id: 2, name: '商品2', price: 199.9, image: 'product2.jpg' }
  ];
}

// 渲染商品列表
function renderProducts() {
  const products = fetchProducts();
  const container = document.getElementById('product-container');

  products.forEach(product => {
    const item = document.createElement('div');
    item.className = 'product-item';
    item.innerHTML = `
      <img src="${product.image}" alt="${product.name}">
      <h3>${product.name}</h3>
      <p>¥${product.price}</p>
      <button onclick="addToCart(${product.id})">加入购物车</button>
    `;
    container.appendChild(item);
  });
}

购物车功能

实现基本的购物车添加和删除功能。

let cart = [];

// 添加商品到购物车
function addToCart(productId) {
  const product = fetchProducts().find(p => p.id === productId);
  const existingItem = cart.find(item => item.id === productId);

  if (existingItem) {
    existingItem.quantity += 1;
  } else {
    cart.push({ ...product, quantity: 1 });
  }

  updateCartUI();
}

// 更新购物车UI
function updateCartUI() {
  const cartContainer = document.getElementById('cart-items');
  const totalElement = document.getElementById('cart-total');
  cartContainer.innerHTML = '';

  let total = 0;
  cart.forEach(item => {
    const cartItem = document.createElement('div');
    cartItem.className = 'cart-item';
    cartItem.innerHTML = `
      <span>${item.name} x${item.quantity}</span>
      <span>¥${item.price * item.quantity}</span>
      <button onclick="removeFromCart(${item.id})">删除</button>
    `;
    cartContainer.appendChild(cartItem);
    total += item.price * item.quantity;
  });

  totalElement.textContent = `总计: ¥${total.toFixed(2)}`;
}

// 从购物车移除商品
function removeFromCart(productId) {
  cart = cart.filter(item => item.id !== productId);
  updateCartUI();
}

搜索功能

实现商品搜索功能，支持实时搜索建议。

// 商品搜索
function searchProducts(keyword) {
  const products = fetchProducts();
  return products.filter(product => 
    product.name.toLowerCase().includes(keyword.toLowerCase())
  );
}

// 搜索输入事件处理
document.getElementById('search-input').addEventListener('input', (e) => {
  const keyword = e.target.value;
  if (keyword.length > 0) {
    const results = searchProducts(keyword);
    renderSearchResults(results);
  } else {
    clearSearchResults();
  }
});

// 渲染搜索结果
function renderSearchResults(results) {
  const resultsContainer = document.getElementById('search-results');
  resultsContainer.innerHTML = '';

  results.forEach(product => {
    const resultItem = document.createElement('div');
    resultItem.className = 'search-result-item';
    resultItem.innerHTML = `
      <img src="${product.image}" alt="${product.name}">
      <span>${product.name}</span>
      <span>¥${product.price}</span>
    `;
    resultItem.addEventListener('click', () => {
      window.location.href = `product.html?id=${product.id}`;
    });
    resultsContainer.appendChild(resultItem);
  });
}

// 清除搜索结果
function clearSearchResults() {
  document.getElementById('search-results').innerHTML = '';
}

用户登录验证

简单的登录验证逻辑。

// 用户登录
function login(username, password) {
  // 实际项目中这里会是 AJAX 请求
  if (username === 'user' && password === 'password') {
    localStorage.setItem('isLoggedIn', 'true');
    return true;
  }
  return false;
}

// 检查登录状态
function checkLogin() {
  return localStorage.getItem('isLoggedIn') === 'true';
}

// 登录表单提交
document.getElementById('login-form').addEventListener('submit', (e) => {
  e.preventDefault();
  const username = document.getElementById('username').value;
  const password = document.getElementById('password').value;

  if (login(username, password)) {
    window.location.href = 'profile.html';
  } else {
    alert('用户名或密码错误');
  }
});

响应式设计

使用 JavaScript 增强响应式体验。

// 检测屏幕大小调整
window.addEventListener('resize', handleResponsiveLayout);

function handleResponsiveLayout() {
  const screenWidth = window.innerWidth;
  const productContainer = document.getElementById('product-container');

  if (screenWidth < 768) {
    productContainer.classList.add('mobile-view');
  } else {
    productContainer.classList.remove('mobile-view');
  }
}

// 初始化时调用一次
handleResponsiveLayout();

这些代码示例展示了如何使用 JavaScript 实现淘宝的核心功能模块。实际开发中，这些功能需要与后端 API 交互，并考虑更多边界情况和性能优化。