गतिशील वेबसाइटों के

Jules David

रविवार, 20 अक्तूबर 2024 को 3:37:45 am

जावास्क्रिप्ट और एकाधिक श्रेणियों के साथ उत्पाद फ़िल्टरिंग को बढ़ाना

गतिशील, उपयोगकर्ता-अनुकूल वेब पेज बनाने में निर्बाध नेविगेशन और सामग्री को आसान फ़िल्टरिंग प्रदान करना शामिल है। यह कई श्रेणियों में आने वाले उत्पादों या वस्तुओं को प्रदर्शित करते समय विशेष रूप से उपयोगी होता है। जावास्क्रिप्ट का उपयोग करके, हम कई श्रेणियों के आधार पर वस्तुओं को फ़िल्टर करने का एक सहज तरीका लागू कर सकते हैं, जिससे उपयोगकर्ताओं के लिए वही खोजना आसान हो जाता है जो वे खोज रहे हैं।

इस परिदृश्य में, श्रेणी बटन पर क्लिक करने से पृष्ठ पर प्रदर्शित आइटम फ़िल्टर हो जाने चाहिए। उपयोगकर्ता को एक साथ कई श्रेणियों का चयन करने में सक्षम होना चाहिए, जिससे उत्पादों का अधिक अनुकूलित दृश्य प्राप्त हो सके। उदाहरण के लिए, "सैल्मन" और "झींगा" का चयन करने पर केवल दोनों सामग्रियों वाले आइटम ही दिखने चाहिए।

वर्तमान में, कई कार्यान्वयन एकल-श्रेणी फ़िल्टरिंग के लिए अच्छा काम करते हैं, लेकिन कई श्रेणियां जोड़ना मुश्किल हो सकता है। चुनौती यह सुनिश्चित करने में है कि कौन सी वस्तुएँ दिखानी या छिपानी हैं, यह तय करते समय सभी चयनित श्रेणियों पर विचार किया जाए। यह आलेख बताता है कि जावास्क्रिप्ट का उपयोग करके कुशल तरीके से एकल-श्रेणी फ़िल्टरिंग को बहु-श्रेणी फ़िल्टरिंग तक कैसे बढ़ाया जाए।

इस गाइड में, हम एक ऐसे समाधान के बारे में जानेंगे जो कई सक्रिय बटनों के आधार पर कार्डों को गतिशील रूप से फ़िल्टर करता है, एक आसान और उपयोगकर्ता के अनुकूल अनुभव प्रदान करता है। इस जावास्क्रिप्ट समाधान को लागू करके, आप सीखेंगे कि अपने वेब पेज की अन्तरक्रियाशीलता को कैसे सुधारें और उपयोगकर्ता सहभागिता को कैसे बढ़ावा दें।

आज्ञा	उपयोग का उदाहरण
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 =>प्रत्येक() विधि का उपयोग यह जांचने के लिए किया जाता है कि सभी चयनित श्रेणियां प्रत्येक कार्ड की श्रेणियों से मेल खाती हैं या नहीं। यह सुनिश्चित करने के लिए महत्वपूर्ण है कि एकाधिक श्रेणी फ़िल्टर सही ढंग से काम करें। उदाहरण के लिए, ActiveCategories.every(cat =>cardCategories.includes(cat)) यह सुनिश्चित करता है कि सभी चयनित श्रेणियां कार्ड की श्रेणियों में समाहित हैं।
toggle()	यह कमांड किसी क्लास को चालू या बंद कर देता है। इसका उपयोग क्लिक करने पर श्रेणी बटन से सक्रिय-बटन वर्ग को गतिशील रूप से जोड़ने या हटाने के लिए किया जाता है। इससे यह ट्रैक करने में मदद मिलती है कि कोई बटन सक्रिय है या नहीं, जिससे यह प्रभावित होता है कि कौन से कार्ड दिखाए गए हैं या छिपे हुए हैं।
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 =>फ़िल्टर() विधि परीक्षण पास करने वाले सभी तत्वों के साथ एक नई सरणी बनाती है। Node.js उदाहरण में, product.filter(product => चयनितCategories.every(cat => product.categories.includes(cat))) उपयोगकर्ता द्वारा चुनी गई श्रेणियों के आधार पर उत्पादों को फ़िल्टर करता है।
split()	स्प्लिट() विधि का उपयोग श्रेणियों की एक स्ट्रिंग को एक सरणी में बदलने के लिए किया जाता है। उदाहरण के लिए, कार्ड.गेटएट्रिब्यूट('डेटा-श्रेणी').स्प्लिट(''), सक्रिय श्रेणियों के साथ आसान तुलना के लिए अल्पविराम से अलग की गई श्रेणी स्ट्रिंग को एक सरणी में विभाजित करता है।
classList.add()	यह विधि किसी तत्व में एक निर्दिष्ट वर्ग जोड़ती है। इसका उपयोग उन कार्डों को छिपाने के लिए निष्क्रिय-कार्ड वर्ग को जोड़ने के लिए किया जाता है जो सक्रिय फ़िल्टर से मेल नहीं खाते हैं। उदाहरण के लिए, कार्ड.क्लासलिस्ट.एड('निष्क्रिय-कार्ड') कार्ड को तब छुपाता है जब उसकी श्रेणियां चयनित श्रेणियों से मेल नहीं खातीं।
trim()	ट्रिम() विधि का उपयोग स्ट्रिंग के दोनों सिरों से रिक्त स्थान को हटाने के लिए किया जाता है। स्क्रिप्ट में, यह सुनिश्चित करता है कि बटन की श्रेणियों की तुलना उत्पाद डेटा की श्रेणियों के साथ साफ-सुथरी की गई है। उदाहरण के लिए, बटन.इनरटेक्स्ट.ट्रिम() सुनिश्चित करता है कि किसी अतिरिक्त स्थान पर विचार नहीं किया जाए।
post()	बैकएंड स्क्रिप्ट में, पोस्ट() का उपयोग एक रूट बनाने के लिए किया जाता है जो क्लाइंट द्वारा भेजे गए डेटा को स्वीकार करता है (इस मामले में, चयनित श्रेणियां)। सर्वर-साइड स्क्रिप्ट चयनित श्रेणियों के आधार पर फ़िल्टर किए गए उत्पाद डेटा को वापस करने के लिए इस अनुरोध को संसाधित करती है।
json()	एक्सप्रेस में इस पद्धति का उपयोग क्लाइंट को JSON प्रतिक्रिया वापस भेजने के लिए किया जाता है। उदाहरण के लिए, res.json(filteredProducts) उन उत्पादों को लौटाता है जो चयनित श्रेणियों से मेल खाते हैं, जिससे क्लाइंट-साइड को फ़िल्टर किए गए उत्पादों को प्रदर्शित करने की अनुमति मिलती है।

जावास्क्रिप्ट में बहु-श्रेणी फ़िल्टरिंग को समझना

ऊपर दी गई स्क्रिप्ट कई श्रेणियों के आधार पर आइटम को गतिशील रूप से फ़िल्टर करने पर ध्यान केंद्रित करती है, जो उत्पाद-आधारित वेबसाइटों पर उपयोगकर्ता अनुभव को बढ़ाने के लिए आवश्यक है। लक्ष्य उपयोगकर्ताओं को कई श्रेणियों का चयन करने और तदनुसार कार्ड फ़िल्टर करने की अनुमति देना है। यह जावास्क्रिप्ट का उपयोग करके बटन क्लिक को कैप्चर करके, चयनित श्रेणियों को एक सरणी में संग्रहीत करके और फिर केवल उन कार्डों को प्रदर्शित करके प्राप्त किया जाता है जो सभी चयनित श्रेणियों से मेल खाते हैं। प्रक्रिया तब शुरू होती है जब कोई उपयोगकर्ता किसी श्रेणी बटन पर क्लिक करता है, जो उस बटन की सक्रिय स्थिति को चालू कर देता है। बटन का मान एक सरणी में संग्रहीत है, जो सभी सक्रिय फ़िल्टर का प्रतिनिधित्व करता है।

इस समाधान का एक महत्वपूर्ण हिस्सा सरणी विधि का उपयोग करना है प्रत्येक(). यह आदेश सुनिश्चित करता है कि सभी चयनित श्रेणियों की तुलना कार्ड की श्रेणियों से की जाए। यह जाँचता है कि क्या प्रत्येक सक्रिय श्रेणी कार्ड की श्रेणियों में पाई जाती है, इस प्रकार बहु-श्रेणी फ़िल्टरिंग को सुचारू रूप से कार्य करने की अनुमति मिलती है। एक और महत्वपूर्ण तरीका है विभाजित करना(), जिसका उपयोग प्रत्येक कार्ड से श्रेणियों की स्ट्रिंग को एक सरणी में तोड़ने के लिए किया जाता है। यह जावास्क्रिप्ट को अलग-अलग श्रेणियों की तुलना करने और यह निर्धारित करने में सक्षम बनाता है कि कौन से कार्ड प्रदर्शित या छिपाए जाने चाहिए।

इसके अलावा, स्क्रिप्ट का उपयोग करता है क्लासलिस्ट.टॉगल() क्लिक करने पर बटनों पर सक्रिय वर्ग जोड़ने या हटाने के लिए। यह वर्ग दृश्य प्रतिक्रिया के लिए महत्वपूर्ण है, क्योंकि यह इंगित करता है कि कौन से बटन वर्तमान में सक्रिय हैं। जब कोई बटन निष्क्रिय किया जाता है, तो उसकी श्रेणी को सक्रिय श्रेणियों की सरणी से हटा दिया जाता है, और डिस्प्ले को अपडेट करने के लिए फ़िल्टरिंग फ़ंक्शन फिर से चालू हो जाता है। जो कार्ड सक्रिय श्रेणियों से मेल नहीं खाते उन्हें निष्क्रिय के रूप में चिह्नित करने के लिए एक वर्ग जोड़कर छिपा दिया जाता है। यह विधि सुनिश्चित करती है कि उपयोगकर्ता एकाधिक फ़िल्टर का चयन या चयन रद्द करके आसानी से अपनी खोज को परिष्कृत कर सकते हैं।

बैक-एंड स्क्रिप्ट को Node.js और Express का उपयोग करके सर्वर-साइड पर उत्पाद फ़िल्टरिंग को संभालने के लिए संरचित किया गया है। चयनित श्रेणियां POST अनुरोध के माध्यम से सर्वर को भेजी जाती हैं, और सर्वर उत्पादों को फ़िल्टर करके और केवल सक्रिय श्रेणियों से मेल खाने वाले आइटम लौटाकर इस अनुरोध को संसाधित करता है। सर्वर फ्रंट-एंड के समान तर्क का उपयोग करता है फ़िल्टर() प्रत्येक उत्पाद की श्रेणियों के साथ चयनित श्रेणियों की तुलना करने की विधि। बड़े डेटासेट के साथ काम करते समय यह दृष्टिकोण उपयोगी होता है, क्योंकि यह क्लाइंट-साइड से प्रोसेसिंग को ऑफलोड करता है, जिसके परिणामस्वरूप अंतिम-उपयोगकर्ताओं के लिए बेहतर प्रदर्शन होता है।

जावास्क्रिप्ट का उपयोग करके गतिशील आइटम फ़िल्टरिंग: अनुकूलित बहु-श्रेणी फ़िल्टरिंग

वेनिला जावास्क्रिप्ट का उपयोग करके फ्रंट-एंड विकास दृष्टिकोण

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

वेब विकास में बहु-श्रेणी फ़िल्टरिंग के लिए उन्नत तकनीकें

बहु-श्रेणी फ़िल्टरिंग प्रणाली लागू करते समय जावास्क्रिप्ट, न केवल यूआई इंटरैक्शन पर विचार करना महत्वपूर्ण है, बल्कि इसका समर्थन करने वाली डेटा संरचना पर भी विचार करना महत्वपूर्ण है। गतिशील सामग्री के संदर्भ में, एक अनुकूलित और स्वच्छ बनाए रखना डोम हेरफेर की रणनीति प्रमुख है. उदाहरण के लिए, आप एकाधिक श्रेणी बटनों को कुशलतापूर्वक संभालने के लिए इवेंट डेलिगेशन तकनीकों का उपयोग कर सकते हैं, यह सुनिश्चित करते हुए कि केवल आवश्यक DOM तत्वों में हेरफेर किया गया है।

एक पहलू जो फ़िल्टरिंग अनुभव को और बढ़ा सकता है, वह सरल बटनों के बजाय अधिक परिष्कृत यूआई तत्व, जैसे चेकबॉक्स या मल्टी-सिलेक्ट ड्रॉपडाउन जोड़ना है। यह उपयोगकर्ताओं को फ़िल्टर के साथ अधिक विस्तृत तरीके से इंटरैक्ट करने की अनुमति देता है। उदाहरण के लिए, एक ड्रॉपडाउन जो कई चयनों की अनुमति देता है, श्रेणियां चुनते समय उपयोगकर्ताओं के लिए एक स्वच्छ यूआई और अधिक लचीलापन प्रदान करता है। इसे अतिरिक्त जावास्क्रिप्ट तर्क और स्टाइल के साथ कार्यान्वित किया जा सकता है, जबकि अभी भी सरणी विधियों का उपयोग किया जा सकता है filter() और every() श्रेणी तुलना के लिए.

एक और महत्वपूर्ण विचार फ़िल्टरिंग सिस्टम का प्रदर्शन है, खासकर बड़े डेटासेट के साथ काम करते समय। जब आपके पास फ़िल्टर करने के लिए सैकड़ों या हजारों आइटम हों, तो DOM हेरफेर को यथासंभव कम करना महत्वपूर्ण है। इसे अनुकूलित करने का एक तरीका DOM का उपयोग करके अपडेट को बैच करना है requestAnimationFrame() या debounce() अपडेट की दर को नियंत्रित करने और एक सहज उपयोगकर्ता अनुभव सुनिश्चित करने के तरीके। ये तकनीकें न केवल प्रदर्शन में सुधार करती हैं बल्कि पेज की प्रतिक्रियाशीलता को भी बढ़ाती हैं, जिससे यह बड़े डेटासेट के लिए अधिक स्केलेबल हो जाता है।

जावास्क्रिप्ट में बहु-श्रेणी फ़िल्टरिंग के बारे में अक्सर पूछे जाने वाले प्रश्न

मैं एकाधिक सक्रिय फ़िल्टर कैसे प्रबंधित करूँ?
आप सक्रिय फ़िल्टर को एक सरणी में संग्रहीत कर सकते हैं और उपयोग कर सकते हैं every() यह जांचने के लिए कि क्या प्रत्येक कार्ड की श्रेणी चयनित फ़िल्टर से मेल खाती है।
यदि मेरे पास ओवरलैपिंग श्रेणियां हों तो क्या होगा?
का उपयोग करते हुए split() और trim(), आप श्रेणी डेटा को अलग और साफ़ कर सकते हैं, यह सुनिश्चित करते हुए कि प्रत्येक श्रेणी की तुलना सक्रिय फ़िल्टर से ठीक से की गई है।
मैं बड़े डेटासेट के लिए फ़िल्टरिंग को कैसे अनुकूलित कर सकता हूँ?
बैच DOM अपडेट का उपयोग कर रहे हैं requestAnimationFrame() या एक लागू करें debounce() फ़िल्टरिंग संचालन की आवृत्ति को कम करने, प्रदर्शन में सुधार करने का कार्य।
मैं सभी चयनित श्रेणियों से मेल खाने वाले आइटम कैसे प्रदर्शित करूं?
उपयोग every() यह सुनिश्चित करने के लिए कि सभी चयनित श्रेणियों को दृश्यमान बनाने से पहले प्रत्येक कार्ड के डेटा में शामिल किया गया है।
कार्ड सिस्टम में टूटी छवियों को संभालने का सबसे अच्छा तरीका क्या है?
एक लागू करें error लोड न होने पर छवि को छिपाने या बदलने के लिए प्रत्येक छवि पर ईवेंट श्रोता, उपयोगकर्ता अनुभव को बढ़ाता है।

जावास्क्रिप्ट फ़िल्टरिंग तकनीकों पर अंतिम विचार

वेब पेजों में बहु-श्रेणी फ़िल्टरिंग को लागू करने से उपयोगकर्ता अनुभव में काफी सुधार हो सकता है, जिससे उपयोगकर्ताओं के लिए वही ढूंढना आसान हो जाता है जिसकी उन्हें आवश्यकता है। सावधानी पूर्वक प्रयोग के साथ जावास्क्रिप्ट जैसे तरीके टॉगल() और प्रत्येक(), डेवलपर्स एक कुशल, स्केलेबल समाधान बना सकते हैं जो बड़े डेटासेट को आसानी से संभालता है।

इसके अलावा, DOM हेरफेर को अनुकूलित करके और अनावश्यक संचालन को कम करके, यह दृष्टिकोण उच्च उपयोगकर्ता इंटरैक्शन के साथ भी प्रदर्शन सुनिश्चित करता है। इस फ़िल्टरिंग प्रणाली को ई-कॉमर्स वेबसाइटों, पोर्टफ़ोलियो या किसी भी पेज में एकीकृत किया जा सकता है, जिसमें एकाधिक फ़िल्टर के आधार पर गतिशील सामग्री प्रदर्शन की आवश्यकता होती है।

स्रोत एवं संदर्भ अनुभाग

इस लेख की सामग्री और कोड उदाहरण अलीना चुयानकोवा के कोडपेन उदाहरण से प्रेरित थे। आप यहां मूल कोड का पता लगा सकते हैं: एलेना का कोडपेन .
जावास्क्रिप्ट सरणी विधियों और इवेंट हैंडलिंग पर अतिरिक्त अवधारणाओं को आधिकारिक मोज़िला डेवलपर नेटवर्क दस्तावेज़ से संदर्भित किया गया था, जो यहां उपलब्ध है: एमडीएन वेब डॉक्स .
जावास्क्रिप्ट का उपयोग करके DOM हेरफेर और प्रदर्शन को अनुकूलित करने के बारे में अधिक जानकारी के लिए, मैंने स्मैशिंग मैगज़ीन की इस व्यापक मार्गदर्शिका का संदर्भ लिया: कुशल डोम को समझना .

गतिशील वेबसाइटों के लिए आइटम को कई श्रेणियों के आधार पर क्रमबद्ध करने के लिए जावास्क्रिप्ट का उपयोग करें