Kasutage dünaamiliste veebisaitide jaoks üksuste sortimiseks mitme kategooria järgi JavaScripti

Toodete filtreerimise täiustamine JavaScripti ja mitme kategooria abil

Dünaamiliste ja kasutajasõbralike veebilehtede loomine hõlmab sujuva navigeerimise ja sisu lihtsa filtreerimise pakkumist. See on eriti kasulik mitmesse kategooriasse kuuluvate toodete või üksuste kuvamisel. JavaScripti kasutades saame rakendada intuitiivset viisi üksuste filtreerimiseks mitme kategooria alusel, muutes kasutajatel lihtsamaks just seda, mida nad otsivad.

Selle stsenaariumi korral peaks kategoorianupul klõpsamine lehel kuvatavaid üksusi filtreerima. Kasutajal peaks olema võimalik valida korraga mitu kategooriat, mis võimaldab tooteid paremini kohandada. Näiteks "Lõhe" ja "Krevetid" valimisel kuvatakse ainult üksused, mis sisaldavad mõlemat koostisosa.

Praegu töötavad paljud rakendused hästi ühe kategooria filtreerimiseks, kuid mitme kategooria lisamine võib olla keeruline. Väljakutse seisneb selles, et kõiki valitud kategooriaid võetakse arvesse, kui otsustatakse, milliseid üksusi kuvada või peita. Selles artiklis uuritakse, kuidas laiendada ühe kategooria filtreerimist tõhusal viisil mitme kategooria filtreerimiseks JavaScripti abil.

Selles juhendis käsitleme lahendust, mis filtreerib dünaamiliselt kaarte mitme aktiivse nupu alusel, pakkudes lihtsat ja kasutajasõbralikku kogemust. Selle JavaScripti lahenduse rakendamisel saate teada, kuidas parandada oma veebilehe interaktiivsust ja suurendada kasutajate seotust.

JavaScripti mitme kategooria filtreerimise mõistmine

Ülaltoodud skriptid keskenduvad üksuste dünaamilisele filtreerimisele mitme kategooria alusel, mis on oluline tootepõhiste veebisaitide kasutajakogemuse parandamiseks. Eesmärk on võimaldada kasutajatel valida mitu kategooriat ja vastavalt sellele kaarte filtreerida. See saavutatakse JavaScripti abil, püüdes kinni nupuklõpsud, salvestades valitud kategooriad massiivi ja kuvades seejärel ainult kaardid, mis vastavad kõigile valitud kategooriatele. Protsess käivitub, kui kasutaja klõpsab kategoorianupul, mis lülitab selle nupu aktiivse oleku. Nupu väärtus salvestatakse massiivi, mis esindab kõiki aktiivseid filtreid.

Selle lahenduse kriitiline osa on massiivimeetodi kasutamine iga (). See käsk tagab, et kõiki valitud kategooriaid võrreldakse kaardi kategooriatega. See kontrollib, kas iga aktiivne kategooria leidub kaardi kategooriates, võimaldades seega mitme kategooria filtreerimisel sujuvalt toimida. Teine oluline meetod on split (), mida kasutatakse iga kaardi kategooriate jada massiiviks jagamiseks. See võimaldab JavaScriptil võrrelda üksikuid kategooriaid ja määrata, millised kaardid tuleks kuvada või peita.

Lisaks kasutab skript classList.toggle() nuppudele aktiivse klassi lisamiseks või eemaldamiseks klõpsamisel. See klass on visuaalse tagasiside jaoks ülioluline, kuna see näitab, millised nupud on hetkel aktiivsed. Kui nupp on desaktiveeritud, eemaldatakse selle kategooria aktiivsete kategooriate massiivist ja ekraani värskendamiseks käivitatakse uuesti filtreerimisfunktsioon. Kaardid, mis ei vasta aktiivsetele kategooriatele, peidetakse, lisades nende passiivseks märkimiseks klassi. See meetod tagab, et kasutajad saavad hõlpsalt otsingut täpsustada, valides mitu filtrit või tühistades valiku.

Tagaprogrammi skript on üles ehitatud nii, et see käsitleb toodete filtreerimist serveripoolsel Node.js-i ja Expressi abil. Valitud kategooriad saadetakse serverisse POST-päringu kaudu ja server töötleb seda päringut, filtreerides tooted ja tagastades ainult need üksused, mis vastavad aktiivsetele kategooriatele. Server kasutab sama loogikat nagu esiots, kasutades filter() meetod valitud kategooriate võrdlemiseks iga toote kategooriatega. See lähenemine on kasulik suurte andmekogumite käsitlemisel, kuna see koormab töötlemise kliendi poolelt maha, mille tulemuseks on lõppkasutajate jaoks parem jõudlus.

// 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";
  });
}

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'));

Täiustatud tehnikad mitme kategooria filtreerimiseks veebiarenduses

Mitme kategooria filtreerimissüsteemi juurutamisel JavaScript, on oluline arvestada mitte ainult kasutajaliidese interaktsiooni, vaid ka seda toetava andmestruktuuriga. Dünaamilise sisu kontekstis säilitades optimeeritud ja puhta DOM manipuleerimisstrateegia on võtmetähtsusega. Näiteks saate mitme kategooria nupu tõhusaks käsitlemiseks kasutada sündmuste delegeerimise tehnikaid, tagades, et manipuleeritakse ainult vajalikke DOM-i elemente.

Üks aspekt, mis võib filtreerimiskogemust veelgi täiustada, on keerukamate kasutajaliidese elementide, näiteks märkeruutude või mitme valiku rippmenüüde lisamine lihtsate nuppude asemel. See võimaldab kasutajatel filtritega üksikasjalikumalt suhelda. Näiteks mitut valikut võimaldav rippmenüü pakub kasutajatele kategooriate valimisel puhtamat kasutajaliidest ja suuremat paindlikkust. Seda saab rakendada täiendava JavaScripti loogika ja stiiliga, kasutades samas massiivimeetodeid nagu filter() ja every() kategooriate võrdlemiseks.

Teine oluline kaalutlus on filtreerimissüsteemi jõudlus, eriti kui tegemist on suure andmestikuga. Kui teil on filtreerimiseks sadu või tuhandeid üksusi, on ülioluline minimeerida DOM-i manipuleerimist nii palju kui võimalik. Üks viis selle optimeerimiseks on DOM-i värskenduste komplekteerimine, kasutades requestAnimationFrame() või debounce() meetodid värskenduste määra kontrollimiseks ja sujuva kasutuskogemuse tagamiseks. Need tehnikad mitte ainult ei paranda jõudlust, vaid suurendavad ka lehe reageerimisvõimet, muutes selle suuremate andmekogumite jaoks skaleeritavamaks.