ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಮತ್ತು ಬಹು ವರ್ಗಗಳೊಂದಿಗೆ ಉತ್ಪನ್ನ ಫಿಲ್ಟರಿಂಗ್ ಅನ್ನು ವರ್ಧಿಸುವುದು
ಕ್ರಿಯಾತ್ಮಕ, ಬಳಕೆದಾರ ಸ್ನೇಹಿ ವೆಬ್ ಪುಟಗಳನ್ನು ರಚಿಸುವುದು ತಡೆರಹಿತ ಸಂಚರಣೆ ಮತ್ತು ವಿಷಯದ ಸುಲಭ ಫಿಲ್ಟರಿಂಗ್ ಅನ್ನು ಒಳಗೊಂಡಿರುತ್ತದೆ. ಬಹು ವರ್ಗಗಳಿಗೆ ಸೇರುವ ಉತ್ಪನ್ನಗಳು ಅಥವಾ ವಸ್ತುಗಳನ್ನು ಪ್ರದರ್ಶಿಸುವಾಗ ಇದು ವಿಶೇಷವಾಗಿ ಉಪಯುಕ್ತವಾಗಿದೆ. JavaScript ಅನ್ನು ಬಳಸಿಕೊಂಡು, ನಾವು ಬಹು ವರ್ಗಗಳ ಆಧಾರದ ಮೇಲೆ ಐಟಂಗಳನ್ನು ಫಿಲ್ಟರ್ ಮಾಡಲು ಅರ್ಥಗರ್ಭಿತ ಮಾರ್ಗವನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸಬಹುದು, ಬಳಕೆದಾರರು ಅವರು ಹುಡುಕುತ್ತಿರುವುದನ್ನು ನಿಖರವಾಗಿ ಹುಡುಕಲು ಸುಲಭವಾಗುತ್ತದೆ.
ಈ ಸನ್ನಿವೇಶದಲ್ಲಿ, ವರ್ಗದ ಬಟನ್ ಅನ್ನು ಕ್ಲಿಕ್ ಮಾಡುವುದರಿಂದ ಪುಟದಲ್ಲಿ ಪ್ರದರ್ಶಿಸಲಾದ ಐಟಂಗಳನ್ನು ಫಿಲ್ಟರ್ ಮಾಡಬೇಕು. ಬಳಕೆದಾರನು ಏಕಕಾಲದಲ್ಲಿ ಅನೇಕ ವರ್ಗಗಳನ್ನು ಆಯ್ಕೆ ಮಾಡಲು ಸಾಧ್ಯವಾಗುತ್ತದೆ, ಉತ್ಪನ್ನಗಳ ಹೆಚ್ಚು ಸೂಕ್ತವಾದ ವೀಕ್ಷಣೆಯನ್ನು ಅನುಮತಿಸುತ್ತದೆ. ಉದಾಹರಣೆಗೆ, "ಸಾಲ್ಮನ್" ಮತ್ತು "ಸೀಗಡಿ" ಆಯ್ಕೆ ಮಾಡುವುದರಿಂದ ಎರಡೂ ಪದಾರ್ಥಗಳನ್ನು ಹೊಂದಿರುವ ಐಟಂಗಳನ್ನು ಮಾತ್ರ ತೋರಿಸಬೇಕು.
ಪ್ರಸ್ತುತ, ಏಕ-ವರ್ಗದ ಫಿಲ್ಟರಿಂಗ್‌ಗಾಗಿ ಅನೇಕ ಅನುಷ್ಠಾನಗಳು ಉತ್ತಮವಾಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತವೆ, ಆದರೆ ಬಹು ವರ್ಗಗಳನ್ನು ಸೇರಿಸುವುದು ಟ್ರಿಕಿ ಆಗಿರಬಹುದು. ಯಾವ ಐಟಂಗಳನ್ನು ತೋರಿಸಬೇಕು ಅಥವಾ ಮರೆಮಾಡಬೇಕು ಎಂಬುದನ್ನು ನಿರ್ಧರಿಸುವಾಗ ಆಯ್ಕೆಮಾಡಿದ ಎಲ್ಲಾ ವರ್ಗಗಳನ್ನು ಪರಿಗಣಿಸಲಾಗುತ್ತದೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳುವುದು ಸವಾಲು. ಈ ಲೇಖನವು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಅನ್ನು ಬಳಸಿಕೊಂಡು ಸಮರ್ಥ ರೀತಿಯಲ್ಲಿ ಏಕ-ವರ್ಗದ ಫಿಲ್ಟರಿಂಗ್ ಅನ್ನು ಬಹು-ವರ್ಗದ ಫಿಲ್ಟರಿಂಗ್‌ಗೆ ಹೇಗೆ ವಿಸ್ತರಿಸುವುದು ಎಂಬುದನ್ನು ಪರಿಶೋಧಿಸುತ್ತದೆ.
ಈ ಮಾರ್ಗದರ್ಶಿಯಲ್ಲಿ, ಸುಲಭ ಮತ್ತು ಬಳಕೆದಾರ ಸ್ನೇಹಿ ಅನುಭವವನ್ನು ಒದಗಿಸುವ, ಬಹು ಸಕ್ರಿಯ ಬಟನ್‌ಗಳ ಆಧಾರದ ಮೇಲೆ ಕ್ರಿಯಾತ್ಮಕವಾಗಿ ಕಾರ್ಡ್‌ಗಳನ್ನು ಫಿಲ್ಟರ್ ಮಾಡುವ ಪರಿಹಾರದ ಮೂಲಕ ನಾವು ನಡೆಯುತ್ತೇವೆ. ಈ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಪರಿಹಾರವನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸುವ ಮೂಲಕ, ನಿಮ್ಮ ವೆಬ್ ಪುಟದ ಪರಸ್ಪರ ಕ್ರಿಯೆಯನ್ನು ಹೇಗೆ ಸುಧಾರಿಸುವುದು ಮತ್ತು ಬಳಕೆದಾರರ ತೊಡಗಿಸಿಕೊಳ್ಳುವಿಕೆಯನ್ನು ಹೆಚ್ಚಿಸುವುದು ಹೇಗೆ ಎಂಬುದನ್ನು ನೀವು ಕಲಿಯುವಿರಿ.
| ಆಜ್ಞೆ | ಬಳಕೆಯ ಉದಾಹರಣೆ |
|---|---|
| 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 => selectedCategories.every(cat => product.categories.includes(cat))) ಬಳಕೆದಾರರು ಆಯ್ಕೆ ಮಾಡಿದ ವರ್ಗಗಳ ಆಧಾರದ ಮೇಲೆ ಉತ್ಪನ್ನಗಳನ್ನು ಫಿಲ್ಟರ್ ಮಾಡುತ್ತದೆ. |
| split() | ವಿಭಾಗಗಳ ಸ್ಟ್ರಿಂಗ್ ಅನ್ನು ಅರೇ ಆಗಿ ಪರಿವರ್ತಿಸಲು ಸ್ಪ್ಲಿಟ್() ವಿಧಾನವನ್ನು ಬಳಸಲಾಗುತ್ತದೆ. ಉದಾಹರಣೆಗೆ, card.getAttribute("data-category").split(",") ಸಕ್ರಿಯ ವರ್ಗಗಳೊಂದಿಗೆ ಸುಲಭವಾಗಿ ಹೋಲಿಕೆ ಮಾಡಲು ಅಲ್ಪವಿರಾಮದಿಂದ ಪ್ರತ್ಯೇಕಿಸಲಾದ ವರ್ಗದ ಸ್ಟ್ರಿಂಗ್ ಅನ್ನು ಒಂದು ಶ್ರೇಣಿಗೆ ವಿಭಜಿಸುತ್ತದೆ. |
| classList.add() | ಈ ವಿಧಾನವು ಒಂದು ಅಂಶಕ್ಕೆ ನಿರ್ದಿಷ್ಟ ವರ್ಗವನ್ನು ಸೇರಿಸುತ್ತದೆ. ಸಕ್ರಿಯ ಫಿಲ್ಟರ್‌ಗಳಿಗೆ ಹೊಂದಿಕೆಯಾಗದ ಕಾರ್ಡ್‌ಗಳನ್ನು ಮರೆಮಾಡಲು ನಿಷ್ಕ್ರಿಯ-ಕಾರ್ಡ್ ವರ್ಗವನ್ನು ಸೇರಿಸಲು ಇದನ್ನು ಬಳಸಲಾಗುತ್ತದೆ. ಉದಾಹರಣೆಗೆ, card.classList.add("ನಿಷ್ಕ್ರಿಯ-ಕಾರ್ಡ್") ಅದರ ವಿಭಾಗಗಳು ಆಯ್ಕೆಮಾಡಿದವುಗಳಿಗೆ ಹೊಂದಿಕೆಯಾಗದಿದ್ದಾಗ ಕಾರ್ಡ್ ಅನ್ನು ಮರೆಮಾಡುತ್ತದೆ. |
| trim() | ಟ್ರಿಮ್ () ವಿಧಾನವನ್ನು ಸ್ಟ್ರಿಂಗ್‌ನ ಎರಡೂ ತುದಿಗಳಿಂದ ವೈಟ್‌ಸ್ಪೇಸ್ ಅನ್ನು ತೆಗೆದುಹಾಕಲು ಬಳಸಲಾಗುತ್ತದೆ. ಸ್ಕ್ರಿಪ್ಟ್‌ನಲ್ಲಿ, ಬಟನ್‌ಗಳಿಂದ ವರ್ಗಗಳನ್ನು ಉತ್ಪನ್ನ ಡೇಟಾದಿಂದ ವರ್ಗಗಳೊಂದಿಗೆ ಸ್ವಚ್ಛವಾಗಿ ಹೋಲಿಸಲಾಗಿದೆ ಎಂದು ಇದು ಖಚಿತಪಡಿಸುತ್ತದೆ. ಉದಾಹರಣೆಗೆ, button.innerText.trim() ಯಾವುದೇ ಹೆಚ್ಚುವರಿ ಸ್ಥಳಗಳನ್ನು ಪರಿಗಣಿಸುವುದಿಲ್ಲ ಎಂದು ಖಚಿತಪಡಿಸುತ್ತದೆ. |
| post() | ಬ್ಯಾಕೆಂಡ್ ಸ್ಕ್ರಿಪ್ಟ್‌ನಲ್ಲಿ, ಕ್ಲೈಂಟ್ ಕಳುಹಿಸಿದ ಡೇಟಾವನ್ನು ಸ್ವೀಕರಿಸುವ ಮಾರ್ಗವನ್ನು ರಚಿಸಲು ಪೋಸ್ಟ್() ಅನ್ನು ಬಳಸಲಾಗುತ್ತದೆ (ಈ ಸಂದರ್ಭದಲ್ಲಿ, ಆಯ್ಕೆಮಾಡಿದ ವಿಭಾಗಗಳು). ಆಯ್ಕೆಮಾಡಿದ ವರ್ಗಗಳ ಆಧಾರದ ಮೇಲೆ ಫಿಲ್ಟರ್ ಮಾಡಿದ ಉತ್ಪನ್ನ ಡೇಟಾವನ್ನು ಹಿಂತಿರುಗಿಸಲು ಸರ್ವರ್-ಸೈಡ್ ಸ್ಕ್ರಿಪ್ಟ್ ಈ ವಿನಂತಿಯನ್ನು ಪ್ರಕ್ರಿಯೆಗೊಳಿಸುತ್ತದೆ. |
| json() | ಎಕ್ಸ್‌ಪ್ರೆಸ್‌ನಲ್ಲಿನ ಈ ವಿಧಾನವನ್ನು ಕ್ಲೈಂಟ್‌ಗೆ ಮರಳಿ JSON ಪ್ರತಿಕ್ರಿಯೆಯನ್ನು ಕಳುಹಿಸಲು ಬಳಸಲಾಗುತ್ತದೆ. ಉದಾಹರಣೆಗೆ, res.json(filteredProducts) ಆಯ್ದ ವರ್ಗಗಳಿಗೆ ಹೊಂದಿಕೆಯಾಗುವ ಉತ್ಪನ್ನಗಳನ್ನು ಹಿಂತಿರುಗಿಸುತ್ತದೆ, ಫಿಲ್ಟರ್ ಮಾಡಿದ ಉತ್ಪನ್ನಗಳನ್ನು ಪ್ರದರ್ಶಿಸಲು ಕ್ಲೈಂಟ್-ಸೈಡ್ ಅನ್ನು ಅನುಮತಿಸುತ್ತದೆ. |
ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್‌ನಲ್ಲಿ ಬಹು-ವರ್ಗದ ಫಿಲ್ಟರಿಂಗ್ ಅನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು
ಮೇಲೆ ಒದಗಿಸಲಾದ ಸ್ಕ್ರಿಪ್ಟ್‌ಗಳು ಉತ್ಪನ್ನ ಆಧಾರಿತ ವೆಬ್‌ಸೈಟ್‌ಗಳಲ್ಲಿ ಬಳಕೆದಾರರ ಅನುಭವವನ್ನು ಹೆಚ್ಚಿಸಲು ಅತ್ಯಗತ್ಯವಾದ ಬಹು ವರ್ಗಗಳ ಆಧಾರದ ಮೇಲೆ ಕ್ರಿಯಾತ್ಮಕವಾಗಿ ಫಿಲ್ಟರ್ ಮಾಡುವ ಐಟಂಗಳ ಮೇಲೆ ಕೇಂದ್ರೀಕರಿಸುತ್ತವೆ. ಬಹು ವಿಭಾಗಗಳನ್ನು ಆಯ್ಕೆ ಮಾಡಲು ಮತ್ತು ಅದಕ್ಕೆ ಅನುಗುಣವಾಗಿ ಕಾರ್ಡ್‌ಗಳನ್ನು ಫಿಲ್ಟರ್ ಮಾಡಲು ಬಳಕೆದಾರರನ್ನು ಅನುಮತಿಸುವುದು ಗುರಿಯಾಗಿದೆ. ಬಟನ್ ಕ್ಲಿಕ್‌ಗಳನ್ನು ಸೆರೆಹಿಡಿಯುವ ಮೂಲಕ, ಆಯ್ದ ವರ್ಗಗಳನ್ನು ಒಂದು ಶ್ರೇಣಿಯಲ್ಲಿ ಸಂಗ್ರಹಿಸುವ ಮೂಲಕ ಮತ್ತು ಆಯ್ಕೆ ಮಾಡಿದ ಎಲ್ಲಾ ವರ್ಗಗಳಿಗೆ ಹೊಂದಿಕೆಯಾಗುವ ಕಾರ್ಡ್‌ಗಳನ್ನು ಮಾತ್ರ ಪ್ರದರ್ಶಿಸುವ ಮೂಲಕ JavaScript ಅನ್ನು ಬಳಸಿಕೊಂಡು ಇದನ್ನು ಸಾಧಿಸಲಾಗುತ್ತದೆ. ಬಳಕೆದಾರರು ವರ್ಗದ ಬಟನ್ ಅನ್ನು ಕ್ಲಿಕ್ ಮಾಡಿದಾಗ ಪ್ರಕ್ರಿಯೆಯು ಪ್ರಾರಂಭವಾಗುತ್ತದೆ, ಅದು ಆ ಬಟನ್‌ನ ಸಕ್ರಿಯ ಸ್ಥಿತಿಯನ್ನು ಟಾಗಲ್ ಮಾಡುತ್ತದೆ. ಬಟನ್‌ನ ಮೌಲ್ಯವನ್ನು ಒಂದು ಶ್ರೇಣಿಯಲ್ಲಿ ಸಂಗ್ರಹಿಸಲಾಗಿದೆ, ಇದು ಎಲ್ಲಾ ಸಕ್ರಿಯ ಫಿಲ್ಟರ್‌ಗಳನ್ನು ಪ್ರತಿನಿಧಿಸುತ್ತದೆ.
ಈ ಪರಿಹಾರದ ನಿರ್ಣಾಯಕ ಭಾಗವು ಅರೇ ವಿಧಾನವನ್ನು ಬಳಸುತ್ತಿದೆ ಪ್ರತಿ(). ಈ ಆಜ್ಞೆಯು ಎಲ್ಲಾ ಆಯ್ಕೆಮಾಡಿದ ವರ್ಗಗಳನ್ನು ಕಾರ್ಡ್‌ನ ವರ್ಗಗಳೊಂದಿಗೆ ಹೋಲಿಸುವುದನ್ನು ಖಚಿತಪಡಿಸುತ್ತದೆ. ಪ್ರತಿಯೊಂದು ಸಕ್ರಿಯ ವರ್ಗವು ಕಾರ್ಡ್‌ನ ವರ್ಗಗಳಲ್ಲಿ ಕಂಡುಬಂದಿದೆಯೇ ಎಂದು ಪರಿಶೀಲಿಸುತ್ತದೆ, ಹೀಗಾಗಿ ಬಹು-ವರ್ಗದ ಫಿಲ್ಟರಿಂಗ್ ಸರಾಗವಾಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸಲು ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ. ಮತ್ತೊಂದು ಪ್ರಮುಖ ವಿಧಾನವೆಂದರೆ ವಿಭಜನೆ (), ಪ್ರತಿ ಕಾರ್ಡ್‌ನಿಂದ ವರ್ಗಗಳ ಸ್ಟ್ರಿಂಗ್ ಅನ್ನು ಅರೇ ಆಗಿ ಮುರಿಯಲು ಬಳಸಲಾಗುತ್ತದೆ. ಇದು ಪ್ರತ್ಯೇಕ ವರ್ಗಗಳನ್ನು ಹೋಲಿಸಲು ಮತ್ತು ಯಾವ ಕಾರ್ಡ್‌ಗಳನ್ನು ಪ್ರದರ್ಶಿಸಬೇಕು ಅಥವಾ ಮರೆಮಾಡಬೇಕು ಎಂಬುದನ್ನು ನಿರ್ಧರಿಸಲು JavaScript ಅನ್ನು ಸಕ್ರಿಯಗೊಳಿಸುತ್ತದೆ.
ಜೊತೆಗೆ, ಸ್ಕ್ರಿಪ್ಟ್ ಬಳಸುತ್ತದೆ classList.toggle() ಕ್ಲಿಕ್ ಮಾಡಿದಾಗ ಬಟನ್‌ಗಳಲ್ಲಿ ಸಕ್ರಿಯ ವರ್ಗವನ್ನು ಸೇರಿಸಲು ಅಥವಾ ತೆಗೆದುಹಾಕಲು. ದೃಶ್ಯ ಪ್ರತಿಕ್ರಿಯೆಗಾಗಿ ಈ ವರ್ಗವು ನಿರ್ಣಾಯಕವಾಗಿದೆ, ಏಕೆಂದರೆ ಪ್ರಸ್ತುತ ಯಾವ ಬಟನ್‌ಗಳು ಸಕ್ರಿಯವಾಗಿವೆ ಎಂಬುದನ್ನು ಇದು ಸೂಚಿಸುತ್ತದೆ. ಬಟನ್ ಅನ್ನು ನಿಷ್ಕ್ರಿಯಗೊಳಿಸಿದಾಗ, ಅದರ ವರ್ಗವನ್ನು ಸಕ್ರಿಯ ವರ್ಗಗಳ ಶ್ರೇಣಿಯಿಂದ ತೆಗೆದುಹಾಕಲಾಗುತ್ತದೆ ಮತ್ತು ಪ್ರದರ್ಶನವನ್ನು ನವೀಕರಿಸಲು ಫಿಲ್ಟರಿಂಗ್ ಕಾರ್ಯವನ್ನು ಮತ್ತೆ ಪ್ರಚೋದಿಸಲಾಗುತ್ತದೆ. ಸಕ್ರಿಯ ವರ್ಗಗಳಿಗೆ ಹೊಂದಿಕೆಯಾಗದ ಕಾರ್ಡ್‌ಗಳನ್ನು ನಿಷ್ಕ್ರಿಯ ಎಂದು ಗುರುತಿಸಲು ವರ್ಗವನ್ನು ಸೇರಿಸುವ ಮೂಲಕ ಮರೆಮಾಡಲಾಗಿದೆ. ಬಹು ಫಿಲ್ಟರ್‌ಗಳನ್ನು ಆಯ್ಕೆಮಾಡುವ ಅಥವಾ ಆಯ್ಕೆ ರದ್ದುಮಾಡುವ ಮೂಲಕ ಬಳಕೆದಾರರು ತಮ್ಮ ಹುಡುಕಾಟವನ್ನು ಸುಲಭವಾಗಿ ಪರಿಷ್ಕರಿಸಬಹುದು ಎಂಬುದನ್ನು ಈ ವಿಧಾನವು ಖಚಿತಪಡಿಸುತ್ತದೆ.
Node.js ಮತ್ತು ಎಕ್ಸ್‌ಪ್ರೆಸ್ ಅನ್ನು ಬಳಸಿಕೊಂಡು ಸರ್ವರ್-ಸೈಡ್‌ನಲ್ಲಿ ಉತ್ಪನ್ನ ಫಿಲ್ಟರಿಂಗ್ ಅನ್ನು ನಿರ್ವಹಿಸಲು ಬ್ಯಾಕ್-ಎಂಡ್ ಸ್ಕ್ರಿಪ್ಟ್ ಅನ್ನು ರಚಿಸಲಾಗಿದೆ. ಆಯ್ದ ವರ್ಗಗಳನ್ನು POST ವಿನಂತಿಯ ಮೂಲಕ ಸರ್ವರ್‌ಗೆ ಕಳುಹಿಸಲಾಗುತ್ತದೆ ಮತ್ತು ಉತ್ಪನ್ನಗಳನ್ನು ಫಿಲ್ಟರ್ ಮಾಡುವ ಮೂಲಕ ಮತ್ತು ಸಕ್ರಿಯ ವರ್ಗಗಳಿಗೆ ಹೊಂದಿಕೆಯಾಗುವ ಐಟಂಗಳನ್ನು ಮಾತ್ರ ಹಿಂತಿರುಗಿಸುವ ಮೂಲಕ ಸರ್ವರ್ ಈ ವಿನಂತಿಯನ್ನು ಪ್ರಕ್ರಿಯೆಗೊಳಿಸುತ್ತದೆ. ಸರ್ವರ್ ಮುಂಭಾಗದ ತುದಿಯಂತೆಯೇ ಅದೇ ತರ್ಕವನ್ನು ಬಳಸುತ್ತದೆ, ಬಳಸುತ್ತದೆ ಫಿಲ್ಟರ್ () ಆಯ್ದ ವರ್ಗಗಳನ್ನು ಪ್ರತಿ ಉತ್ಪನ್ನದ ವರ್ಗಗಳೊಂದಿಗೆ ಹೋಲಿಸುವ ವಿಧಾನ. ದೊಡ್ಡ ಡೇಟಾಸೆಟ್‌ಗಳೊಂದಿಗೆ ವ್ಯವಹರಿಸುವಾಗ ಈ ವಿಧಾನವು ಉಪಯುಕ್ತವಾಗಿದೆ, ಏಕೆಂದರೆ ಇದು ಕ್ಲೈಂಟ್-ಸೈಡ್‌ನಿಂದ ಸಂಸ್ಕರಣೆಯನ್ನು ಆಫ್‌ಲೋಡ್ ಮಾಡುತ್ತದೆ, ಇದು ಅಂತಿಮ ಬಳಕೆದಾರರಿಗೆ ಉತ್ತಮ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ನೀಡುತ್ತದೆ.
ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಬಳಸಿ ಡೈನಾಮಿಕ್ ಐಟಂ ಫಿಲ್ಟರಿಂಗ್: ಆಪ್ಟಿಮೈಸ್ಡ್ ಬಹು-ವರ್ಗ ಫಿಲ್ಟರಿಂಗ್
ವೆನಿಲ್ಲಾ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಬಳಸಿ ಫ್ರಂಟ್-ಎಂಡ್ ಅಭಿವೃದ್ಧಿ ವಿಧಾನ
// 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";});}
ಡೈನಾಮಿಕ್ ಐಟಂ ಫಿಲ್ಟರಿಂಗ್‌ಗಾಗಿ ಬ್ಯಾಕೆಂಡ್ ಇಂಪ್ಲಿಮೆಂಟೇಶನ್
Node.js ಮತ್ತು ಎಕ್ಸ್‌ಪ್ರೆಸ್ ಅನ್ನು ಬಳಸುವ ಸರ್ವರ್-ಸೈಡ್ ವಿಧಾನ
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'));
ವೆಬ್ ಅಭಿವೃದ್ಧಿಯಲ್ಲಿ ಬಹು-ವರ್ಗದ ಫಿಲ್ಟರಿಂಗ್‌ಗಾಗಿ ಸುಧಾರಿತ ತಂತ್ರಗಳು
ಬಹು-ವರ್ಗದ ಫಿಲ್ಟರಿಂಗ್ ವ್ಯವಸ್ಥೆಯನ್ನು ಅಳವಡಿಸುವಾಗ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್, UI ಸಂವಾದವನ್ನು ಮಾತ್ರವಲ್ಲದೆ ಅದನ್ನು ಬೆಂಬಲಿಸುವ ಡೇಟಾ ರಚನೆಯನ್ನೂ ಪರಿಗಣಿಸುವುದು ಮುಖ್ಯವಾಗಿದೆ. ಡೈನಾಮಿಕ್ ವಿಷಯದ ಸಂದರ್ಭದಲ್ಲಿ, ಆಪ್ಟಿಮೈಸ್ಡ್ ಮತ್ತು ಕ್ಲೀನ್ ಅನ್ನು ನಿರ್ವಹಿಸುವುದು DOM ಕುಶಲ ತಂತ್ರವು ಪ್ರಮುಖವಾಗಿದೆ. ಉದಾಹರಣೆಗೆ, ನೀವು ಬಹು ವರ್ಗದ ಬಟನ್‌ಗಳನ್ನು ಸಮರ್ಥವಾಗಿ ನಿರ್ವಹಿಸಲು ಈವೆಂಟ್ ನಿಯೋಗ ತಂತ್ರಗಳನ್ನು ಬಳಸಬಹುದು, ಅಗತ್ಯವಿರುವ DOM ಅಂಶಗಳನ್ನು ಮಾತ್ರ ಕುಶಲತೆಯಿಂದ ನಿರ್ವಹಿಸಲಾಗಿದೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಬಹುದು.
ಫಿಲ್ಟರಿಂಗ್ ಅನುಭವವನ್ನು ಇನ್ನಷ್ಟು ವರ್ಧಿಸುವ ಒಂದು ಅಂಶವೆಂದರೆ ಸರಳ ಬಟನ್‌ಗಳ ಬದಲಿಗೆ ಚೆಕ್‌ಬಾಕ್ಸ್‌ಗಳು ಅಥವಾ ಬಹು-ಆಯ್ಕೆ ಡ್ರಾಪ್‌ಡೌನ್‌ಗಳಂತಹ ಹೆಚ್ಚು ಅತ್ಯಾಧುನಿಕ UI ಅಂಶಗಳನ್ನು ಸೇರಿಸುವುದು. ಇದು ಬಳಕೆದಾರರಿಗೆ ಫಿಲ್ಟರ್‌ಗಳೊಂದಿಗೆ ಹೆಚ್ಚು ಹರಳಿನ ರೀತಿಯಲ್ಲಿ ಸಂವಹನ ನಡೆಸಲು ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ. ಉದಾಹರಣೆಗೆ, ಬಹು ಆಯ್ಕೆಗಳನ್ನು ಅನುಮತಿಸುವ ಡ್ರಾಪ್‌ಡೌನ್ ಕ್ಲೀನರ್ UI ಮತ್ತು ವರ್ಗಗಳನ್ನು ಆಯ್ಕೆಮಾಡುವಾಗ ಬಳಕೆದಾರರಿಗೆ ಹೆಚ್ಚು ನಮ್ಯತೆಯನ್ನು ಒದಗಿಸುತ್ತದೆ. ಹೆಚ್ಚುವರಿ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಲಾಜಿಕ್ ಮತ್ತು ಸ್ಟೈಲಿಂಗ್‌ನೊಂದಿಗೆ ಇದನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸಬಹುದು, ಆದರೆ ರಚನೆಯ ವಿಧಾನಗಳನ್ನು ಇನ್ನೂ ಬಳಸಿಕೊಳ್ಳಬಹುದು filter() ಮತ್ತು every() ವರ್ಗ ಹೋಲಿಕೆಗಾಗಿ.
ಮತ್ತೊಂದು ನಿರ್ಣಾಯಕ ಪರಿಗಣನೆಯು ಫಿಲ್ಟರಿಂಗ್ ಸಿಸ್ಟಮ್ನ ಕಾರ್ಯಕ್ಷಮತೆಯಾಗಿದೆ, ವಿಶೇಷವಾಗಿ ದೊಡ್ಡ ಡೇಟಾಸೆಟ್ನೊಂದಿಗೆ ವ್ಯವಹರಿಸುವಾಗ. ನೀವು ಫಿಲ್ಟರ್ ಮಾಡಲು ನೂರಾರು ಅಥವಾ ಸಾವಿರಾರು ಐಟಂಗಳನ್ನು ಹೊಂದಿರುವಾಗ, DOM ಮ್ಯಾನಿಪ್ಯುಲೇಶನ್ ಅನ್ನು ಸಾಧ್ಯವಾದಷ್ಟು ಕಡಿಮೆ ಮಾಡುವುದು ಬಹಳ ಮುಖ್ಯ. ಇದನ್ನು ಆಪ್ಟಿಮೈಜ್ ಮಾಡಲು ಒಂದು ಮಾರ್ಗವೆಂದರೆ, ಬಳಸಿಕೊಂಡು DOM ಗೆ ನವೀಕರಣಗಳನ್ನು ಬ್ಯಾಚ್ ಮಾಡುವುದು requestAnimationFrame() ಅಥವಾ debounce() ನವೀಕರಣಗಳ ದರವನ್ನು ನಿಯಂತ್ರಿಸಲು ಮತ್ತು ಸುಗಮ ಬಳಕೆದಾರ ಅನುಭವವನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು ವಿಧಾನಗಳು. ಈ ತಂತ್ರಗಳು ಕಾರ್ಯನಿರ್ವಹಣೆಯನ್ನು ಸುಧಾರಿಸುವುದಲ್ಲದೆ ಪುಟದ ಪ್ರತಿಕ್ರಿಯಾತ್ಮಕತೆಯನ್ನು ಹೆಚ್ಚಿಸುತ್ತವೆ, ಇದು ದೊಡ್ಡ ಡೇಟಾಸೆಟ್‌ಗಳಿಗೆ ಹೆಚ್ಚು ಸ್ಕೇಲೆಬಲ್ ಮಾಡುತ್ತದೆ.
ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್‌ನಲ್ಲಿ ಬಹು-ವರ್ಗದ ಫಿಲ್ಟರಿಂಗ್ ಕುರಿತು ಪದೇ ಪದೇ ಕೇಳಲಾಗುವ ಪ್ರಶ್ನೆಗಳು
- ಬಹು ಸಕ್ರಿಯ ಫಿಲ್ಟರ್‌ಗಳನ್ನು ನಾನು ಹೇಗೆ ನಿರ್ವಹಿಸುವುದು?
- ನೀವು ಸಕ್ರಿಯ ಫಿಲ್ಟರ್‌ಗಳನ್ನು ಒಂದು ಶ್ರೇಣಿಯಲ್ಲಿ ಸಂಗ್ರಹಿಸಬಹುದು ಮತ್ತು ಬಳಸಬಹುದು every() ಪ್ರತಿ ಕಾರ್ಡ್‌ನ ವರ್ಗವು ಆಯ್ಕೆಮಾಡಿದ ಫಿಲ್ಟರ್‌ಗಳಿಗೆ ಹೊಂದಿಕೆಯಾಗುತ್ತದೆಯೇ ಎಂದು ಪರಿಶೀಲಿಸಲು.
- ನಾನು ಅತಿಕ್ರಮಿಸುವ ವರ್ಗಗಳನ್ನು ಹೊಂದಿದ್ದರೆ ಏನಾಗುತ್ತದೆ?
- ಬಳಸುತ್ತಿದೆ split() ಮತ್ತು trim(), ನೀವು ವರ್ಗದ ಡೇಟಾವನ್ನು ಪ್ರತ್ಯೇಕಿಸಬಹುದು ಮತ್ತು ಸ್ವಚ್ಛಗೊಳಿಸಬಹುದು, ಪ್ರತಿ ವರ್ಗವನ್ನು ಸಕ್ರಿಯ ಫಿಲ್ಟರ್‌ಗಳಿಗೆ ಸರಿಯಾಗಿ ಹೋಲಿಸಲಾಗಿದೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಬಹುದು.
- ದೊಡ್ಡ ಡೇಟಾಸೆಟ್‌ಗಳಿಗೆ ಫಿಲ್ಟರಿಂಗ್ ಅನ್ನು ನಾನು ಹೇಗೆ ಆಪ್ಟಿಮೈಜ್ ಮಾಡಬಹುದು?
- ಬ್ಯಾಚ್ DOM ನವೀಕರಣಗಳನ್ನು ಬಳಸಿ requestAnimationFrame() ಅಥವಾ ಕಾರ್ಯಗತಗೊಳಿಸಿ a debounce() ಫಿಲ್ಟರಿಂಗ್ ಕಾರ್ಯಾಚರಣೆಗಳ ಆವರ್ತನವನ್ನು ಕಡಿಮೆ ಮಾಡಲು, ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಸುಧಾರಿಸಲು ಕಾರ್ಯ.
- ಆಯ್ಕೆ ಮಾಡಿದ ಎಲ್ಲಾ ವರ್ಗಗಳಿಗೆ ಹೊಂದಿಕೆಯಾಗುವ ವಸ್ತುಗಳನ್ನು ನಾನು ಹೇಗೆ ಪ್ರದರ್ಶಿಸುವುದು?
- ಬಳಸಿ every() ಎಲ್ಲಾ ಆಯ್ದ ವರ್ಗಗಳನ್ನು ಗೋಚರಿಸುವ ಮೊದಲು ಪ್ರತಿ ಕಾರ್ಡ್‌ನ ಡೇಟಾದಲ್ಲಿ ಸೇರಿಸಲಾಗಿದೆಯೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು.
- ಕಾರ್ಡ್ ವ್ಯವಸ್ಥೆಯಲ್ಲಿ ಮುರಿದ ಚಿತ್ರಗಳನ್ನು ನಿರ್ವಹಿಸಲು ಉತ್ತಮ ಮಾರ್ಗ ಯಾವುದು?
- ಒಂದು ಕಾರ್ಯಗತಗೊಳಿಸಿ error ಪ್ರತಿ ಚಿತ್ರದ ಈವೆಂಟ್ ಕೇಳುಗನು ಚಿತ್ರವನ್ನು ಲೋಡ್ ಮಾಡಲು ವಿಫಲವಾದಾಗ ಅದನ್ನು ಮರೆಮಾಡಲು ಅಥವಾ ಬದಲಾಯಿಸಲು, ಬಳಕೆದಾರರ ಅನುಭವವನ್ನು ಹೆಚ್ಚಿಸುತ್ತದೆ.
ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಫಿಲ್ಟರಿಂಗ್ ಟೆಕ್ನಿಕ್ಸ್‌ನಲ್ಲಿ ಅಂತಿಮ ಆಲೋಚನೆಗಳು
ವೆಬ್ ಪುಟಗಳಲ್ಲಿ ಬಹು-ವರ್ಗದ ಫಿಲ್ಟರಿಂಗ್ ಅನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸುವುದರಿಂದ ಬಳಕೆದಾರರ ಅನುಭವವನ್ನು ಗಮನಾರ್ಹವಾಗಿ ಸುಧಾರಿಸಬಹುದು, ಬಳಕೆದಾರರು ತಮಗೆ ಬೇಕಾದುದನ್ನು ನಿಖರವಾಗಿ ಹುಡುಕಲು ಸುಲಭವಾಗುತ್ತದೆ. ಎಚ್ಚರಿಕೆಯಿಂದ ಬಳಸುವುದರೊಂದಿಗೆ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಮುಂತಾದ ವಿಧಾನಗಳು ಟಾಗಲ್ () ಮತ್ತು ಪ್ರತಿ(), ಡೆವಲಪರ್‌ಗಳು ದೊಡ್ಡ ಡೇಟಾಸೆಟ್‌ಗಳನ್ನು ಸರಾಗವಾಗಿ ನಿರ್ವಹಿಸುವ ಸಮರ್ಥ, ಸ್ಕೇಲೆಬಲ್ ಪರಿಹಾರವನ್ನು ರಚಿಸಬಹುದು.
ಇದಲ್ಲದೆ, DOM ಮ್ಯಾನಿಪ್ಯುಲೇಷನ್ ಅನ್ನು ಉತ್ತಮಗೊಳಿಸುವ ಮೂಲಕ ಮತ್ತು ಅನಗತ್ಯ ಕಾರ್ಯಾಚರಣೆಗಳನ್ನು ಕಡಿಮೆ ಮಾಡುವ ಮೂಲಕ, ಈ ವಿಧಾನವು ಹೆಚ್ಚಿನ ಬಳಕೆದಾರರ ಸಂವಹನದೊಂದಿಗೆ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಖಚಿತಪಡಿಸುತ್ತದೆ. ಈ ಫಿಲ್ಟರಿಂಗ್ ಸಿಸ್ಟಮ್ ಅನ್ನು ಇ-ಕಾಮರ್ಸ್ ವೆಬ್‌ಸೈಟ್‌ಗಳು, ಪೋರ್ಟ್‌ಫೋಲಿಯೊಗಳು ಅಥವಾ ಬಹು ಫಿಲ್ಟರ್‌ಗಳ ಆಧಾರದ ಮೇಲೆ ಡೈನಾಮಿಕ್ ವಿಷಯ ಪ್ರದರ್ಶನ ಅಗತ್ಯವಿರುವ ಯಾವುದೇ ಪುಟಕ್ಕೆ ಸಂಯೋಜಿಸಬಹುದು.
ಮೂಲ ಮತ್ತು ಉಲ್ಲೇಖ ವಿಭಾಗ
- ಈ ಲೇಖನದಲ್ಲಿನ ವಿಷಯ ಮತ್ತು ಕೋಡ್ ಉದಾಹರಣೆಗಳು ಅಲೆನಾ ಚುಯಂಕೋವಾ ಅವರ ಕೋಡ್‌ಪೆನ್ ಉದಾಹರಣೆಯಿಂದ ಸ್ಫೂರ್ತಿ ಪಡೆದಿವೆ. ನೀವು ಮೂಲ ಕೋಡ್ ಅನ್ನು ಇಲ್ಲಿ ಅನ್ವೇಷಿಸಬಹುದು: ಅಲೆನಾ ಅವರ ಕೋಡ್‌ಪೆನ್ .
- ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ರಚನೆಯ ವಿಧಾನಗಳು ಮತ್ತು ಈವೆಂಟ್ ನಿರ್ವಹಣೆಯ ಮೇಲಿನ ಹೆಚ್ಚುವರಿ ಪರಿಕಲ್ಪನೆಗಳನ್ನು ಅಧಿಕೃತ ಮೊಜಿಲ್ಲಾ ಡೆವಲಪರ್ ನೆಟ್‌ವರ್ಕ್ ದಾಖಲಾತಿಯಿಂದ ಉಲ್ಲೇಖಿಸಲಾಗಿದೆ, ಇಲ್ಲಿ ಪ್ರವೇಶಿಸಬಹುದು: MDN ವೆಬ್ ಡಾಕ್ಸ್ .
- ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಬಳಸಿಕೊಂಡು DOM ಮ್ಯಾನಿಪ್ಯುಲೇಷನ್ ಮತ್ತು ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಉತ್ತಮಗೊಳಿಸುವ ಕುರಿತು ಹೆಚ್ಚಿನ ಒಳನೋಟಗಳಿಗಾಗಿ, ನಾನು ಸ್ಮಾಶಿಂಗ್ ಮ್ಯಾಗಜೀನ್‌ನಿಂದ ಈ ಸಮಗ್ರ ಮಾರ್ಗದರ್ಶಿಯನ್ನು ಉಲ್ಲೇಖಿಸಿದೆ: ಸಮರ್ಥ DOM ಅನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು .