à¨µà¨°à¨¤à¨£ à¨¦à¨¾ à¨à© à¨«à¨¾à¨à¨¦à¨¾ à¨¹à© querySelectorAll?

ਇੱਕ ਸਾਫ਼ ਅਤੇ ਕੁਸ਼ਲ

Gerald Girard

ਬੁੱਧਵਾਰ, 9 ਅਕਤੂਬਰ 2024 4:47:54 ਬਾ.ਦੁ.

ਤੁਹਾਡੇ ਲੈਂਡਿੰਗ ਪੰਨੇ ਮੀਨੂ ਇੰਟਰੈਕਸ਼ਨ ਨੂੰ ਸਟ੍ਰੀਮਲਾਈਨ ਕਰਨਾ

ਇੱਕ ਲੈਂਡਿੰਗ ਪੰਨਾ ਬਣਾਉਣ ਵਿੱਚ ਬਹੁਤ ਸਾਰੇ ਵੇਰਵੇ ਸ਼ਾਮਲ ਹੋ ਸਕਦੇ ਹਨ, ਅਤੇ ਸਭ ਤੋਂ ਮਹੱਤਵਪੂਰਨ ਪਹਿਲੂਆਂ ਵਿੱਚੋਂ ਇੱਕ ਇੱਕ ਨਿਰਵਿਘਨ ਉਪਭੋਗਤਾ ਅਨੁਭਵ ਪ੍ਰਦਾਨ ਕਰਨਾ ਹੈ। ਜੇਕਰ ਤੁਸੀਂ ਇੱਕ ਜਵਾਬਦੇਹ ਮੀਨੂ ਨਾਲ ਕੰਮ ਕਰ ਰਹੇ ਹੋ, ਤਾਂ ਇੱਕ ਵਿਕਲਪ ਚੁਣੇ ਜਾਣ 'ਤੇ ਇਸਨੂੰ ਆਪਣੇ ਆਪ ਬੰਦ ਕਰਨਾ ਬਿਹਤਰ ਉਪਯੋਗਤਾ ਲਈ ਮਹੱਤਵਪੂਰਨ ਹੈ।

ਜਦੋਂ ਕੋਈ ਉਪਭੋਗਤਾ ਮੀਨੂ ਆਈਟਮ 'ਤੇ ਕਲਿਕ ਕਰਦਾ ਹੈ ਤਾਂ ਤੁਸੀਂ ਬੰਦ ਹੋਣ ਵਾਲੀ ਕਾਰਵਾਈ ਨੂੰ ਸੰਭਾਲਣ ਲਈ ਪਹਿਲਾਂ ਹੀ ਕੁਝ JavaScript ਲਿਖ ਚੁੱਕੇ ਹੋ ਸਕਦੇ ਹੋ। ਹਾਲਾਂਕਿ ਇਹ ਕੰਮ ਕਰਦਾ ਹੈ, ਅਕਸਰ ਕੋਡ ਨੂੰ ਸਾਫ਼ ਅਤੇ ਵਧੇਰੇ ਕੁਸ਼ਲ ਬਣਾਉਣ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ। ਦੁਹਰਾਇਆ ਗਿਆ ਕੋਡ ਬਰਕਰਾਰ ਰੱਖਣ ਲਈ ਔਖਾ ਹੋ ਸਕਦਾ ਹੈ ਅਤੇ ਗਲਤੀਆਂ ਦਾ ਸ਼ਿਕਾਰ ਹੋ ਸਕਦਾ ਹੈ।

ਇਸ ਲੇਖ ਵਿੱਚ, ਅਸੀਂ ਇੱਕ ਦ੍ਰਿਸ਼ ਦੇਖਾਂਗੇ ਜਿੱਥੇ ਤੁਹਾਡੇ ਕੋਲ ਇੱਕ ਤੋਂ ਵੱਧ ਮੀਨੂ ਆਈਟਮਾਂ ਹਨ ਜੋ ਕਲਿੱਕ ਕਰਨ 'ਤੇ ਮੀਨੂ ਨੂੰ ਬੰਦ ਕਰ ਦਿੰਦੀਆਂ ਹਨ। ਮੌਜੂਦਾ ਕੋਡ ਕੰਮ ਕਰਦਾ ਹੈ ਪਰ ਦੁਹਰਾਉਣ ਵਾਲੇ ਪੈਟਰਨ ਸ਼ਾਮਲ ਕਰਦਾ ਹੈ। ਇਸ ਦੁਹਰਾਓ ਨੂੰ ਇੱਕ ਹੋਰ ਸ਼ਾਨਦਾਰ JavaScript ਹੱਲ ਨਾਲ ਸਰਲ ਬਣਾਇਆ ਜਾ ਸਕਦਾ ਹੈ।

ਆਉ ਪੜਚੋਲ ਕਰੀਏ ਕਿ ਤੁਸੀਂ ਬਿਹਤਰ ਅਭਿਆਸਾਂ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਇਸ ਕੋਡ ਨੂੰ ਕਲੀਨਰ ਕਿਵੇਂ ਬਣਾ ਸਕਦੇ ਹੋ, ਜਿਵੇਂ ਕਿ ਸਮਾਨ ਤੱਤਾਂ ਦੁਆਰਾ ਲੂਪ ਕਰਨਾ ਜਾਂ ਇਵੈਂਟ ਡੈਲੀਗੇਸ਼ਨ ਦਾ ਲਾਭ ਲੈਣਾ। ਇਹ ਪਹੁੰਚ ਪੜ੍ਹਨਯੋਗਤਾ ਅਤੇ ਪ੍ਰਦਰਸ਼ਨ ਦੋਵਾਂ ਨੂੰ ਵਧਾਏਗੀ।

ਹੁਕਮ	ਵਰਤੋਂ ਦੀ ਉਦਾਹਰਨ
querySelectorAll()	ਇਹ ਕਮਾਂਡ ਉਹਨਾਂ ਸਾਰੇ ਤੱਤਾਂ ਨੂੰ ਚੁਣਨ ਲਈ ਵਰਤੀ ਜਾਂਦੀ ਹੈ ਜੋ ਇੱਕ ਖਾਸ ਚੋਣਕਾਰ ਨਾਲ ਮੇਲ ਖਾਂਦੇ ਹਨ। ਇਸ ਸਥਿਤੀ ਵਿੱਚ, ਇਹ .nav-ਸੂਚੀ ਦੇ ਅੰਦਰ ਸਾਰੇ ਐਂਕਰ () ਟੈਗਸ ਨੂੰ ਮੁੜ ਪ੍ਰਾਪਤ ਕਰਦਾ ਹੈ, ਜਿਸ ਨਾਲ ਅਸੀਂ ਹਰੇਕ ਆਈਟਮ ਵਿੱਚ ਇਵੈਂਟ ਸਰੋਤਿਆਂ ਨੂੰ ਵੱਖਰੇ ਤੌਰ 'ਤੇ ਜੋੜ ਸਕਦੇ ਹਾਂ।
forEach()	ਨੋਡਲਿਸਟਸ ਜਾਂ ਐਰੇ ਉੱਤੇ ਦੁਹਰਾਉਣ ਲਈ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ। ਇਸ ਸਕ੍ਰਿਪਟ ਵਿੱਚ, forEach() ਸਾਨੂੰ ਹਰੇਕ ਚੁਣੀ ਹੋਈ ਮੀਨੂ ਆਈਟਮ ਨੂੰ ਲੂਪ ਕਰਨ ਅਤੇ ਮੀਨੂ ਨੂੰ ਬੰਦ ਕਰਨ ਲਈ ਇੱਕ ਕਲਿੱਕ ਇਵੈਂਟ ਨੂੰ ਜੋੜਨ ਦੀ ਇਜਾਜ਼ਤ ਦਿੰਦਾ ਹੈ।
addEventListener()	ਇਹ ਕਮਾਂਡ ਇੱਕ ਐਲੀਮੈਂਟ ਨਾਲ ਇਵੈਂਟ ਹੈਂਡਲਰ ਨੂੰ ਜੋੜਨ ਲਈ ਵਰਤੀ ਜਾਂਦੀ ਹੈ। ਇੱਥੇ, ਇਹ ਮੇਨੂ ਆਈਟਮਾਂ ਦੇ ਨਾਲ ਇੱਕ 'ਕਲਿੱਕ' ਇਵੈਂਟ ਨੂੰ ਜੋੜਦਾ ਹੈ ਤਾਂ ਕਿ ਜਦੋਂ ਉਹਨਾਂ 'ਤੇ ਕਲਿੱਕ ਕੀਤਾ ਜਾਂਦਾ ਹੈ, ਤਾਂ ਸ਼ੋਅ-ਮੇਨੂ ਕਲਾਸ ਨੂੰ ਹਟਾ ਕੇ ਮੀਨੂ ਬੰਦ ਹੋ ਜਾਂਦਾ ਹੈ।
remove()	ਇਹ ਵਿਧੀ ਕਿਸੇ ਐਲੀਮੈਂਟ ਤੋਂ ਇੱਕ ਖਾਸ ਕਲਾਸ ਨੂੰ ਹਟਾਉਣ ਲਈ ਵਰਤੀ ਜਾਂਦੀ ਹੈ। ਇਸ ਸਥਿਤੀ ਵਿੱਚ, .nav-ਲਿਸਟ ਐਲੀਮੈਂਟ ਤੋਂ ਸ਼ੋਅ-ਮੇਨੂ ਕਲਾਸ ਨੂੰ ਹਟਾ ਕੇ ਨੇਵੀਗੇਸ਼ਨ ਮੀਨੂ ਨੂੰ ਲੁਕਾਉਣ ਲਈ remove('show-menu') ਨੂੰ ਕਿਹਾ ਜਾਂਦਾ ਹੈ।
try...catch	ਕੋਡ ਵਿੱਚ ਅਪਵਾਦਾਂ ਅਤੇ ਤਰੁੱਟੀਆਂ ਨੂੰ ਸੰਭਾਲਣ ਲਈ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ। ਇਹ ਯਕੀਨੀ ਬਣਾਉਂਦਾ ਹੈ ਕਿ ਜੇਕਰ ਸਕ੍ਰਿਪਟ ਐਗਜ਼ੀਕਿਊਸ਼ਨ ਦੌਰਾਨ ਮੀਨੂ ਐਲੀਮੈਂਟਸ ਨਹੀਂ ਮਿਲੇ ਹਨ ਜਾਂ ਜੇਕਰ ਕੋਈ ਸਮੱਸਿਆ ਪੈਦਾ ਹੁੰਦੀ ਹੈ, ਤਾਂ ਫੰਕਸ਼ਨੈਲਿਟੀ ਨੂੰ ਤੋੜਨ ਤੋਂ ਰੋਕਣ ਲਈ ਗਲਤੀ ਨੂੰ ਫੜਿਆ ਅਤੇ ਲੌਗ ਕੀਤਾ ਗਿਆ ਹੈ।
console.error()	ਇਹ ਕਮਾਂਡ ਬਰਾਊਜ਼ਰ ਦੇ ਕੰਸੋਲ 'ਤੇ ਗਲਤੀ ਸੁਨੇਹਿਆਂ ਨੂੰ ਲੌਗ ਕਰਦੀ ਹੈ। ਇਹ ਕਲੋਜ਼ਮੇਨੂ() ਫੰਕਸ਼ਨ ਦੇ ਐਗਜ਼ੀਕਿਊਸ਼ਨ ਦੌਰਾਨ ਹੋਣ ਵਾਲੀਆਂ ਕਿਸੇ ਵੀ ਤਰੁੱਟੀਆਂ ਨੂੰ ਦਿਖਾਉਣ ਲਈ ਕੈਚ ਬਲਾਕ ਦੇ ਅੰਦਰ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ।
tagName	ਇਹ ਵਿਸ਼ੇਸ਼ਤਾ DOM ਵਿੱਚ ਇੱਕ ਤੱਤ ਦੇ ਟੈਗ ਨਾਮ ਦੀ ਜਾਂਚ ਕਰਨ ਲਈ ਵਰਤੀ ਜਾਂਦੀ ਹੈ। ਸਕ੍ਰਿਪਟ ਵਿੱਚ, ਇਸਦੀ ਵਰਤੋਂ ਇਵੈਂਟ ਡੈਲੀਗੇਸ਼ਨ ਵਿੱਚ ਇਹ ਯਕੀਨੀ ਬਣਾਉਣ ਲਈ ਕੀਤੀ ਜਾਂਦੀ ਹੈ ਕਿ ਕਲਿੱਕ ਕੀਤੇ ਜਾਣ 'ਤੇ ਸਿਰਫ਼ ਐਂਕਰ ਟੈਗ () ਹੀ ਮੀਨੂ ਬੰਦ ਹੋਣ ਨੂੰ ਟਰਿੱਗਰ ਕਰਦੇ ਹਨ।
contains()	ਕਲਾਸਲਿਸਟ API ਦਾ ਹਿੱਸਾ, ਰੱਖਦਾ ਹੈ() ਜਾਂਚ ਕਰਦਾ ਹੈ ਕਿ ਕੀ ਇੱਕ ਐਲੀਮੈਂਟ ਦੀ ਕਲਾਸ ਸੂਚੀ ਵਿੱਚ ਕੋਈ ਕਲਾਸ ਮੌਜੂਦ ਹੈ। ਯੂਨਿਟ ਟੈਸਟ ਉਦਾਹਰਨ ਵਿੱਚ, ਇਹ ਪੁਸ਼ਟੀ ਕਰਦਾ ਹੈ ਕਿ ਮੇਨੂ ਆਈਟਮ ਨੂੰ ਕਲਿੱਕ ਕਰਨ ਤੋਂ ਬਾਅਦ ਸ਼ੋਅ-ਮੀਨੂ ਕਲਾਸ ਹਟਾ ਦਿੱਤੀ ਗਈ ਹੈ ਜਾਂ ਨਹੀਂ।
click()	ਇਹ ਕਮਾਂਡ ਕਿਸੇ ਐਲੀਮੈਂਟ 'ਤੇ ਯੂਜ਼ਰ ਕਲਿੱਕ ਦੀ ਨਕਲ ਕਰਦੀ ਹੈ। ਇਹ ਯੂਨਿਟ ਟੈਸਟ ਵਿੱਚ ਇੱਕ ਮੀਨੂ ਆਈਟਮ 'ਤੇ ਇੱਕ ਕਲਿਕ ਇਵੈਂਟ ਨੂੰ ਪ੍ਰੋਗ੍ਰਾਮਿਕ ਤੌਰ 'ਤੇ ਟਰਿੱਗਰ ਕਰਨ ਅਤੇ ਇਹ ਪ੍ਰਮਾਣਿਤ ਕਰਨ ਲਈ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ ਕਿ ਮੀਨੂ ਉਮੀਦ ਅਨੁਸਾਰ ਬੰਦ ਹੁੰਦਾ ਹੈ।

JavaScript ਨਾਲ ਮੀਨੂ ਕਾਰਜਕੁਸ਼ਲਤਾ ਨੂੰ ਵਧਾਉਣਾ

ਸਾਡੇ ਦੁਆਰਾ ਖੋਜੀਆਂ ਗਈਆਂ ਸਕ੍ਰਿਪਟਾਂ ਦਾ ਮੁੱਖ ਟੀਚਾ ਲੈਂਡਿੰਗ ਪੰਨੇ ਵਿੱਚ ਨੈਵੀਗੇਸ਼ਨ ਮੀਨੂ ਦੇ ਵਿਵਹਾਰ ਨੂੰ ਸਰਲ ਬਣਾਉਣਾ ਅਤੇ ਵਧਾਉਣਾ ਹੈ। ਸ਼ੁਰੂ ਵਿੱਚ, ਹੱਲ ਵਿੱਚ ਹਰੇਕ ਮੀਨੂ ਆਈਟਮ ਲਈ ਕੋਡ ਦੁਹਰਾਉਣਾ ਸ਼ਾਮਲ ਸੀ, ਪਰ ਇਸ ਨਾਲ ਬੇਲੋੜੀ ਦੁਹਰਾਓ ਅਤੇ ਅਕੁਸ਼ਲ ਕੋਡ ਹੋ ਗਿਆ। ਕਲੀਨਰ, ਵਧੇਰੇ ਕੁਸ਼ਲ ਹੱਲ ਜਾਵਾ ਸਕ੍ਰਿਪਟ ਦੀ ਸਮਾਨ ਤੱਤਾਂ ਨੂੰ ਲੂਪ ਕਰਨ ਦੀ ਯੋਗਤਾ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਨ ਜਾਂ ਮੀਨੂ ਇੰਟਰੈਕਸ਼ਨਾਂ ਨੂੰ ਚੁਸਤ ਤਰੀਕੇ ਨਾਲ ਸੰਭਾਲਣ ਲਈ ਇਵੈਂਟ ਡੈਲੀਗੇਸ਼ਨ ਨੂੰ ਲਾਗੂ ਕਰਦੇ ਹਨ। ਦੀ ਵਰਤੋਂ ਕਰਕੇ querySelectorAll ਵਿਧੀ, ਅਸੀਂ ਸਾਰੀਆਂ ਸੰਬੰਧਿਤ ਮੇਨੂ ਆਈਟਮਾਂ ਦੀ ਚੋਣ ਕਰ ਸਕਦੇ ਹਾਂ ਅਤੇ ਰਿਡੰਡੈਂਸੀ ਨੂੰ ਘਟਾ ਸਕਦੇ ਹਾਂ।

ਸਾਡੇ ਦੁਆਰਾ ਲਾਗੂ ਕੀਤੇ ਗਏ ਪਹਿਲੇ ਅਨੁਕੂਲਨ ਵਿੱਚੋਂ ਇੱਕ ਦੀ ਵਰਤੋਂ ਕੀਤੀ ਜਾ ਰਹੀ ਸੀ ਹਰੇਕ ਲਈ ਸਾਰੀਆਂ ਮੀਨੂ ਆਈਟਮਾਂ ਨੂੰ ਦੁਹਰਾਉਣ ਲਈ ਅਤੇ ਹਰ ਇੱਕ ਨਾਲ ਇੱਕ ਕਲਿੱਕ ਇਵੈਂਟ ਲਿਸਨਰ ਨੂੰ ਨੱਥੀ ਕਰੋ। ਇਹ ਕਿਸੇ ਵੀ ਆਈਟਮ 'ਤੇ ਕਲਿੱਕ ਕਰਨ 'ਤੇ ਮੀਨੂ ਨੂੰ ਬੰਦ ਕਰਨ ਦੀ ਆਗਿਆ ਦਿੰਦਾ ਹੈ। ਲੂਪ ਦੁਹਰਾਉਣ ਵਾਲੇ ਇਵੈਂਟ ਹੈਂਡਲਰ ਨੂੰ ਇੱਕ ਸਿੰਗਲ ਮੁੜ ਵਰਤੋਂ ਯੋਗ ਲੂਪ ਨਾਲ ਬਦਲ ਕੇ ਪਿਛਲੀ ਪਹੁੰਚ ਨੂੰ ਸਰਲ ਬਣਾਉਂਦਾ ਹੈ। ਇਹ ਕੋਡ ਨੂੰ ਬਣਾਈ ਰੱਖਣਾ ਆਸਾਨ ਬਣਾਉਂਦਾ ਹੈ ਅਤੇ ਗਲਤੀਆਂ ਦੇ ਜੋਖਮ ਨੂੰ ਘਟਾਉਂਦਾ ਹੈ। ਇਹ ਇਹ ਵੀ ਯਕੀਨੀ ਬਣਾਉਂਦਾ ਹੈ ਕਿ ਭਵਿੱਖ ਦੇ ਮੀਨੂ ਆਈਟਮਾਂ ਨੂੰ ਬਿਨਾਂ ਕਿਸੇ ਵਾਧੂ ਕੋਡ ਦੇ ਬਦਲਾਅ ਦੇ ਆਸਾਨੀ ਨਾਲ ਜੋੜਿਆ ਜਾ ਸਕਦਾ ਹੈ, ਸਕੇਲੇਬਿਲਟੀ ਵਿੱਚ ਸੁਧਾਰ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ।

ਅਨੁਕੂਲਿਤ ਸਕ੍ਰਿਪਟਾਂ ਵਿੱਚ ਵਰਤਿਆ ਜਾਣ ਵਾਲਾ ਇੱਕ ਹੋਰ ਮਹੱਤਵਪੂਰਨ ਤਰੀਕਾ ਹੈ ਘਟਨਾ ਪ੍ਰਤੀਨਿਧੀ ਮੰਡਲ. ਹਰੇਕ ਵਿਅਕਤੀਗਤ ਮੀਨੂ ਆਈਟਮ ਨਾਲ ਇੱਕ ਇਵੈਂਟ ਲਿਸਨਰ ਨੂੰ ਜੋੜਨ ਦੀ ਬਜਾਏ, ਅਸੀਂ ਸਰੋਤੇ ਨੂੰ ਮੂਲ ਕੰਟੇਨਰ ਨਾਲ ਜੋੜਿਆ, nav-ਸੂਚੀ. ਇਸ ਤਰੀਕੇ ਨਾਲ, ਕਿਸੇ ਚਾਈਲਡ ਐਲੀਮੈਂਟ (ਜਿਵੇਂ ਕਿ ਮੀਨੂ ਆਈਟਮ) 'ਤੇ ਕਿਸੇ ਵੀ ਕਲਿੱਕ ਇਵੈਂਟ ਦਾ ਪਤਾ ਲਗਾਇਆ ਜਾਂਦਾ ਹੈ ਅਤੇ ਮਾਤਾ-ਪਿਤਾ ਦੁਆਰਾ ਉਚਿਤ ਢੰਗ ਨਾਲ ਸੰਭਾਲਿਆ ਜਾਂਦਾ ਹੈ। ਇਹ ਪਹੁੰਚ ਵਧੇਰੇ ਕੁਸ਼ਲ ਹੈ ਕਿਉਂਕਿ ਇਹ ਇਵੈਂਟ ਸਰੋਤਿਆਂ ਦੀ ਗਿਣਤੀ ਨੂੰ ਘੱਟ ਕਰਦਾ ਹੈ ਜਿਨ੍ਹਾਂ ਨੂੰ ਬਣਾਉਣ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ, ਪੰਨੇ ਦੀ ਕਾਰਗੁਜ਼ਾਰੀ ਨੂੰ ਵਧਾਉਂਦਾ ਹੈ, ਖਾਸ ਕਰਕੇ ਜਦੋਂ ਵੱਡੀ ਗਿਣਤੀ ਵਿੱਚ ਤੱਤਾਂ ਨਾਲ ਨਜਿੱਠਣਾ ਹੁੰਦਾ ਹੈ।

ਅਸੀਂ ਵਰਤਦੇ ਹੋਏ ਗਲਤੀ ਨਾਲ ਨਜਿੱਠਣ ਨੂੰ ਵੀ ਲਾਗੂ ਕੀਤਾ ਹੈ ਕੋਸ਼ਿਸ਼ ਕਰੋ...ਫੜੋ ਬਲਾਕ. ਇਹ ਯਕੀਨੀ ਬਣਾਉਂਦਾ ਹੈ ਕਿ ਕੋਈ ਵੀ ਸੰਭਾਵੀ ਸਮੱਸਿਆਵਾਂ, ਜਿਵੇਂ ਕਿ DOM ਵਿੱਚ ਗੁੰਮ ਹੋਏ ਤੱਤ, ਨੂੰ ਮੀਨੂ ਦੀ ਕਾਰਜਸ਼ੀਲਤਾ ਨੂੰ ਤੋੜੇ ਬਿਨਾਂ ਫੜਿਆ ਅਤੇ ਲੌਗ ਕੀਤਾ ਜਾਂਦਾ ਹੈ। ਇਹ ਪਹੁੰਚ ਵਿੱਚ ਸੁਧਾਰ ਕਰਦਾ ਹੈ ਮਜ਼ਬੂਤੀ ਦੀ ਸਕ੍ਰਿਪਟ ਅਤੇ ਡੀਬੱਗਿੰਗ ਵਿੱਚ ਮਦਦ ਕਰਦਾ ਹੈ ਜੇਕਰ ਚੀਜ਼ਾਂ ਗਲਤ ਹੋ ਜਾਂਦੀਆਂ ਹਨ। ਕੁੱਲ ਮਿਲਾ ਕੇ, ਸਕ੍ਰਿਪਟ ਵਿੱਚ ਸੁਧਾਰਾਂ ਦਾ ਨਤੀਜਾ ਇੱਕ ਵਧੇਰੇ ਮਾਡਯੂਲਰ, ਮੁੜ ਵਰਤੋਂ ਯੋਗ, ਅਤੇ ਕੁਸ਼ਲ ਹੱਲ ਹੁੰਦਾ ਹੈ, ਕੋਡ ਦੁਹਰਾਉਣ ਨੂੰ ਘਟਾਉਂਦਾ ਹੈ ਅਤੇ ਰੱਖ-ਰਖਾਅ ਨੂੰ ਵਧਾਉਂਦਾ ਹੈ।

ਕਲੀਨਰ ਅਤੇ ਕੁਸ਼ਲ JavaScript ਮੀਨੂ ਇੰਟਰਐਕਸ਼ਨ

ਕੋਡ ਦੁਹਰਾਓ ਨੂੰ ਸਰਲ ਬਣਾਉਣ ਅਤੇ ਪ੍ਰਦਰਸ਼ਨ ਨੂੰ ਬਿਹਤਰ ਬਣਾਉਣ ਲਈ ਇਵੈਂਟ ਡੈਲੀਗੇਸ਼ਨ ਦੇ ਨਾਲ ਵਨੀਲਾ JavaScript ਦੀ ਵਰਤੋਂ ਕਰਨਾ।

// Select the parent container holding all menu items
const navList = document.querySelector('.nav-list');

// Add an event listener to the parent using event delegation
navList.addEventListener('click', (event) => {
  if (event.target.tagName === 'A') {
    // Close the menu when any link is clicked
    navList.classList.remove('show-menu');
  }
});

ਮੁੜ ਵਰਤੋਂ ਯੋਗ ਕਾਰਜਸ਼ੀਲਤਾ ਲਈ JavaScript ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ ਅਨੁਕੂਲਿਤ ਹੱਲ

ਇਹ ਪਹੁੰਚ ਸਾਰੀਆਂ ਮੀਨੂ ਆਈਟਮਾਂ ਨੂੰ ਦੁਹਰਾਉਣ ਲਈ ਇੱਕ ਲੂਪ ਦੀ ਵਰਤੋਂ ਕਰਦੀ ਹੈ, ਇਵੈਂਟ ਡੈਲੀਗੇਸ਼ਨ ਤੋਂ ਬਿਨਾਂ ਕੋਡ ਦੀ ਮੁੜ ਵਰਤੋਂਯੋਗਤਾ ਨੂੰ ਯਕੀਨੀ ਬਣਾਉਂਦਾ ਹੈ।

// Select all menu items
const menuItems = document.querySelectorAll('.nav-list a');

// Loop through each menu item
menuItems.forEach(item => {
  item.addEventListener('click', () => {
    // Close the menu on click
    navList.classList.remove('show-menu');
  });
});

ਗਲਤੀ ਹੈਂਡਲਿੰਗ ਦੇ ਨਾਲ ਮਾਡਯੂਲਰ ਅਤੇ ਮੁੜ ਵਰਤੋਂ ਯੋਗ JavaScript

ਇਹ ਹੱਲ ਇੱਕ ਮਾਡਿਊਲਰ ਤਰੀਕੇ ਨਾਲ ਬਣਾਇਆ ਗਿਆ ਹੈ, ਇੱਕ ਮੁੜ ਵਰਤੋਂ ਯੋਗ ਫੰਕਸ਼ਨ ਦੇ ਅੰਦਰ ਕਾਰਜਕੁਸ਼ਲਤਾ ਨੂੰ ਸ਼ਾਮਲ ਕਰਦਾ ਹੈ ਅਤੇ ਗਲਤੀ ਨਾਲ ਨਜਿੱਠਣਾ ਵੀ ਸ਼ਾਮਲ ਹੈ।

// Function to handle menu closure
function closeMenu() {
  try {
    const navList = document.querySelector('.nav-list');
    const menuItems = document.querySelectorAll('.nav-list a');

    if (!navList || !menuItems) {
      throw new Error('Menu elements not found');
    }

    menuItems.forEach(item => {
      item.addEventListener('click', () => {
        navList.classList.remove('show-menu');
      });
    });

  } catch (error) {
    console.error('Error in menu handling:', error);
  }
}

// Call the function
closeMenu();

ਮੀਨੂ ਇੰਟਰੈਕਸ਼ਨ ਲਈ ਯੂਨਿਟ ਟੈਸਟ

ਇਹ ਯਕੀਨੀ ਬਣਾਉਣ ਲਈ ਮੀਨੂ ਪਰਸਪਰ ਕ੍ਰਿਆ ਦੀ ਜਾਂਚ ਕਰ ਰਿਹਾ ਹੈ ਕਿ ਇਹ ਹਰੇਕ ਆਈਟਮ 'ਤੇ ਕਲਿੱਕ ਕਰਨ 'ਤੇ ਸਹੀ ਢੰਗ ਨਾਲ ਬੰਦ ਹੁੰਦਾ ਹੈ।

// Sample unit test using Jest
test('Menu closes on item click', () => {
  document.body.innerHTML = `
    <ul class="nav-list show-menu">`
    <li><a href="#" class="Item">Link1</a></li>`
    <li><a href="#" class="Item">Link2</a></li>`
    </ul>`;

  closeMenu(); // Initialize the event listeners

  const link = document.querySelector('.Item');
  link.click(); // Simulate a click

  expect(document.querySelector('.nav-list').classList.contains('show-menu')).toBe(false);
});

ਮੀਨੂ ਇੰਟਰਐਕਸ਼ਨ ਲਈ ਜਾਵਾ ਸਕ੍ਰਿਪਟ ਨੂੰ ਰਿਫਾਇਨਿੰਗ: ਬੇਸਿਕ ਲਾਗੂ ਕਰਨ ਤੋਂ ਪਰੇ

ਇੱਕ ਜਵਾਬਦੇਹ ਲੈਂਡਿੰਗ ਪੰਨਾ ਬਣਾਉਣ ਵੇਲੇ, ਇੱਕ ਮੁੱਖ ਪਹਿਲੂ ਉਪਭੋਗਤਾਵਾਂ ਲਈ ਇੱਕ ਸਹਿਜ ਨੈਵੀਗੇਸ਼ਨ ਅਨੁਭਵ ਨੂੰ ਯਕੀਨੀ ਬਣਾ ਰਿਹਾ ਹੈ. ਇਸ ਅਨੁਭਵ ਨੂੰ ਬਿਹਤਰ ਬਣਾਉਣ ਦਾ ਇੱਕ ਤਰੀਕਾ ਕੋਡ ਦੁਹਰਾਓ ਨੂੰ ਘਟਾ ਕੇ ਹੈ। ਹਰੇਕ ਮੀਨੂ ਆਈਟਮ ਨਾਲ ਈਵੈਂਟ ਸਰੋਤਿਆਂ ਨੂੰ ਹੱਥੀਂ ਜੋੜਨ ਦੀ ਬਜਾਏ, ਡਿਵੈਲਪਰ ਉੱਨਤ ਤਕਨੀਕਾਂ ਦੀ ਪੜਚੋਲ ਕਰ ਸਕਦੇ ਹਨ ਜਿਵੇਂ ਕਿ ਘਟਨਾ ਪ੍ਰਤੀਨਿਧੀ ਮੰਡਲ. ਇਹ ਇੱਕ ਪੇਰੈਂਟ ਐਲੀਮੈਂਟ 'ਤੇ ਇੱਕ ਸਿੰਗਲ ਇਵੈਂਟ ਲਿਸਨਰ ਨੂੰ ਕਈ ਚਾਈਲਡ ਐਲੀਮੈਂਟਸ ਨੂੰ ਸੰਭਾਲਣ ਦੀ ਇਜਾਜ਼ਤ ਦਿੰਦਾ ਹੈ, ਪ੍ਰਕਿਰਿਆ ਨੂੰ ਸੁਚਾਰੂ ਬਣਾਉਂਦਾ ਹੈ। ਇਸ ਤੋਂ ਇਲਾਵਾ, ਮਾਡਿਊਲਰ ਫੰਕਸ਼ਨਾਂ ਦਾ ਲਾਭ ਲੈਣਾ ਯਕੀਨੀ ਬਣਾਉਂਦਾ ਹੈ ਕਿ ਤੁਹਾਡੇ ਕੋਡ ਨੂੰ ਭਵਿੱਖ ਵਿੱਚ ਬਣਾਈ ਰੱਖਣਾ ਅਤੇ ਵਿਸਤਾਰ ਕਰਨਾ ਆਸਾਨ ਹੈ।

ਵਿਚਾਰਨ ਯੋਗ ਇਕ ਹੋਰ ਪਹਿਲੂ ਹੈ ਪ੍ਰਦਰਸ਼ਨ ਅਨੁਕੂਲਨ. ਵੱਡੇ ਪੈਮਾਨੇ ਦੀਆਂ ਵੈਬ ਐਪਲੀਕੇਸ਼ਨਾਂ ਅਕਸਰ ਕਈ ਇਵੈਂਟਾਂ ਨਾਲ ਨਜਿੱਠਦੀਆਂ ਹਨ, ਅਤੇ ਬਹੁਤ ਸਾਰੇ ਇਵੈਂਟ ਸਰੋਤਿਆਂ ਦੇ ਨਾਲ DOM ਨੂੰ ਓਵਰਲੋਡ ਕਰਨ ਨਾਲ ਸਾਈਟ ਨੂੰ ਦੇਰੀ ਜਾਂ ਹੌਲੀ ਹੋ ਸਕਦੀ ਹੈ। ਵਰਗੀਆਂ ਕੁਸ਼ਲ ਤਕਨੀਕਾਂ ਦੀ ਵਰਤੋਂ ਕਰਕੇ querySelectorAll ਇੱਕ ਵਾਰ ਵਿੱਚ ਸਾਰੇ ਸੰਬੰਧਿਤ ਤੱਤਾਂ ਨੂੰ ਫੜਨ ਲਈ, ਅਤੇ ਫਿਰ ਵਰਤ ਕੇ forEach ਦੁਹਰਾਉਣ ਲਈ, ਤੁਸੀਂ ਆਪਣੀ ਸਕ੍ਰਿਪਟ ਦੀ ਕਾਰਗੁਜ਼ਾਰੀ ਅਤੇ ਮਾਪਯੋਗਤਾ ਦੋਵਾਂ ਵਿੱਚ ਸੁਧਾਰ ਕਰਦੇ ਹੋ। ਮੋਬਾਈਲ-ਪਹਿਲੇ ਜਵਾਬਦੇਹ ਡਿਜ਼ਾਈਨਾਂ ਨਾਲ ਨਜਿੱਠਣ ਵੇਲੇ ਇਹ ਅਨੁਕੂਲਤਾ ਵਿਸ਼ੇਸ਼ ਤੌਰ 'ਤੇ ਮਹੱਤਵਪੂਰਨ ਬਣ ਜਾਂਦੀ ਹੈ, ਜਿੱਥੇ ਗਤੀ ਅਤੇ ਕੁਸ਼ਲਤਾ ਸਭ ਤੋਂ ਮਹੱਤਵਪੂਰਨ ਹੁੰਦੀ ਹੈ।

ਇੱਕ ਕਦਮ ਹੋਰ ਅੱਗੇ ਜਾਣ ਲਈ, ਨਾਲ ਪੇਸ਼ ਕੀਤਾ ਜਾ ਰਿਹਾ ਹੈ ਗਲਤੀ ਹੈਂਡਲਿੰਗ try...catch ਮਜ਼ਬੂਤੀ ਵਿੱਚ ਸੁਧਾਰ ਕਰਦਾ ਹੈ. ਇਹ ਅਚਾਨਕ ਅਸਫਲਤਾਵਾਂ ਨੂੰ ਰੋਕਣ ਅਤੇ ਇਹ ਯਕੀਨੀ ਬਣਾਉਣ ਲਈ ਮਹੱਤਵਪੂਰਨ ਹੈ ਕਿ ਉਪਭੋਗਤਾ ਇੰਟਰੈਕਸ਼ਨਾਂ ਨੂੰ ਸ਼ਾਨਦਾਰ ਢੰਗ ਨਾਲ ਸੰਭਾਲਿਆ ਜਾਂਦਾ ਹੈ। ਜੇਕਰ ਇੱਕ ਮੀਨੂ ਆਈਟਮ ਗੁੰਮ ਹੈ, ਜਾਂ ਜੇਕਰ DOM ਗਤੀਸ਼ੀਲ ਤੌਰ 'ਤੇ ਬਦਲਦਾ ਹੈ, ਤਾਂ ਇਹ ਗਲਤੀ-ਪ੍ਰਬੰਧਨ ਵਿਧੀ ਕਾਰਜਕੁਸ਼ਲਤਾ ਨੂੰ ਤੋੜੇ ਬਿਨਾਂ ਸਮੱਸਿਆਵਾਂ ਨੂੰ ਫੜਦੀ ਅਤੇ ਲੌਗ ਕਰਦੀ ਹੈ। ਇਹਨਾਂ ਸਭ ਤੋਂ ਵਧੀਆ ਅਭਿਆਸਾਂ ਨੂੰ ਲਾਗੂ ਕਰਨ ਨਾਲ ਉਪਭੋਗਤਾ ਅਨੁਭਵ ਅਤੇ ਸਾਈਟ ਦੀ ਸਾਂਭ-ਸੰਭਾਲ ਦੋਵਾਂ ਵਿੱਚ ਬਹੁਤ ਸੁਧਾਰ ਹੋ ਸਕਦਾ ਹੈ।

JavaScript ਮੀਨੂ ਓਪਟੀਮਾਈਜੇਸ਼ਨ ਬਾਰੇ ਆਮ ਤੌਰ 'ਤੇ ਪੁੱਛੇ ਜਾਂਦੇ ਸਵਾਲ

JavaScript ਵਿੱਚ ਇਵੈਂਟ ਡੈਲੀਗੇਸ਼ਨ ਕਿਵੇਂ ਕੰਮ ਕਰਦਾ ਹੈ?
ਇਵੈਂਟ ਡੈਲੀਗੇਸ਼ਨ ਤੁਹਾਨੂੰ ਇੱਕ ਸਿੰਗਲ ਜੋੜਨ ਦੀ ਇਜਾਜ਼ਤ ਦਿੰਦਾ ਹੈ addEventListener ਇੱਕ ਮਾਤਾ-ਪਿਤਾ ਤੱਤ ਨੂੰ ਜੋ ਇਸਦੇ ਬਾਲ ਤੱਤਾਂ ਤੋਂ ਘਟਨਾਵਾਂ ਨੂੰ ਸੰਭਾਲ ਸਕਦਾ ਹੈ। ਇਹ ਹਰੇਕ ਬੱਚੇ ਨੂੰ ਵੱਖਰੇ ਤੌਰ 'ਤੇ ਸਰੋਤਿਆਂ ਨੂੰ ਜੋੜਨ ਦੀ ਲੋੜ ਤੋਂ ਬਚਦਾ ਹੈ।
ਵਰਤਣ ਦਾ ਕੀ ਫਾਇਦਾ ਹੈ querySelectorAll?
querySelectorAll ਤੁਹਾਨੂੰ ਇੱਕ ਵਾਰ ਵਿੱਚ ਇੱਕ CSS ਚੋਣਕਾਰ ਨਾਲ ਮੇਲ ਖਾਂਦੇ ਸਾਰੇ ਤੱਤ ਚੁਣਨ ਦੀ ਇਜਾਜ਼ਤ ਦਿੰਦਾ ਹੈ, ਜਿਸ ਨਾਲ ਮੀਨੂ ਆਈਟਮਾਂ ਵਰਗੇ ਤੱਤਾਂ ਦੇ ਸਮੂਹਾਂ ਨਾਲ ਨਜਿੱਠਣ ਵੇਲੇ ਇਸਨੂੰ ਵਧੇਰੇ ਕੁਸ਼ਲ ਬਣਾਉਂਦਾ ਹੈ।
ਮੈਨੂੰ ਇੱਕ ਲੂਪ ਦੀ ਵਰਤੋਂ ਕਿਉਂ ਕਰਨੀ ਚਾਹੀਦੀ ਹੈ forEach ਮੇਨੂ ਆਈਟਮਾਂ ਨਾਲ?
forEach ਤੁਹਾਨੂੰ ਹਰੇਕ ਮੀਨੂ ਆਈਟਮ ਨੂੰ ਦੁਹਰਾਉਣ ਅਤੇ ਉਹੀ ਕਾਰਵਾਈ ਲਾਗੂ ਕਰਨ ਦਿੰਦਾ ਹੈ, ਜਿਵੇਂ ਕਿ ਇਵੈਂਟ ਸਰੋਤਿਆਂ ਨੂੰ ਸ਼ਾਮਲ ਕਰਨਾ, ਹਰੇਕ ਆਈਟਮ ਲਈ ਕੋਡ ਨੂੰ ਹੱਥੀਂ ਦੁਹਰਾਉਣ ਤੋਂ ਬਿਨਾਂ।
ਕੀ ਕਰਦਾ ਹੈ classList.remove() ਮੇਨੂ ਸੰਦਰਭ ਵਿੱਚ ਕਰਦੇ ਹਨ?
classList.remove() ਇੱਕ ਐਲੀਮੈਂਟ ਤੋਂ ਇੱਕ ਖਾਸ ਕਲਾਸ (ਜਿਵੇਂ ਕਿ ਸ਼ੋਅ-ਮੇਨੂ) ਨੂੰ ਹਟਾਉਂਦਾ ਹੈ, ਜੋ ਇਸ ਸਥਿਤੀ ਵਿੱਚ ਨੈਵੀਗੇਸ਼ਨ ਮੀਨੂ ਨੂੰ ਬੰਦ ਕਰ ਦਿੰਦਾ ਹੈ ਜਦੋਂ ਇੱਕ ਆਈਟਮ ਨੂੰ ਕਲਿੱਕ ਕੀਤਾ ਜਾਂਦਾ ਹੈ।
ਗਲਤੀ ਨੂੰ ਸੰਭਾਲਣ ਨਾਲ ਮੇਰੇ JavaScript ਕੋਡ ਨੂੰ ਕਿਵੇਂ ਸੁਧਾਰਿਆ ਜਾ ਸਕਦਾ ਹੈ?
ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ try...catch ਤੁਹਾਨੂੰ ਤੁਹਾਡੇ ਕੋਡ ਵਿੱਚ ਸੰਭਾਵੀ ਤਰੁੱਟੀਆਂ ਦਾ ਪ੍ਰਬੰਧਨ ਕਰਨ ਦੀ ਇਜਾਜ਼ਤ ਦਿੰਦਾ ਹੈ। ਇਸ ਤਰ੍ਹਾਂ, ਜੇਕਰ ਕੋਈ ਤੱਤ ਗੁੰਮ ਹੈ ਜਾਂ ਕੁਝ ਅਸਫਲ ਹੋ ਜਾਂਦਾ ਹੈ, ਤਾਂ ਸਾਰੀ ਸਕ੍ਰਿਪਟ ਨੂੰ ਤੋੜੇ ਬਿਨਾਂ ਗਲਤੀ ਫੜੀ ਜਾਂਦੀ ਹੈ ਅਤੇ ਲੌਗ ਕੀਤੀ ਜਾਂਦੀ ਹੈ।

JavaScript ਦੁਹਰਾਓ ਨੂੰ ਸਰਲ ਬਣਾਉਣ ਬਾਰੇ ਅੰਤਿਮ ਵਿਚਾਰ

ਦੁਹਰਾਉਣ ਵਾਲੇ ਕੋਡ ਨੂੰ ਹਟਾ ਕੇ JavaScript ਨੂੰ ਅਨੁਕੂਲ ਬਣਾਉਣਾ ਸਾਂਭ-ਸੰਭਾਲ ਅਤੇ ਪ੍ਰਦਰਸ਼ਨ ਨੂੰ ਵਧਾਉਂਦਾ ਹੈ। ਇਵੈਂਟ ਡੈਲੀਗੇਸ਼ਨ, ਕੁਸ਼ਲ DOM ਹੇਰਾਫੇਰੀ, ਅਤੇ ਮਜ਼ਬੂਤ ਐਰਰ ਹੈਂਡਲਿੰਗ ਵਰਗੀਆਂ ਤਕਨੀਕਾਂ ਕੋਡ ਨੂੰ ਪ੍ਰਬੰਧਨ ਅਤੇ ਭਵਿੱਖ ਦੀਆਂ ਲੋੜਾਂ ਲਈ ਅਨੁਕੂਲ ਬਣਾਉਂਦੀਆਂ ਹਨ।

ਇਹਨਾਂ ਸੁਧਾਰਾਂ ਨੂੰ ਲਾਗੂ ਕਰਕੇ, ਤੁਸੀਂ ਯਕੀਨੀ ਬਣਾਉਂਦੇ ਹੋ ਕਿ ਤੁਹਾਡੇ ਲੈਂਡਿੰਗ ਪੰਨੇ ਦਾ ਮੀਨੂ ਸਾਰੇ ਡਿਵਾਈਸਾਂ ਵਿੱਚ ਸੁਚਾਰੂ ਢੰਗ ਨਾਲ ਕੰਮ ਕਰਦਾ ਹੈ। ਮਾਡਯੂਲਰ ਕੋਡ ਵਧੇਰੇ ਮਾਪਯੋਗ ਅਤੇ ਅਨੁਕੂਲ ਹੈ, ਇੱਕ ਬਿਹਤਰ ਉਪਭੋਗਤਾ ਅਨੁਭਵ ਬਣਾਉਂਦਾ ਹੈ ਅਤੇ ਭਵਿੱਖ ਦੇ ਅਪਡੇਟਾਂ ਵਿੱਚ ਬੱਗ ਅਤੇ ਗਲਤੀਆਂ ਦੀ ਸੰਭਾਵਨਾ ਨੂੰ ਘਟਾਉਂਦਾ ਹੈ।

JavaScript ਓਪਟੀਮਾਈਜੇਸ਼ਨ ਲਈ ਹਵਾਲੇ ਅਤੇ ਸਰੋਤ

ਘਟਾਉਣ ਲਈ ਵਧੀਆ ਅਭਿਆਸਾਂ ਬਾਰੇ ਵੇਰਵੇ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ JavaScript ਦੁਹਰਾਓ ਅਤੇ ਕਾਰਗੁਜ਼ਾਰੀ ਵਿੱਚ ਸੁਧਾਰ: MDN ਵੈੱਬ ਡੌਕਸ - JavaScript ਇਵੈਂਟਸ
JavaScript ਵਿੱਚ ਕੁਸ਼ਲ DOM ਹੇਰਾਫੇਰੀ ਤਕਨੀਕਾਂ ਅਤੇ ਇਵੈਂਟ ਹੈਂਡਲਿੰਗ 'ਤੇ ਸਰੋਤ: JavaScript.info - ਇਵੈਂਟ ਡੈਲੀਗੇਸ਼ਨ
JavaScript ਦੀ ਵਿਆਪਕ ਵਿਆਖਿਆ ਕੋਸ਼ਿਸ਼ ਕਰੋ...ਫੜੋ ਵੈੱਬ ਵਿਕਾਸ ਵਿੱਚ ਤਰੁੱਟੀ ਸੰਭਾਲਣ ਲਈ: MDN ਵੈੱਬ ਡੌਕਸ - ਕੋਸ਼ਿਸ਼ ਕਰੋ...ਕੈਚ ਕਰੋ

ਇੱਕ ਸਾਫ਼ ਅਤੇ ਕੁਸ਼ਲ ਮੀਨੂ ਸਿਸਟਮ ਲਈ JavaScript ਨੂੰ ਅਨੁਕੂਲ ਬਣਾਉਣਾ