JavaScript를 사용하여 동적 웹사이트의 항목을 여러 카테고리로 정렬

JavaScript를 사용한 동적 항목 필터링: 최적화된 다중 카테고리 필터링

Vanilla JavaScript를 사용한 프런트엔드 개발 접근 방식

// Define product data
let products = {
  data: [
    { productName: "Fantasy", category: "Salmon, Shrimp" },
    { productName: "Spring", category: "Veggie" },
    { productName: "Rainbow", category: "Salmon, Tuna, Unagi" },
    { productName: "Unique", category: "Salmon, Tuna, Unagi, Shrimp" },
    { productName: "Perfection", category: "Salmon" },
  ]
};

// Handle button click event
let activeCategories = [];
document.querySelectorAll(".category-button").forEach(button => {
  button.addEventListener("click", () => {
    const category = button.innerText.trim();
    button.classList.toggle("active-button");
    if (button.classList.contains("active-button")) {
      activeCategories.push(category);
    } else {
      activeCategories = activeCategories.filter(cat => cat !== category);
    }
    filterCards();
  });
});

// Filter cards based on active categories
function filterCards() {
  document.querySelectorAll(".card").forEach(card => {
    const cardCategories = card.getAttribute("data-category").split(",");
    const match = activeCategories.every(cat => cardCategories.includes(cat));
    card.style.display = match ? "block" : "none";
  });
}

동적 항목 필터링을 위한 백엔드 구현

Node.js 및 Express를 사용한 서버측 접근 방식

const express = require('express');
const app = express();
app.use(express.json());

// Sample product data
const products = [
  { name: 'Fantasy', categories: ['Salmon', 'Shrimp'] },
  { name: 'Spring', categories: ['Veggie'] },
];

// Filter products API
app.post('/filter', (req, res) => {
  const selectedCategories = req.body.categories;
  const filteredProducts = products.filter(product =>
    selectedCategories.every(cat => product.categories.includes(cat))
  );
  res.json(filteredProducts);
});

app.listen(3000, () => console.log('Server running on port 3000'));

JavaScript의 다중 범주 필터링에 대해 자주 묻는 질문

1. 여러 활성 필터를 어떻게 처리합니까?
2. 활성 필터를 배열에 저장하고 사용할 수 있습니다. every() 각 카드의 카테고리가 선택한 필터와 일치하는지 확인합니다.
3. 카테고리가 겹치면 어떻게 되나요?
4. 사용 split() 그리고 trim()을 사용하면 카테고리 데이터를 분리하고 정리하여 각 카테고리가 활성 필터와 적절하게 비교되도록 할 수 있습니다.
5. 대규모 데이터 세트에 대한 필터링을 어떻게 최적화할 수 있나요?
6. 다음을 사용하여 일괄 DOM 업데이트 requestAnimationFrame() 또는 구현 debounce() 필터링 작업 빈도를 줄여 성능을 향상시키는 기능입니다.
7. 선택한 모든 카테고리와 일치하는 항목을 어떻게 표시합니까?
8. 사용 every() 선택한 모든 카테고리가 표시되기 전에 각 카드의 데이터에 포함되어 있는지 확인합니다.
9. 카드 시스템에서 깨진 이미지를 처리하는 가장 좋은 방법은 무엇입니까?
10. 구현 error 각 이미지의 이벤트 리스너는 이미지 로드에 실패할 때 이미지를 숨기거나 교체하여 사용자 경험을 향상시킵니다.

JavaScript 필터링 기술에 대한 최종 생각

웹 페이지에 다중 카테고리 필터링을 구현하면 사용자 경험이 크게 향상되어 사용자가 필요한 것을 정확히 더 쉽게 찾을 수 있습니다. 주의 깊게 사용하면서 자바스크립트 다음과 같은 방법 비녀장() 그리고 모든()를 통해 개발자는 대규모 데이터 세트를 원활하게 처리하는 효율적이고 확장 가능한 솔루션을 만들 수 있습니다.

또한 DOM 조작을 최적화하고 불필요한 작업을 줄임으로써 이 접근 방식은 높은 사용자 상호 작용에서도 성능을 보장합니다. 이 필터링 시스템은 전자 상거래 웹사이트, 포트폴리오 또는 여러 필터를 기반으로 하는 동적 콘텐츠 표시가 필요한 모든 페이지에 통합될 수 있습니다.