Tăng cường lọc sản phẩm bằng JavaScript và nhiều danh mục
Tạo các trang web năng động, thân thiện với người dùng bao gồm việc cung cấp khả năng điều hướng liền mạch và lọc nội dung dễ dàng. Điều này đặc biệt hữu ích khi hiển thị các sản phẩm hoặc mặt hàng thuộc nhiều danh mục. Bằng cách sử dụng JavaScript, chúng tôi có thể triển khai một cách trực quan để lọc các mục dựa trên nhiều danh mục, giúp người dùng dễ dàng tìm thấy chính xác những gì họ đang tìm kiếm.
Trong trường hợp này, việc nhấp vào nút danh mục sẽ lọc các mục được hiển thị trên trang. Người dùng có thể chọn đồng thời nhiều danh mục, cho phép có cái nhìn phù hợp hơn về sản phẩm. Ví dụ: việc chọn "Cá hồi" và "Tôm" sẽ chỉ hiển thị các mặt hàng có chứa cả hai thành phần.
Hiện tại, nhiều triển khai hoạt động tốt cho việc lọc một danh mục, nhưng việc thêm nhiều danh mục có thể khó khăn. Thách thức nằm ở việc đảm bảo rằng tất cả các danh mục đã chọn đều được xem xét khi quyết định mục nào sẽ hiển thị hoặc ẩn. Bài viết này tìm hiểu cách mở rộng tính năng lọc một danh mục sang lọc nhiều danh mục một cách hiệu quả bằng cách sử dụng JavaScript.
Trong hướng dẫn này, chúng ta sẽ tìm hiểu giải pháp lọc thẻ động dựa trên nhiều nút hoạt động, mang lại trải nghiệm dễ dàng và thân thiện với người dùng. Bằng cách triển khai giải pháp JavaScript này, bạn sẽ học cách cải thiện khả năng tương tác của trang web và tăng cường mức độ tương tác của người dùng.
| Yêu cầu | Ví dụ về sử dụng |
|---|---|
| every() | The every() method is used to check if all selected categories match the categories of each card. This is crucial in ensuring that multiple category filters work correctly. For example, activeCategories.every(cat =>Phương thức Every() được sử dụng để kiểm tra xem tất cả các danh mục đã chọn có khớp với danh mục của từng thẻ hay không. Điều này rất quan trọng trong việc đảm bảo rằng nhiều bộ lọc danh mục hoạt động chính xác. Ví dụ: activeCategories.every(cat => cardCategories.includes(cat)) đảm bảo rằng tất cả các danh mục đã chọn đều nằm trong các danh mục của thẻ. |
| toggle() | Lệnh này bật hoặc tắt một lớp. Nó được sử dụng để tự động thêm hoặc xóa lớp nút hoạt động khỏi nút danh mục khi được nhấp vào. Điều này giúp theo dõi xem một nút có đang hoạt động hay không, tác động đến thẻ nào được hiển thị hoặc ẩn. |
| filter() | The filter() method creates a new array with all elements that pass a test. In the Node.js example, products.filter(product => selectedCategories.every(cat =>Phương thức filter() tạo một mảng mới với tất cả các phần tử đã vượt qua bài kiểm tra. Trong ví dụ về Node.js, sản phẩm.filter(sản phẩm => đã chọnC Category.every(cat => sản phẩm.categories.includes(cat))) lọc các sản phẩm dựa trên danh mục do người dùng chọn. |
| split() | Phương thức Split() được sử dụng để chuyển đổi một chuỗi các danh mục thành một mảng. Ví dụ: card.getAttribution("data-category").split(",") chia chuỗi danh mục được phân tách bằng dấu phẩy thành một mảng để dễ so sánh hơn với các danh mục đang hoạt động. |
| classList.add() | Phương thức này thêm một lớp được chỉ định vào một phần tử. Nó được sử dụng để thêm lớp thẻ không hoạt động nhằm ẩn các thẻ không khớp với bộ lọc đang hoạt động. Ví dụ: card.classList.add("inactive-card") ẩn thẻ khi danh mục của thẻ không khớp với danh mục đã chọn. |
| trim() | Phương thức Trim() được sử dụng để loại bỏ khoảng trắng ở cả hai đầu của chuỗi. Trong tập lệnh, nó đảm bảo rằng các danh mục từ nút được so sánh rõ ràng với các danh mục từ dữ liệu sản phẩm. Ví dụ: Button.innerText.trim() đảm bảo không có khoảng trắng thừa nào được xem xét. |
| post() | Trong tập lệnh phụ trợ, post() được sử dụng để tạo tuyến chấp nhận dữ liệu do khách hàng gửi (trong trường hợp này là các danh mục đã chọn). Tập lệnh phía máy chủ xử lý yêu cầu này để trả về dữ liệu sản phẩm đã lọc dựa trên các danh mục đã chọn. |
| json() | Phương thức này trong Express được sử dụng để gửi phản hồi JSON trở lại máy khách. Ví dụ: res.json(filteredProducts) trả về các sản phẩm phù hợp với danh mục đã chọn, cho phép phía khách hàng hiển thị các sản phẩm đã lọc. |
Tìm hiểu về lọc nhiều danh mục trong JavaScript
Các tập lệnh được cung cấp ở trên tập trung vào việc lọc động các mục dựa trên nhiều danh mục, điều này cần thiết để nâng cao trải nghiệm người dùng trên các trang web dựa trên sản phẩm. Mục tiêu là cho phép người dùng chọn nhiều danh mục và thẻ lọc phù hợp. Điều này đạt được bằng cách sử dụng JavaScript bằng cách ghi lại các lần nhấp vào nút, lưu trữ các danh mục đã chọn trong một mảng và sau đó chỉ hiển thị các thẻ khớp với tất cả các danh mục đã chọn. Quá trình này được bắt đầu khi người dùng nhấp vào nút danh mục, nút này sẽ chuyển trạng thái hoạt động của nút đó. Giá trị của nút được lưu trữ trong một mảng, đại diện cho tất cả các bộ lọc đang hoạt động.
Một phần quan trọng của giải pháp này là sử dụng phương thức mảng mọi(). Lệnh này đảm bảo rằng tất cả các danh mục đã chọn đều được so sánh với các danh mục của thẻ. Nó kiểm tra xem từng danh mục đang hoạt động có được tìm thấy trong các danh mục của thẻ hay không, do đó cho phép tính năng lọc nhiều danh mục hoạt động trơn tru. Một phương pháp quan trọng khác là tách ra(), được sử dụng để ngắt chuỗi danh mục từ mỗi thẻ thành một mảng. Điều này cho phép JavaScript so sánh các danh mục riêng lẻ và xác định thẻ nào sẽ được hiển thị hoặc ẩn.
Ngoài ra, kịch bản sử dụng classList.toggle() để thêm hoặc xóa lớp hoạt động trên các nút khi được nhấp vào. Lớp này rất quan trọng đối với phản hồi trực quan vì nó cho biết nút nào hiện đang hoạt động. Khi một nút bị vô hiệu hóa, danh mục của nút đó sẽ bị xóa khỏi mảng danh mục đang hoạt động và chức năng lọc sẽ được kích hoạt lại để cập nhật màn hình. Các thẻ không khớp với danh mục đang hoạt động sẽ bị ẩn bằng cách thêm một lớp để đánh dấu chúng là không hoạt động. Phương pháp này đảm bảo rằng người dùng có thể dễ dàng tinh chỉnh tìm kiếm của mình bằng cách chọn hoặc bỏ chọn nhiều bộ lọc.
Tập lệnh back-end được cấu trúc để xử lý việc lọc sản phẩm ở phía máy chủ bằng Node.js và Express. Các danh mục đã chọn sẽ được gửi đến máy chủ thông qua yêu cầu POST và máy chủ sẽ xử lý yêu cầu này bằng cách lọc các sản phẩm và chỉ trả lại các mặt hàng phù hợp với danh mục đang hoạt động. Máy chủ sử dụng logic tương tự như giao diện người dùng, sử dụng lọc() phương pháp so sánh các danh mục đã chọn với danh mục của từng sản phẩm. Cách tiếp cận này hữu ích khi xử lý các tập dữ liệu lớn vì nó giảm tải việc xử lý từ phía máy khách, mang lại hiệu suất tốt hơn cho người dùng cuối.
Lọc mục động bằng JavaScript: Lọc nhiều danh mục được tối ưu hóa
Phương pháp phát triển front-end sử dụng Vanilla JavaScript
// Define product datalet 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 eventlet 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 categoriesfunction 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";});}
Triển khai phụ trợ để lọc mục động
Cách tiếp cận phía máy chủ sử dụng Node.js và Express
const express = require('express');const app = express();app.use(express.json());// Sample product dataconst products = [{ name: 'Fantasy', categories: ['Salmon', 'Shrimp'] },{ name: 'Spring', categories: ['Veggie'] },];// Filter products APIapp.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'));
Các kỹ thuật nâng cao để lọc nhiều danh mục trong phát triển web
Khi triển khai hệ thống lọc đa danh mục trong JavaScript, điều quan trọng là phải xem xét không chỉ tương tác giao diện người dùng mà còn cả cấu trúc dữ liệu hỗ trợ nó. Trong bối cảnh nội dung động, việc duy trì một giao diện rõ ràng và tối ưu DOM chiến lược thao túng là chìa khóa. Ví dụ: bạn có thể sử dụng các kỹ thuật ủy quyền sự kiện để xử lý nhiều nút danh mục một cách hiệu quả, đảm bảo rằng chỉ các phần tử DOM bắt buộc mới được thao tác.
Một khía cạnh có thể nâng cao hơn nữa trải nghiệm lọc là thêm các thành phần giao diện người dùng phức tạp hơn, chẳng hạn như hộp kiểm hoặc danh sách thả xuống nhiều lựa chọn, thay vì các nút đơn giản. Điều này cho phép người dùng tương tác với các bộ lọc theo cách chi tiết hơn. Ví dụ: menu thả xuống cho phép nhiều lựa chọn cung cấp giao diện người dùng rõ ràng hơn và linh hoạt hơn cho người dùng khi chọn danh mục. Điều này có thể được triển khai với logic và kiểu dáng JavaScript bổ sung, trong khi vẫn sử dụng các phương thức mảng như filter() Và every() để so sánh danh mục.
Một vấn đề quan trọng cần cân nhắc khác là hiệu suất của hệ thống lọc, đặc biệt khi xử lý một tập dữ liệu lớn. Khi bạn có hàng trăm hoặc hàng nghìn mục cần lọc, điều quan trọng là giảm thiểu thao tác DOM càng nhiều càng tốt. Một cách để tối ưu hóa điều này là cập nhật hàng loạt cho DOM bằng cách sử dụng requestAnimationFrame() hoặc debounce() các phương pháp để kiểm soát tốc độ cập nhật và đảm bảo trải nghiệm người dùng mượt mà. Những kỹ thuật này không chỉ cải thiện hiệu suất mà còn nâng cao khả năng phản hồi của trang, giúp trang có khả năng mở rộng cao hơn cho các tập dữ liệu lớn hơn.
Câu hỏi thường gặp về lọc nhiều danh mục trong JavaScript
- Làm cách nào để xử lý nhiều bộ lọc đang hoạt động?
- Bạn có thể lưu trữ các bộ lọc hoạt động trong một mảng và sử dụng every() để kiểm tra xem danh mục của mỗi thẻ có khớp với các bộ lọc đã chọn hay không.
- Điều gì xảy ra nếu tôi có các danh mục trùng nhau?
- sử dụng split() Và trim(), bạn có thể tách và làm sạch dữ liệu danh mục, đảm bảo rằng mỗi danh mục được so sánh chính xác với các bộ lọc đang hoạt động.
- Làm cách nào tôi có thể tối ưu hóa quá trình lọc cho các tập dữ liệu lớn?
- Cập nhật DOM hàng loạt bằng cách sử dụng requestAnimationFrame() hoặc thực hiện một debounce() chức năng giảm tần suất hoạt động lọc, cải thiện hiệu suất.
- Làm cách nào để hiển thị các mục phù hợp với tất cả các danh mục đã chọn?
- Sử dụng every() để đảm bảo rằng tất cả các danh mục đã chọn đều được đưa vào dữ liệu của từng thẻ trước khi hiển thị chúng.
- Cách tốt nhất để xử lý hình ảnh bị hỏng trong hệ thống thẻ là gì?
- Thực hiện một error trình xử lý sự kiện trên mỗi hình ảnh để ẩn hoặc thay thế hình ảnh khi không tải được, nâng cao trải nghiệm người dùng.
Suy nghĩ cuối cùng về kỹ thuật lọc JavaScript
Việc triển khai tính năng lọc nhiều danh mục trong các trang web có thể cải thiện đáng kể trải nghiệm người dùng, giúp người dùng dễ dàng tìm thấy chính xác những gì họ cần. Với việc sử dụng cẩn thận JavaScript các phương pháp như chuyển đổi() Và mọi(), các nhà phát triển có thể tạo ra một giải pháp hiệu quả, có thể mở rộng để xử lý các tập dữ liệu lớn một cách suôn sẻ.
Hơn nữa, bằng cách tối ưu hóa thao tác DOM và giảm các hoạt động không cần thiết, phương pháp này đảm bảo hiệu suất ngay cả khi có tương tác người dùng cao. Hệ thống lọc này có thể được tích hợp vào các trang web thương mại điện tử, danh mục đầu tư hoặc bất kỳ trang nào yêu cầu hiển thị nội dung động dựa trên nhiều bộ lọc.
Phần nguồn và tài liệu tham khảo
- Các ví dụ về nội dung và mã trong bài viết này được lấy cảm hứng từ ví dụ CodePen của Alena Chuyankova. Bạn có thể khám phá mã gốc ở đây: CodePen của Alena .
- Các khái niệm bổ sung về phương pháp mảng JavaScript và xử lý sự kiện được tham chiếu từ tài liệu chính thức của Mạng lưới nhà phát triển Mozilla, có thể truy cập tại đây: Tài liệu web MDN .
- Để biết thêm thông tin chi tiết về cách tối ưu hóa thao tác và hiệu suất DOM bằng JavaScript, tôi đã tham khảo hướng dẫn toàn diện này từ Tạp chí Smashing: Hiểu DOM hiệu quả .