JavaScript ਅਤੇ ਕਈ ਸ਼੍ਰੇਣੀਆਂ ਨਾਲ ਉਤਪਾਦ ਫਿਲਟਰਿੰਗ ਨੂੰ ਵਧਾਉਣਾ
ਗਤੀਸ਼ੀਲ, ਉਪਭੋਗਤਾ-ਅਨੁਕੂਲ ਵੈਬ ਪੇਜ ਬਣਾਉਣ ਵਿੱਚ ਸਹਿਜ ਨੈਵੀਗੇਸ਼ਨ ਅਤੇ ਸਮੱਗਰੀ ਦੀ ਆਸਾਨ ਫਿਲਟਰਿੰਗ ਦੀ ਪੇਸ਼ਕਸ਼ ਸ਼ਾਮਲ ਹੈ। ਇਹ ਵਿਸ਼ੇਸ਼ ਤੌਰ 'ਤੇ ਲਾਭਦਾਇਕ ਹੁੰਦਾ ਹੈ ਜਦੋਂ ਉਤਪਾਦਾਂ ਜਾਂ ਆਈਟਮਾਂ ਨੂੰ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰਦੇ ਹੋਏ ਜੋ ਕਈ ਸ਼੍ਰੇਣੀਆਂ ਵਿੱਚ ਆਉਂਦੇ ਹਨ। JavaScript ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ, ਅਸੀਂ ਕਈ ਸ਼੍ਰੇਣੀਆਂ ਦੇ ਆਧਾਰ 'ਤੇ ਆਈਟਮਾਂ ਨੂੰ ਫਿਲਟਰ ਕਰਨ ਦਾ ਇੱਕ ਅਨੁਭਵੀ ਤਰੀਕਾ ਲਾਗੂ ਕਰ ਸਕਦੇ ਹਾਂ, ਜਿਸ ਨਾਲ ਉਪਭੋਗਤਾਵਾਂ ਲਈ ਉਹੀ ਲੱਭਣਾ ਆਸਾਨ ਹੋ ਜਾਂਦਾ ਹੈ ਜੋ ਉਹ ਲੱਭ ਰਹੇ ਹਨ।
ਇਸ ਸਥਿਤੀ ਵਿੱਚ, ਇੱਕ ਸ਼੍ਰੇਣੀ ਬਟਨ 'ਤੇ ਕਲਿੱਕ ਕਰਨ ਨਾਲ ਪੰਨੇ 'ਤੇ ਪ੍ਰਦਰਸ਼ਿਤ ਆਈਟਮਾਂ ਨੂੰ ਫਿਲਟਰ ਕਰਨਾ ਚਾਹੀਦਾ ਹੈ। ਉਪਭੋਗਤਾ ਨੂੰ ਇੱਕੋ ਸਮੇਂ ਕਈ ਸ਼੍ਰੇਣੀਆਂ ਦੀ ਚੋਣ ਕਰਨ ਦੇ ਯੋਗ ਹੋਣਾ ਚਾਹੀਦਾ ਹੈ, ਜਿਸ ਨਾਲ ਉਤਪਾਦਾਂ ਦੇ ਵਧੇਰੇ ਅਨੁਕੂਲ ਦ੍ਰਿਸ਼ ਦੀ ਆਗਿਆ ਮਿਲਦੀ ਹੈ। ਉਦਾਹਰਨ ਲਈ, "ਸਾਲਮਨ" ਅਤੇ "ਸ਼੍ਰੀਮਪ" ਦੀ ਚੋਣ ਕਰਨ ਨਾਲ ਸਿਰਫ਼ ਦੋਵਾਂ ਸਮੱਗਰੀਆਂ ਵਾਲੀਆਂ ਚੀਜ਼ਾਂ ਨੂੰ ਦਿਖਾਉਣਾ ਚਾਹੀਦਾ ਹੈ।
ਵਰਤਮਾਨ ਵਿੱਚ, ਬਹੁਤ ਸਾਰੇ ਲਾਗੂਕਰਨ ਸਿੰਗਲ-ਸ਼੍ਰੇਣੀ ਫਿਲਟਰਿੰਗ ਲਈ ਵਧੀਆ ਕੰਮ ਕਰਦੇ ਹਨ, ਪਰ ਕਈ ਸ਼੍ਰੇਣੀਆਂ ਨੂੰ ਜੋੜਨਾ ਔਖਾ ਹੋ ਸਕਦਾ ਹੈ। ਚੁਣੌਤੀ ਇਹ ਯਕੀਨੀ ਬਣਾਉਣ ਵਿੱਚ ਹੈ ਕਿ ਕਿਹੜੀਆਂ ਆਈਟਮਾਂ ਨੂੰ ਦਿਖਾਉਣਾ ਜਾਂ ਛੁਪਾਉਣਾ ਹੈ, ਇਹ ਫੈਸਲਾ ਕਰਦੇ ਸਮੇਂ ਸਾਰੀਆਂ ਚੁਣੀਆਂ ਗਈਆਂ ਸ਼੍ਰੇਣੀਆਂ ਨੂੰ ਵਿਚਾਰਿਆ ਜਾਂਦਾ ਹੈ। ਇਹ ਲੇਖ JavaScript ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ ਕੁਸ਼ਲ ਤਰੀਕੇ ਨਾਲ ਸਿੰਗਲ-ਸ਼੍ਰੇਣੀ ਫਿਲਟਰਿੰਗ ਨੂੰ ਮਲਟੀ-ਕੈਟੇਗਰੀ ਫਿਲਟਰਿੰਗ ਤੱਕ ਵਧਾਉਣ ਦੇ ਤਰੀਕੇ ਦੀ ਪੜਚੋਲ ਕਰਦਾ ਹੈ।
ਇਸ ਗਾਈਡ ਵਿੱਚ, ਅਸੀਂ ਇੱਕ ਅਜਿਹੇ ਹੱਲ 'ਤੇ ਚੱਲਾਂਗੇ ਜੋ ਇੱਕ ਆਸਾਨ ਅਤੇ ਉਪਭੋਗਤਾ-ਅਨੁਕੂਲ ਅਨੁਭਵ ਪ੍ਰਦਾਨ ਕਰਦੇ ਹੋਏ, ਇੱਕ ਤੋਂ ਵੱਧ ਕਿਰਿਆਸ਼ੀਲ ਬਟਨਾਂ ਦੇ ਅਧਾਰ 'ਤੇ ਕਾਰਡਾਂ ਨੂੰ ਗਤੀਸ਼ੀਲ ਰੂਪ ਵਿੱਚ ਫਿਲਟਰ ਕਰਦਾ ਹੈ। ਇਸ 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 ਉਦਾਹਰਨ ਵਿੱਚ, products.filter(product => selectedCategories.every(cat => product.categories.includes(cat))) ਉਪਭੋਗਤਾ ਦੁਆਰਾ ਚੁਣੀਆਂ ਗਈਆਂ ਸ਼੍ਰੇਣੀਆਂ ਦੇ ਆਧਾਰ 'ਤੇ ਉਤਪਾਦਾਂ ਨੂੰ ਫਿਲਟਰ ਕਰਦਾ ਹੈ। |
| split() | ਸਪਲਿਟ() ਵਿਧੀ ਦੀ ਵਰਤੋਂ ਸ਼੍ਰੇਣੀਆਂ ਦੀ ਇੱਕ ਸਤਰ ਨੂੰ ਇੱਕ ਐਰੇ ਵਿੱਚ ਬਦਲਣ ਲਈ ਕੀਤੀ ਜਾਂਦੀ ਹੈ। ਉਦਾਹਰਨ ਲਈ, card.getAttribute("data-category").split(",") ਸਰਗਰਮ ਸ਼੍ਰੇਣੀਆਂ ਨਾਲ ਸੌਖੀ ਤੁਲਨਾ ਕਰਨ ਲਈ ਕਾਮੇ ਨਾਲ ਵੱਖ ਕੀਤੀ ਸ਼੍ਰੇਣੀ ਸਤਰ ਨੂੰ ਇੱਕ ਐਰੇ ਵਿੱਚ ਵੰਡਦਾ ਹੈ। |
| classList.add() | ਇਹ ਵਿਧੀ ਇੱਕ ਤੱਤ ਵਿੱਚ ਇੱਕ ਨਿਸ਼ਚਿਤ ਕਲਾਸ ਜੋੜਦੀ ਹੈ। ਇਹ ਉਹਨਾਂ ਕਾਰਡਾਂ ਨੂੰ ਲੁਕਾਉਣ ਲਈ ਅਕਿਰਿਆਸ਼ੀਲ-ਕਾਰਡ ਕਲਾਸ ਨੂੰ ਜੋੜਨ ਲਈ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ ਜੋ ਕਿਰਿਆਸ਼ੀਲ ਫਿਲਟਰਾਂ ਨਾਲ ਮੇਲ ਨਹੀਂ ਖਾਂਦੇ। ਉਦਾਹਰਨ ਲਈ, card.classList.add("inactive-card") ਕਾਰਡ ਨੂੰ ਲੁਕਾਉਂਦਾ ਹੈ ਜਦੋਂ ਇਸ ਦੀਆਂ ਸ਼੍ਰੇਣੀਆਂ ਚੁਣੀਆਂ ਗਈਆਂ ਸ਼੍ਰੇਣੀਆਂ ਨਾਲ ਮੇਲ ਨਹੀਂ ਖਾਂਦੀਆਂ। |
| trim() | ਟ੍ਰਿਮ() ਵਿਧੀ ਦੀ ਵਰਤੋਂ ਸਤਰ ਦੇ ਦੋਵਾਂ ਸਿਰਿਆਂ ਤੋਂ ਖਾਲੀ ਥਾਂ ਨੂੰ ਹਟਾਉਣ ਲਈ ਕੀਤੀ ਜਾਂਦੀ ਹੈ। ਸਕ੍ਰਿਪਟ ਵਿੱਚ, ਇਹ ਯਕੀਨੀ ਬਣਾਉਂਦਾ ਹੈ ਕਿ ਬਟਨਾਂ ਦੀਆਂ ਸ਼੍ਰੇਣੀਆਂ ਉਤਪਾਦ ਡੇਟਾ ਦੀਆਂ ਸ਼੍ਰੇਣੀਆਂ ਨਾਲ ਸਾਫ਼-ਸੁਥਰੀ ਤੁਲਨਾ ਵਿੱਚ ਹਨ। ਉਦਾਹਰਨ ਲਈ, button.innerText.trim() ਯਕੀਨੀ ਬਣਾਉਂਦਾ ਹੈ ਕਿ ਕੋਈ ਵਾਧੂ ਖਾਲੀ ਥਾਂ ਨਹੀਂ ਮੰਨੀ ਜਾਂਦੀ। |
| post() | ਬੈਕਐਂਡ ਸਕ੍ਰਿਪਟ ਵਿੱਚ, ਪੋਸਟ() ਇੱਕ ਰੂਟ ਬਣਾਉਣ ਲਈ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ ਜੋ ਕਲਾਇੰਟ ਦੁਆਰਾ ਭੇਜੇ ਗਏ ਡੇਟਾ ਨੂੰ ਸਵੀਕਾਰ ਕਰਦਾ ਹੈ (ਇਸ ਕੇਸ ਵਿੱਚ, ਚੁਣੀਆਂ ਗਈਆਂ ਸ਼੍ਰੇਣੀਆਂ)। ਸਰਵਰ-ਸਾਈਡ ਸਕ੍ਰਿਪਟ ਚੁਣੀਆਂ ਗਈਆਂ ਸ਼੍ਰੇਣੀਆਂ ਦੇ ਆਧਾਰ 'ਤੇ ਫਿਲਟਰ ਕੀਤੇ ਉਤਪਾਦ ਡੇਟਾ ਨੂੰ ਵਾਪਸ ਕਰਨ ਲਈ ਇਸ ਬੇਨਤੀ 'ਤੇ ਕਾਰਵਾਈ ਕਰਦੀ ਹੈ। |
| json() | ਐਕਸਪ੍ਰੈਸ ਵਿੱਚ ਇਹ ਵਿਧੀ ਕਲਾਇੰਟ ਨੂੰ ਇੱਕ JSON ਜਵਾਬ ਵਾਪਸ ਭੇਜਣ ਲਈ ਵਰਤੀ ਜਾਂਦੀ ਹੈ। ਉਦਾਹਰਨ ਲਈ, res.json(filteredProducts) ਉਹਨਾਂ ਉਤਪਾਦਾਂ ਨੂੰ ਵਾਪਸ ਕਰਦਾ ਹੈ ਜੋ ਚੁਣੀਆਂ ਗਈਆਂ ਸ਼੍ਰੇਣੀਆਂ ਨਾਲ ਮੇਲ ਖਾਂਦੇ ਹਨ, ਜਿਸ ਨਾਲ ਕਲਾਇੰਟ-ਸਾਈਡ ਨੂੰ ਫਿਲਟਰ ਕੀਤੇ ਉਤਪਾਦਾਂ ਨੂੰ ਪ੍ਰਦਰਸ਼ਿਤ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ। |
JavaScript ਵਿੱਚ ਮਲਟੀ-ਕੈਟੇਗਰੀ ਫਿਲਟਰਿੰਗ ਨੂੰ ਸਮਝਣਾ
ਉੱਪਰ ਦਿੱਤੀਆਂ ਗਈਆਂ ਸਕ੍ਰਿਪਟਾਂ ਕਈ ਸ਼੍ਰੇਣੀਆਂ ਦੇ ਆਧਾਰ 'ਤੇ ਆਈਟਮਾਂ ਨੂੰ ਗਤੀਸ਼ੀਲ ਤੌਰ 'ਤੇ ਫਿਲਟਰ ਕਰਨ 'ਤੇ ਫੋਕਸ ਕਰਦੀਆਂ ਹਨ, ਜੋ ਉਤਪਾਦ-ਆਧਾਰਿਤ ਵੈੱਬਸਾਈਟਾਂ 'ਤੇ ਉਪਭੋਗਤਾ ਅਨੁਭਵ ਨੂੰ ਵਧਾਉਣ ਲਈ ਜ਼ਰੂਰੀ ਹੈ। ਟੀਚਾ ਉਪਭੋਗਤਾਵਾਂ ਨੂੰ ਕਈ ਸ਼੍ਰੇਣੀਆਂ ਦੀ ਚੋਣ ਕਰਨ ਅਤੇ ਉਸ ਅਨੁਸਾਰ ਕਾਰਡ ਫਿਲਟਰ ਕਰਨ ਦੀ ਆਗਿਆ ਦੇਣਾ ਹੈ। ਇਹ JavaScript ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਬਟਨ ਕਲਿੱਕਾਂ ਨੂੰ ਕੈਪਚਰ ਕਰਕੇ, ਚੁਣੀਆਂ ਗਈਆਂ ਸ਼੍ਰੇਣੀਆਂ ਨੂੰ ਇੱਕ ਐਰੇ ਵਿੱਚ ਸਟੋਰ ਕਰਕੇ, ਅਤੇ ਫਿਰ ਸਿਰਫ਼ ਉਹਨਾਂ ਕਾਰਡਾਂ ਨੂੰ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰਕੇ ਪ੍ਰਾਪਤ ਕੀਤਾ ਜਾਂਦਾ ਹੈ ਜੋ ਸਾਰੀਆਂ ਚੁਣੀਆਂ ਗਈਆਂ ਸ਼੍ਰੇਣੀਆਂ ਨਾਲ ਮੇਲ ਖਾਂਦੇ ਹਨ। ਪ੍ਰਕਿਰਿਆ ਉਦੋਂ ਸ਼ੁਰੂ ਹੁੰਦੀ ਹੈ ਜਦੋਂ ਕੋਈ ਉਪਭੋਗਤਾ ਸ਼੍ਰੇਣੀ ਬਟਨ 'ਤੇ ਕਲਿੱਕ ਕਰਦਾ ਹੈ, ਜੋ ਉਸ ਬਟਨ ਦੀ ਕਿਰਿਆਸ਼ੀਲ ਸਥਿਤੀ ਨੂੰ ਟੌਗਲ ਕਰਦਾ ਹੈ। ਬਟਨ ਦਾ ਮੁੱਲ ਇੱਕ ਐਰੇ ਵਿੱਚ ਸਟੋਰ ਕੀਤਾ ਜਾਂਦਾ ਹੈ, ਜੋ ਸਾਰੇ ਕਿਰਿਆਸ਼ੀਲ ਫਿਲਟਰਾਂ ਨੂੰ ਦਰਸਾਉਂਦਾ ਹੈ।
ਇਸ ਹੱਲ ਦਾ ਇੱਕ ਨਾਜ਼ੁਕ ਹਿੱਸਾ ਐਰੇ ਵਿਧੀ ਦੀ ਵਰਤੋਂ ਕਰ ਰਿਹਾ ਹੈ . ਇਹ ਕਮਾਂਡ ਯਕੀਨੀ ਬਣਾਉਂਦਾ ਹੈ ਕਿ ਸਾਰੀਆਂ ਚੁਣੀਆਂ ਗਈਆਂ ਸ਼੍ਰੇਣੀਆਂ ਦੀ ਤੁਲਨਾ ਕਾਰਡ ਦੀਆਂ ਸ਼੍ਰੇਣੀਆਂ ਨਾਲ ਕੀਤੀ ਜਾਂਦੀ ਹੈ। ਇਹ ਜਾਂਚ ਕਰਦਾ ਹੈ ਕਿ ਕੀ ਹਰੇਕ ਕਿਰਿਆਸ਼ੀਲ ਸ਼੍ਰੇਣੀ ਕਾਰਡ ਦੀਆਂ ਸ਼੍ਰੇਣੀਆਂ ਵਿੱਚ ਪਾਈ ਜਾਂਦੀ ਹੈ, ਇਸ ਤਰ੍ਹਾਂ ਬਹੁ-ਸ਼੍ਰੇਣੀ ਫਿਲਟਰਿੰਗ ਨੂੰ ਸੁਚਾਰੂ ਢੰਗ ਨਾਲ ਕੰਮ ਕਰਨ ਦੀ ਇਜਾਜ਼ਤ ਦਿੰਦਾ ਹੈ। ਇਕ ਹੋਰ ਮਹੱਤਵਪੂਰਨ ਤਰੀਕਾ ਹੈ , ਜੋ ਹਰੇਕ ਕਾਰਡ ਤੋਂ ਸ਼੍ਰੇਣੀਆਂ ਦੀ ਸਟ੍ਰਿੰਗ ਨੂੰ ਇੱਕ ਐਰੇ ਵਿੱਚ ਤੋੜਨ ਲਈ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ। ਇਹ JavaScript ਨੂੰ ਵਿਅਕਤੀਗਤ ਸ਼੍ਰੇਣੀਆਂ ਦੀ ਤੁਲਨਾ ਕਰਨ ਅਤੇ ਇਹ ਨਿਰਧਾਰਤ ਕਰਨ ਲਈ ਸਮਰੱਥ ਬਣਾਉਂਦਾ ਹੈ ਕਿ ਕਿਹੜੇ ਕਾਰਡ ਪ੍ਰਦਰਸ਼ਿਤ ਜਾਂ ਲੁਕਾਏ ਜਾਣੇ ਚਾਹੀਦੇ ਹਨ।
ਇਸ ਦੇ ਨਾਲ, ਸਕ੍ਰਿਪਟ ਵਰਤਦਾ ਹੈ ਕਲਿਕ ਕਰਨ 'ਤੇ ਬਟਨਾਂ 'ਤੇ ਸਰਗਰਮ ਕਲਾਸ ਨੂੰ ਜੋੜਨ ਜਾਂ ਹਟਾਉਣ ਲਈ। ਇਹ ਕਲਾਸ ਵਿਜ਼ੂਅਲ ਫੀਡਬੈਕ ਲਈ ਮਹੱਤਵਪੂਰਨ ਹੈ, ਕਿਉਂਕਿ ਇਹ ਦਰਸਾਉਂਦਾ ਹੈ ਕਿ ਕਿਹੜੇ ਬਟਨ ਵਰਤਮਾਨ ਵਿੱਚ ਕਿਰਿਆਸ਼ੀਲ ਹਨ। ਜਦੋਂ ਇੱਕ ਬਟਨ ਨੂੰ ਅਕਿਰਿਆਸ਼ੀਲ ਕੀਤਾ ਜਾਂਦਾ ਹੈ, ਤਾਂ ਇਸਦੀ ਸ਼੍ਰੇਣੀ ਨੂੰ ਸਰਗਰਮ ਸ਼੍ਰੇਣੀਆਂ ਦੇ ਐਰੇ ਤੋਂ ਹਟਾ ਦਿੱਤਾ ਜਾਂਦਾ ਹੈ, ਅਤੇ ਡਿਸਪਲੇਅ ਨੂੰ ਅੱਪਡੇਟ ਕਰਨ ਲਈ ਫਿਲਟਰਿੰਗ ਫੰਕਸ਼ਨ ਨੂੰ ਦੁਬਾਰਾ ਚਾਲੂ ਕੀਤਾ ਜਾਂਦਾ ਹੈ। ਜਿਹੜੇ ਕਾਰਡ ਸਰਗਰਮ ਸ਼੍ਰੇਣੀਆਂ ਨਾਲ ਮੇਲ ਨਹੀਂ ਖਾਂਦੇ, ਉਹਨਾਂ ਨੂੰ ਅਕਿਰਿਆਸ਼ੀਲ ਵਜੋਂ ਚਿੰਨ੍ਹਿਤ ਕਰਨ ਲਈ ਇੱਕ ਕਲਾਸ ਜੋੜ ਕੇ ਲੁਕਾਇਆ ਜਾਂਦਾ ਹੈ। ਇਹ ਵਿਧੀ ਇਹ ਯਕੀਨੀ ਬਣਾਉਂਦੀ ਹੈ ਕਿ ਉਪਭੋਗਤਾ ਮਲਟੀਪਲ ਫਿਲਟਰਾਂ ਦੀ ਚੋਣ ਜਾਂ ਅਣ-ਚੁਣਿਆ ਕਰਕੇ ਆਪਣੀ ਖੋਜ ਨੂੰ ਆਸਾਨੀ ਨਾਲ ਸੁਧਾਰ ਸਕਦੇ ਹਨ।
ਬੈਕ-ਐਂਡ ਸਕ੍ਰਿਪਟ Node.js ਅਤੇ Express ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ ਸਰਵਰ-ਸਾਈਡ 'ਤੇ ਉਤਪਾਦ ਫਿਲਟਰਿੰਗ ਨੂੰ ਸੰਭਾਲਣ ਲਈ ਸੰਰਚਨਾ ਕੀਤੀ ਗਈ ਹੈ। ਚੁਣੀਆਂ ਗਈਆਂ ਸ਼੍ਰੇਣੀਆਂ ਨੂੰ ਇੱਕ POST ਬੇਨਤੀ ਰਾਹੀਂ ਸਰਵਰ ਨੂੰ ਭੇਜਿਆ ਜਾਂਦਾ ਹੈ, ਅਤੇ ਸਰਵਰ ਉਤਪਾਦਾਂ ਨੂੰ ਫਿਲਟਰ ਕਰਕੇ ਅਤੇ ਸਿਰਫ਼ ਸਰਗਰਮ ਸ਼੍ਰੇਣੀਆਂ ਨਾਲ ਮੇਲ ਖਾਂਦੀਆਂ ਆਈਟਮਾਂ ਨੂੰ ਵਾਪਸ ਕਰਕੇ ਇਸ ਬੇਨਤੀ ਦੀ ਪ੍ਰਕਿਰਿਆ ਕਰਦਾ ਹੈ। ਸਰਵਰ ਫਰੰਟ-ਐਂਡ ਵਾਂਗ ਹੀ ਤਰਕ ਵਰਤਦਾ ਹੈ, ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ ਹਰੇਕ ਉਤਪਾਦ ਦੀਆਂ ਸ਼੍ਰੇਣੀਆਂ ਨਾਲ ਚੁਣੀਆਂ ਗਈਆਂ ਸ਼੍ਰੇਣੀਆਂ ਦੀ ਤੁਲਨਾ ਕਰਨ ਦਾ ਤਰੀਕਾ। ਇਹ ਪਹੁੰਚ ਲਾਭਦਾਇਕ ਹੁੰਦੀ ਹੈ ਜਦੋਂ ਵੱਡੇ ਡੇਟਾਸੈਟਾਂ ਨਾਲ ਨਜਿੱਠਦੇ ਹੋ, ਕਿਉਂਕਿ ਇਹ ਕਲਾਇੰਟ-ਸਾਈਡ ਤੋਂ ਪ੍ਰੋਸੈਸਿੰਗ ਨੂੰ ਆਫਲੋਡ ਕਰਦਾ ਹੈ, ਨਤੀਜੇ ਵਜੋਂ ਅੰਤਮ ਉਪਭੋਗਤਾਵਾਂ ਲਈ ਬਿਹਤਰ ਪ੍ਰਦਰਸ਼ਨ ਹੁੰਦਾ ਹੈ।
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";});}
ਡਾਇਨਾਮਿਕ ਆਈਟਮ ਫਿਲਟਰਿੰਗ ਲਈ ਬੈਕਐਂਡ ਲਾਗੂ ਕਰਨਾ
Node.js ਅਤੇ 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'));
ਵੈੱਬ ਵਿਕਾਸ ਵਿੱਚ ਬਹੁ-ਸ਼੍ਰੇਣੀ ਫਿਲਟਰਿੰਗ ਲਈ ਉੱਨਤ ਤਕਨੀਕਾਂ
ਵਿੱਚ ਇੱਕ ਬਹੁ-ਸ਼੍ਰੇਣੀ ਫਿਲਟਰਿੰਗ ਸਿਸਟਮ ਨੂੰ ਲਾਗੂ ਕਰਦੇ ਸਮੇਂ , ਸਿਰਫ਼ UI ਪਰਸਪਰ ਪ੍ਰਭਾਵ ਨੂੰ ਹੀ ਨਹੀਂ, ਸਗੋਂ ਇਸਦਾ ਸਮਰਥਨ ਕਰਨ ਵਾਲੇ ਡੇਟਾ ਢਾਂਚੇ 'ਤੇ ਵੀ ਵਿਚਾਰ ਕਰਨਾ ਮਹੱਤਵਪੂਰਨ ਹੈ। ਗਤੀਸ਼ੀਲ ਸਮੱਗਰੀ ਦੇ ਸੰਦਰਭ ਵਿੱਚ, ਇੱਕ ਅਨੁਕੂਲਿਤ ਅਤੇ ਸਾਫ਼ ਬਣਾਈ ਰੱਖਣਾ ਹੇਰਾਫੇਰੀ ਰਣਨੀਤੀ ਕੁੰਜੀ ਹੈ. ਉਦਾਹਰਨ ਲਈ, ਤੁਸੀਂ ਇੱਕ ਤੋਂ ਵੱਧ ਸ਼੍ਰੇਣੀ ਦੇ ਬਟਨਾਂ ਨੂੰ ਕੁਸ਼ਲਤਾ ਨਾਲ ਸੰਭਾਲਣ ਲਈ ਇਵੈਂਟ ਡੈਲੀਗੇਸ਼ਨ ਤਕਨੀਕਾਂ ਦੀ ਵਰਤੋਂ ਕਰ ਸਕਦੇ ਹੋ, ਇਹ ਯਕੀਨੀ ਬਣਾਉਣ ਲਈ ਕਿ ਸਿਰਫ਼ ਲੋੜੀਂਦੇ DOM ਤੱਤ ਹੀ ਹੇਰਾਫੇਰੀ ਕੀਤੇ ਗਏ ਹਨ।
ਇੱਕ ਪਹਿਲੂ ਜੋ ਫਿਲਟਰਿੰਗ ਅਨੁਭਵ ਨੂੰ ਹੋਰ ਵਧਾ ਸਕਦਾ ਹੈ, ਸਧਾਰਨ ਬਟਨਾਂ ਦੀ ਬਜਾਏ ਹੋਰ ਵਧੀਆ UI ਤੱਤ, ਜਿਵੇਂ ਕਿ ਚੈਕਬਾਕਸ ਜਾਂ ਮਲਟੀ-ਸਿਲੈਕਟ ਡ੍ਰੌਪਡਾਉਨ ਸ਼ਾਮਲ ਕਰਨਾ ਹੈ। ਇਹ ਉਪਭੋਗਤਾਵਾਂ ਨੂੰ ਫਿਲਟਰਾਂ ਨਾਲ ਵਧੇਰੇ ਬਰੀਕ ਤਰੀਕੇ ਨਾਲ ਇੰਟਰੈਕਟ ਕਰਨ ਦੀ ਆਗਿਆ ਦਿੰਦਾ ਹੈ। ਉਦਾਹਰਨ ਲਈ, ਇੱਕ ਡ੍ਰੌਪਡਾਉਨ ਜੋ ਇੱਕ ਤੋਂ ਵੱਧ ਚੋਣ ਦੀ ਆਗਿਆ ਦਿੰਦਾ ਹੈ, ਸ਼੍ਰੇਣੀਆਂ ਦੀ ਚੋਣ ਕਰਨ ਵੇਲੇ ਉਪਭੋਗਤਾਵਾਂ ਲਈ ਇੱਕ ਸਾਫ਼ UI ਅਤੇ ਵਧੇਰੇ ਲਚਕਤਾ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ। ਇਸ ਨੂੰ ਵਾਧੂ JavaScript ਤਰਕ ਅਤੇ ਸਟਾਈਲਿੰਗ ਨਾਲ ਲਾਗੂ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ, ਜਦੋਂ ਕਿ ਅਜੇ ਵੀ ਐਰੇ ਵਿਧੀਆਂ ਜਿਵੇਂ ਕਿ ਅਤੇ ਸ਼੍ਰੇਣੀ ਦੀ ਤੁਲਨਾ ਲਈ।
ਇੱਕ ਹੋਰ ਮਹੱਤਵਪੂਰਣ ਵਿਚਾਰ ਫਿਲਟਰਿੰਗ ਸਿਸਟਮ ਦੀ ਕਾਰਗੁਜ਼ਾਰੀ ਹੈ, ਖਾਸ ਤੌਰ 'ਤੇ ਜਦੋਂ ਇੱਕ ਵੱਡੇ ਡੇਟਾਸੈਟ ਨਾਲ ਨਜਿੱਠਣਾ ਹੁੰਦਾ ਹੈ। ਜਦੋਂ ਤੁਹਾਡੇ ਕੋਲ ਫਿਲਟਰ ਕਰਨ ਲਈ ਸੈਂਕੜੇ ਜਾਂ ਹਜ਼ਾਰਾਂ ਆਈਟਮਾਂ ਹੁੰਦੀਆਂ ਹਨ, ਤਾਂ ਜਿੰਨਾ ਸੰਭਵ ਹੋ ਸਕੇ DOM ਹੇਰਾਫੇਰੀ ਨੂੰ ਘੱਟ ਤੋਂ ਘੱਟ ਕਰਨਾ ਮਹੱਤਵਪੂਰਨ ਹੁੰਦਾ ਹੈ। ਇਸ ਨੂੰ ਅਨੁਕੂਲ ਬਣਾਉਣ ਦਾ ਇੱਕ ਤਰੀਕਾ ਹੈ DOM ਲਈ ਅੱਪਡੇਟ ਬੈਚ ਕਰਨਾ, ਵਰਤ ਕੇ ਜਾਂ ਅੱਪਡੇਟ ਦੀ ਦਰ ਨੂੰ ਕੰਟਰੋਲ ਕਰਨ ਅਤੇ ਇੱਕ ਨਿਰਵਿਘਨ ਉਪਭੋਗਤਾ ਅਨੁਭਵ ਨੂੰ ਯਕੀਨੀ ਬਣਾਉਣ ਲਈ ਢੰਗ। ਇਹ ਤਕਨੀਕਾਂ ਨਾ ਸਿਰਫ਼ ਪ੍ਰਦਰਸ਼ਨ ਨੂੰ ਬਿਹਤਰ ਬਣਾਉਂਦੀਆਂ ਹਨ ਬਲਕਿ ਪੰਨੇ ਦੀ ਜਵਾਬਦੇਹੀ ਨੂੰ ਵੀ ਵਧਾਉਂਦੀਆਂ ਹਨ, ਇਸ ਨੂੰ ਵੱਡੇ ਡੇਟਾਸੇਟਾਂ ਲਈ ਹੋਰ ਮਾਪਯੋਗ ਬਣਾਉਂਦੀਆਂ ਹਨ।
- ਮੈਂ ਕਈ ਕਿਰਿਆਸ਼ੀਲ ਫਿਲਟਰਾਂ ਨੂੰ ਕਿਵੇਂ ਸੰਭਾਲਾਂ?
- ਤੁਸੀਂ ਇੱਕ ਐਰੇ ਵਿੱਚ ਸਰਗਰਮ ਫਿਲਟਰ ਸਟੋਰ ਕਰ ਸਕਦੇ ਹੋ ਅਤੇ ਵਰਤ ਸਕਦੇ ਹੋ ਇਹ ਜਾਂਚ ਕਰਨ ਲਈ ਕਿ ਕੀ ਹਰੇਕ ਕਾਰਡ ਦੀ ਸ਼੍ਰੇਣੀ ਚੁਣੇ ਗਏ ਫਿਲਟਰਾਂ ਨਾਲ ਮੇਲ ਖਾਂਦੀ ਹੈ।
- ਜੇਕਰ ਮੇਰੇ ਕੋਲ ਓਵਰਲੈਪ ਕਰਨ ਵਾਲੀਆਂ ਸ਼੍ਰੇਣੀਆਂ ਹਨ ਤਾਂ ਕੀ ਹੋਵੇਗਾ?
- ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ ਅਤੇ , ਤੁਸੀਂ ਸ਼੍ਰੇਣੀ ਡੇਟਾ ਨੂੰ ਵੱਖਰਾ ਅਤੇ ਸਾਫ਼ ਕਰ ਸਕਦੇ ਹੋ, ਇਹ ਸੁਨਿਸ਼ਚਿਤ ਕਰਦੇ ਹੋਏ ਕਿ ਹਰੇਕ ਸ਼੍ਰੇਣੀ ਦੀ ਸਰਗਰਮ ਫਿਲਟਰਾਂ ਨਾਲ ਸਹੀ ਢੰਗ ਨਾਲ ਤੁਲਨਾ ਕੀਤੀ ਗਈ ਹੈ।
- ਮੈਂ ਵੱਡੇ ਡੇਟਾਸੇਟਾਂ ਲਈ ਫਿਲਟਰਿੰਗ ਨੂੰ ਕਿਵੇਂ ਅਨੁਕੂਲ ਬਣਾ ਸਕਦਾ ਹਾਂ?
- ਬੈਚ DOM ਅੱਪਡੇਟ ਵਰਤ ਕੇ ਜਾਂ ਲਾਗੂ ਕਰੋ a ਫਿਲਟਰਿੰਗ ਓਪਰੇਸ਼ਨਾਂ ਦੀ ਬਾਰੰਬਾਰਤਾ ਨੂੰ ਘਟਾਉਣ ਲਈ ਫੰਕਸ਼ਨ, ਕਾਰਗੁਜ਼ਾਰੀ ਵਿੱਚ ਸੁਧਾਰ.
- ਮੈਂ ਸਾਰੀਆਂ ਚੁਣੀਆਂ ਸ਼੍ਰੇਣੀਆਂ ਨਾਲ ਮੇਲ ਖਾਂਦੀਆਂ ਚੀਜ਼ਾਂ ਨੂੰ ਕਿਵੇਂ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰਾਂ?
- ਵਰਤੋ ਇਹ ਯਕੀਨੀ ਬਣਾਉਣ ਲਈ ਕਿ ਸਾਰੀਆਂ ਚੁਣੀਆਂ ਗਈਆਂ ਸ਼੍ਰੇਣੀਆਂ ਨੂੰ ਦਿਖਾਈ ਦੇਣ ਤੋਂ ਪਹਿਲਾਂ ਹਰੇਕ ਕਾਰਡ ਦੇ ਡੇਟਾ ਵਿੱਚ ਸ਼ਾਮਲ ਕੀਤਾ ਗਿਆ ਹੈ।
- ਕਾਰਡ ਸਿਸਟਮ ਵਿੱਚ ਟੁੱਟੀਆਂ ਤਸਵੀਰਾਂ ਨੂੰ ਸੰਭਾਲਣ ਦਾ ਸਭ ਤੋਂ ਵਧੀਆ ਤਰੀਕਾ ਕੀ ਹੈ?
- ਲਾਗੂ ਕਰੋ ਜਦੋਂ ਇਹ ਲੋਡ ਕਰਨ ਵਿੱਚ ਅਸਫਲ ਹੋ ਜਾਂਦੀ ਹੈ ਤਾਂ ਚਿੱਤਰ ਨੂੰ ਲੁਕਾਉਣ ਜਾਂ ਬਦਲਣ ਲਈ ਹਰੇਕ ਚਿੱਤਰ 'ਤੇ ਇਵੈਂਟ ਲਿਸਨਰ, ਉਪਭੋਗਤਾ ਅਨੁਭਵ ਨੂੰ ਵਧਾਉਂਦਾ ਹੈ।
ਵੈੱਬ ਪੰਨਿਆਂ ਵਿੱਚ ਬਹੁ-ਸ਼੍ਰੇਣੀ ਫਿਲਟਰਿੰਗ ਨੂੰ ਲਾਗੂ ਕਰਨ ਨਾਲ ਉਪਭੋਗਤਾ ਅਨੁਭਵ ਵਿੱਚ ਮਹੱਤਵਪੂਰਨ ਸੁਧਾਰ ਹੋ ਸਕਦਾ ਹੈ, ਜਿਸ ਨਾਲ ਉਪਭੋਗਤਾਵਾਂ ਲਈ ਉਹਨਾਂ ਨੂੰ ਲੋੜੀਂਦੀ ਚੀਜ਼ ਲੱਭਣਾ ਆਸਾਨ ਹੋ ਜਾਂਦਾ ਹੈ। ਦੀ ਸਾਵਧਾਨੀ ਨਾਲ ਵਰਤੋਂ ਨਾਲ ਢੰਗ ਜਿਵੇਂ ਕਿ ਅਤੇ , ਡਿਵੈਲਪਰ ਇੱਕ ਕੁਸ਼ਲ, ਸਕੇਲੇਬਲ ਹੱਲ ਬਣਾ ਸਕਦੇ ਹਨ ਜੋ ਵੱਡੇ ਡੇਟਾਸੈਟਾਂ ਨੂੰ ਸੁਚਾਰੂ ਢੰਗ ਨਾਲ ਸੰਭਾਲਦਾ ਹੈ।
ਇਸ ਤੋਂ ਇਲਾਵਾ, DOM ਹੇਰਾਫੇਰੀ ਨੂੰ ਅਨੁਕੂਲ ਬਣਾ ਕੇ ਅਤੇ ਬੇਲੋੜੀ ਕਾਰਵਾਈਆਂ ਨੂੰ ਘਟਾ ਕੇ, ਇਹ ਪਹੁੰਚ ਉੱਚ ਉਪਭੋਗਤਾ ਇੰਟਰੈਕਸ਼ਨ ਦੇ ਨਾਲ ਵੀ ਪ੍ਰਦਰਸ਼ਨ ਨੂੰ ਯਕੀਨੀ ਬਣਾਉਂਦਾ ਹੈ। ਇਸ ਫਿਲਟਰਿੰਗ ਸਿਸਟਮ ਨੂੰ ਈ-ਕਾਮਰਸ ਵੈੱਬਸਾਈਟਾਂ, ਪੋਰਟਫੋਲੀਓਜ਼, ਜਾਂ ਕਿਸੇ ਵੀ ਪੰਨੇ ਵਿੱਚ ਜੋੜਿਆ ਜਾ ਸਕਦਾ ਹੈ ਜਿਸ ਲਈ ਮਲਟੀਪਲ ਫਿਲਟਰਾਂ ਦੇ ਆਧਾਰ 'ਤੇ ਗਤੀਸ਼ੀਲ ਸਮੱਗਰੀ ਡਿਸਪਲੇ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ।
- ਇਸ ਲੇਖ ਵਿਚਲੀ ਸਮੱਗਰੀ ਅਤੇ ਕੋਡ ਉਦਾਹਰਨਾਂ ਅਲੇਨਾ ਚੁਯਾਨਕੋਵਾ ਦੁਆਰਾ ਕੋਡਪੇਨ ਉਦਾਹਰਨ ਤੋਂ ਪ੍ਰੇਰਿਤ ਸਨ। ਤੁਸੀਂ ਇੱਥੇ ਮੂਲ ਕੋਡ ਦੀ ਪੜਚੋਲ ਕਰ ਸਕਦੇ ਹੋ: ਅਲੇਨਾ ਦਾ ਕੋਡਪੇਨ .
- JavaScript ਐਰੇ ਵਿਧੀਆਂ ਅਤੇ ਇਵੈਂਟ ਹੈਂਡਲਿੰਗ 'ਤੇ ਅਤਿਰਿਕਤ ਸੰਕਲਪਾਂ ਨੂੰ ਅਧਿਕਾਰਤ ਮੋਜ਼ੀਲਾ ਡਿਵੈਲਪਰ ਨੈੱਟਵਰਕ ਦਸਤਾਵੇਜ਼ਾਂ ਤੋਂ ਹਵਾਲਾ ਦਿੱਤਾ ਗਿਆ ਸੀ, ਇੱਥੇ ਪਹੁੰਚਯੋਗ: MDN ਵੈੱਬ ਡੌਕਸ .
- JavaScript ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ DOM ਹੇਰਾਫੇਰੀ ਅਤੇ ਪ੍ਰਦਰਸ਼ਨ ਨੂੰ ਅਨੁਕੂਲ ਬਣਾਉਣ ਬਾਰੇ ਹੋਰ ਜਾਣਕਾਰੀ ਲਈ, ਮੈਂ ਸਮੈਸ਼ਿੰਗ ਮੈਗਜ਼ੀਨ ਤੋਂ ਇਸ ਵਿਆਪਕ ਗਾਈਡ ਦਾ ਹਵਾਲਾ ਦਿੱਤਾ: ਕੁਸ਼ਲ DOM ਨੂੰ ਸਮਝਣਾ .