Back to Question Center
0

ਮੋਰੀ ਨਾਲ ਅਗਾਊਂ ਡਾਟਾ ਅਤੇ ਕਾਰਜਸ਼ੀਲ ਜਾਵਾਸਕ੍ਰਿਪਟ            ਮੋਰੀ ਨਾਲ ਅਗਾਊਂ ਡਾਟਾ ਅਤੇ ਕਾਰਜਸ਼ੀਲ ਜਾਵਾਸਕ੍ਰਿਪਟ ਵਿਸ਼ੇ: npmTools & ਲਾਇਬ੍ਰੇਰੀਆਂAPIsRaw ਮਿਡਲ

1 answers:
ਮੋਰੀ ਨਾਲ ਅਗਾਊਂ ਡਾਟਾ ਅਤੇ ਕਾਰਜਸ਼ੀਲ ਜਾਵਾਸਕ੍ਰਿਪਟ

ਇਸ ਲੇਖ ਵਿਚ ਸਹਿਕਰਮੀ ਕਰੀਗ ਬਿਲਨਰ ਅਤੇ ਅਡ੍ਰਿਯਨ ਸੰਦੂ ਦੁਆਰਾ ਸਮੀਖਿਆ ਕੀਤੀ ਗਈ ਸੀ. ਸਮਾਲਟ ਸਮਗਰੀ ਲਈ ਸਮਾਲਟ ਦੇ ਸਾਰੇ ਸਮਾਰਕਾਂ ਦਾ ਧੰਨਵਾਦ ਸਭ ਤੋਂ ਵਧੀਆ ਇਹ ਹੋ ਸਕਦਾ ਹੈ!

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

ਹਾਲਾਂਕਿ ਸਿਮਟ ਨੇ ਹਮੇਸ਼ਾਂ ਕੁਝ ਫੰਕਸ਼ਨਲ ਪ੍ਰੋਗਰਾਮਾਂ ਦੀਆਂ ਤਕਨੀਕਾਂ ਦਾ ਸਮਰਥਨ ਕੀਤਾ ਹੈ, ਪਰ ਉਹ ਸਿਰਫ ਪਿਛਲੇ ਕੁਝ ਸਾਲਾਂ ਵਿੱਚ ਹੀ ਪ੍ਰਚੱਲਤ ਹੋ ਗਏ ਹਨ ਅਤੇ ਰਵਾਇਤੀ ਰੂਪ ਵਿੱਚ ਅਸਮਰਥਤਾਪੂਰਨ ਡਾਟੇ ਲਈ ਕੋਈ ਮੂਲ ਸਹਿਯੋਗ ਨਹੀਂ ਹੋਇਆ ਹੈ - wohnung einlagern. ਸਿਮਟਲ ਅਜੇ ਵੀ ਦੋਨਾਂ ਬਾਰੇ ਬਹੁਤ ਕੁਝ ਸਿੱਖ ਰਿਹਾ ਹੈ ਅਤੇ ਸਭ ਤੋਂ ਵਧੀਆ ਵਿਚਾਰ ਉਨ੍ਹਾਂ ਭਾਸ਼ਾਵਾਂ ਤੋਂ ਆ ਰਹੇ ਹਨ ਜਿਨ੍ਹਾਂ ਨੇ ਪਹਿਲਾਂ ਹੀ ਇਹਨਾਂ ਤਕਨੀਕਾਂ ਦੀ ਕੋਸ਼ਿਸ਼ ਕੀਤੀ ਹੈ ਅਤੇ ਪਰਖਿਆ ਹੈ.

ਪਰੋਗਰਾਮਿੰਗ ਦੁਨੀਆ ਦੇ ਇਕ ਹੋਰ ਕੋਨੇ ਵਿਚ, ਕਲੋਜਰੇਅਰ ਇੱਕ ਕਾਰਜਕਾਰੀ ਪ੍ਰੋਗ੍ਰਾਮਿੰਗ ਭਾਸ਼ਾ ਹੈ ਜੋ ਅਸਲੀ ਸਾਦਗੀ ਲਈ ਸਮਰਪਿਤ ਹੈ, ਖਾਸ ਕਰਕੇ ਜਿੱਥੇ ਡਾਟਾ ਢਾਂਚਿਆਂ ਦਾ ਸੰਬੰਧ ਹੈ. ਮੋਰਿ ਇੱਕ ਲਾਇਬਰੇਰੀ ਹੈ ਜੋ ਸਾਨੂੰ ਜਾਅਲੀ ਸਕਰਿਪਟ ਦੇ ਲਗਾਤਾਰ ਡਾਟਾ ਢਾਂਚਿਆਂ ਦਾ ਸਿੱਧਾ ਇਸਤੇਮਾਲ ਕਰਨ ਲਈ ਸਹਾਇਕ ਹੈ.

ਇਹ ਲੇਖ ਇਨ੍ਹਾਂ ਡਾਟਾ ਢਾਂਚਿਆਂ ਦੇ ਡਿਜ਼ਾਇਨ ਦੇ ਪਿਛੋਕੜ ਦੀ ਘੋਖ ਕਰੇਗਾ ਅਤੇ ਸਾਡੇ ਕਾਰਜਾਂ ਨੂੰ ਸੁਧਾਰਨ ਲਈ ਉਹਨਾਂ ਦੀ ਵਰਤੋਂ ਕਰਨ ਲਈ ਕੁਝ ਪੈਟਰਨਾਂ ਦਾ ਮੁਆਇਨਾ ਕਰੇਗਾ. ਅਸੀਂ ਇਸ ਬਾਰੇ ਵੀ ਸੋਚ ਸਕਦੇ ਹਾਂ ਕਿ JavaScript ਡਿਵੈਲਪਰਾਂ ਲਈ ਕਲੌਯਾਰਿਊਟ ਜਾਂ ਕਲੋਯੋਰਸਿਰਪਟ ਨਾਲ ਪ੍ਰੋਗਰਾਮਿੰਗ ਵਿੱਚ ਦਿਲਚਸਪੀ ਰੱਖਣ ਵਾਲਾ ਪਹਿਲਾ ਕਦਮ ਹੈ.

ਸਥਾਈ ਡੇਟਾ ਕੀ ਹੈ?

ਕਲੋਜੇਟ ਸਥਿਰ ਮੁੱਲ, ਜੋ ਬਦਲਿਆ ਨਹੀਂ ਜਾ ਸਕਦਾ ਅਤੇ ਅਸਥਿਰ ਮੁੱਲਾਂ ਵਿਚਕਾਰ ਪਰਿਵਰਤਨ ਕਰਦਾ ਹੈ, ਜੋ ਪਰਿਵਰਤਨਾਂ ਦੇ ਵਿਚਕਾਰ ਸਥਾਈ ਜੀਵਨ ਕਾਲਾਂ ਹਨ. ਲਗਾਤਾਰ ਡਾਟਾ ਢਾਂਚਿਆਂ ਨੂੰ ਸੰਸ਼ੋਧਿਤ ਕਰਨ ਦੀਆਂ ਕੋਸ਼ਿਸ਼ਾਂ ਦੁਆਰਾ ਪਰਿਵਰਤਿਤ ਬਦਲਾਅ ਦੇ ਨਾਲ ਇੱਕ ਨਵੇਂ ਢਾਂਚੇ ਨੂੰ ਵਾਪਸ ਕਰ ਕੇ ਅੰਡਰਲਾਈੰਗ ਡੇਟਾ ਨੂੰ ਬਦਲਣ ਤੋਂ ਪਰਹੇਜ਼ ਕਰਦੀਆਂ ਹਨ.

ਇਹ ਇਹ ਦੇਖਣ ਵਿਚ ਮਦਦ ਕਰ ਸਕਦਾ ਹੈ ਕਿ ਇਹ ਭਿੰਨਤਾ ਇਕ ਸਿਧਾਂਤਕ ਪ੍ਰੋਗ੍ਰਾਮਿੰਗ ਭਾਸ਼ਾ ਵਿਚ ਕਿਵੇਂ ਦਿਖਾਈ ਦੇਵੇਗੀ.

     // ਆਰਜ਼ੀ ਸੂਚੀa = [1, 2, 3];b = a ਪੁਸ਼  
;// a = [1, 2, 3, 4]// b = [1, 2, 3, 4]// ਸਥਿਰ ਸੂਚੀc = # [1, 2, 3]d = c. ਪੁਸ਼
;// c = # [1, 2, 3]// d = # [1, 2, 3, 4]

ਅਸੀਂ ਵੇਖ ਸਕਦੇ ਹਾਂ ਕਿ ਅਸਥਾਈ ਸੂਚੀ ਨੂੰ ਮਿਊਟੇਟ ਕੀਤਾ ਗਿਆ ਸੀ, ਜਦੋਂ ਅਸੀਂ ਇਸ ਤੇ ਵੈਲਯੂ ਪਾਉਂਦੇ ਹਾਂ. ਦੋਨੋ ਇੱਕ ਅਤੇ b ਉਸੇ ਹੀ ਅਸਥਿਰ ਮੁੱਲ ਨੂੰ ਪੁਆਇੰਟ. ਇਸਦੇ ਉਲਟ, ਲਗਾਤਾਰ ਸੂਚੀ ਵਿੱਚ ਬੁਲਾਉਂਦਿਆਂ ਇੱਕ ਨਵਾਂ ਮੁੱਲ ਵਾਪਸ ਲਿਆ ਗਿਆ ਹੈ ਅਤੇ ਅਸੀਂ ਵੇਖ ਸਕਦੇ ਹਾਂ ਕਿ ਸੀ ਅਤੇ ਡੀ ਪੁਆਇੰਟਸ ਨੂੰ ਵੱਖਰੇ ਸੂਚੀਆਂ ਤੋਂ ਵੱਖ.

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

ਵਧੇਰੇ ਸੌਖਾ, ਅਸਮਰਥ ਡਾਟਾ ਸਾਨੂੰ ਹੋਰ ਕਾਰਜ ਕੋਡ ਲਿਖਣ ਲਈ ਮਜਬੂਰ ਕਰਦਾ ਹੈ.

ਮੋਰੀ ਕੀ ਹੈ?

ਮੋਰਿ ਕੋਲੋਯੋਰਸ ਦੀ ਸਟੈਂਡਰਡ ਲਾਇਬਰੇਰੀ ਵਿਚ ਸਮੋਲਟ ਲਈ ਡਾਟਾ ਸਟਰੱਕਚਰਜ਼ ਲਈ ਲਾਗੂ ਕਰਨ ਲਈ ਕਲੋਜਰਸਿਰਫਟ ਕੰਪਾਈਲਰ ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ. ਕੰਪਾਈਲਰ ਅਨੁਕੂਲ ਕੋਡ ਨਿਕਲਦਾ ਹੈ, ਜਿਸਦਾ ਮਤਲਬ ਹੈ ਕਿ ਬਿਨਾਂ ਕਿਸੇ ਵਾਧੂ ਸੋਚ ਦੇ, ਸਮਾਲਟ ਤੋਂ ਕੰਪਾਇਲ ਕੀਤੀ ਕਲੋਜਰੇ ਨਾਲ ਸੰਚਾਰ ਕਰਨਾ ਆਸਾਨ ਨਹੀਂ ਹੈ. ਮੋਰੀ ਵਧੀਕ ਵਿਚਾਰ ਦੀ ਪਰਤ ਹੈ.

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

     // ਮਿਆਰੀ ਲਾਇਬਰੇਰੀਅਰੇ (1, 2, 3). ਇਹ ਲਗਾਤਾਰ ਡਾਟਾ ਢਾਂਚਿਆਂ ਨੂੰ ਨਿਯਮਤ ਅੰਤਰਾਲਾਂ ਜਿੰਨੇ ਕੁ ਕਾਰਗਰ ਹੋਣ ਦੇ ਯੋਗ ਬਣਾਉਂਦਾ ਹੈ. ਇਹਨਾਂ ਧਾਰਨਾਵਾਂ ਲਈ ਲਾਗੂਕਰਣ ਇਸ ਵੀਡੀਓ ਵਿੱਚ ਹੋਰ ਵਿਸਥਾਰ ਵਿੱਚ ਸ਼ਾਮਲ ਕੀਤੇ ਗਏ ਹਨ.  

ਇਹ ਲਾਭਦਾਇਕ ਕਿਉਂ ਹੈ?

ਸ਼ੁਰੂ ਕਰਨ ਲਈ, ਮੰਨ ਲੈਣਾ ਚਾਹੀਦਾ ਹੈ ਕਿ ਅਸੀਂ ਇੱਕ ਵਿਜੇਾ ਕੋਡਬੇਸ ਵਿੱਚ ਬੱਗ ਨੂੰ ਟਰੈਕ ਕਰਨ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰ ਰਹੇ ਹਾਂ ਜੋ ਅਸੀਂ ਵਿਰਾਸਤ ਵਿਚ ਪ੍ਰਾਪਤ ਕੀਤਾ ਹੈ. ਅਸੀਂ ਇਹ ਸਮਝਣ ਦੀ ਕੋਸ਼ਿਸ ਕਰ ਰਹੇ ਹਾਂ ਕਿ ਅਸੀਂ ਫੈਲੋਸ਼ਿਪ ਦੇ ਗਲਤ ਮੁੱਲ ਨਾਲ ਕਿਉਂ ਖਤਮ ਕੀਤਾ ਹੈ.

     ਕੰਨ ਫਲੋਸਿਸ਼ = [{ਸਿਰਲੇਖ: 'ਮੋਰੀ',ਜਾਤੀ: 'ਹੋਬਿਟ'},{ਸਿਰਲੇਖ: 'ਪੋਪਿਨ',ਜਾਤੀ: 'ਹੋਬਿਟ'}];deletePerson (ਫੈਲੋਸ਼ਿਪ, 1);ਕੰਸੋਲ ਲੌਗ (ਫੈਲੋਸ਼ਿਪ);    

ਫੈਲੋਸ਼ਿਪ ਦਾ ਮੁੱਲ ਕੀ ਹੈ ਜਦੋਂ ਇਹ ਕਨਸੋਲ ਲਈ ਲੌਗ ਹੋਵੇ?

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

ਹੋਰ ਵੀ ਬੁਰਾ, ਇਹ ਫੰਕਸ਼ਨ ਇੱਕ ਹਵਾਲੇ ਨੂੰ ਰੋਕ ਸਕਦਾ ਹੈ ਅਤੇ ਭਵਿੱਖ ਵਿੱਚ ਅਸਥਾਈ ਤੌਰ ਤੇ ਇਸ ਨੂੰ ਬਦਲ ਸਕਦਾ ਹੈ. ਫੈਲੋਸ਼ਿਪ ਦੇ ਸਾਰੇ ਹਵਾਲੇ ਇੱਥੋਂ ਅੱਗੇ ਤੋਂ ਇੱਕ ਅਣਹੋਣੀ ਮੁੱਲ ਦੇ ਨਾਲ ਕੰਮ ਕਰਨ ਜਾ ਰਹੇ ਹਨ.

ਮੋਰੀ ਦੇ ਵਿਕਲਪ ਨਾਲ ਇਸ ਦੀ ਤੁਲਨਾ ਕਰੋ

     'ਮੋਰੀ' ਤੋਂ ਆਯਾਤ ਕਰੋ {ਵੈਕਟਰ, ਹੈਸ਼ ਮੈਪ};const ਫੈਲੋਸ਼ਿਪ = ਵੈਕਟਰ (ਹੈਸ਼ਮੈਪ ("ਨਾਮ", "ਮੋਰੀ","ਰੇਸ", "ਹੋਬਿਟ"),ਹੈਸ਼ਮੈਪ ("ਨਾਮ", "ਪੋਪਿਨ","ਰੇਸ", "ਹੋਬਿਟ"))const newFellowship = deletePerson (ਫੈਲੋਸ਼ਿਪ, 1);ਕੰਸੋਲ ਲੌਗ (ਫੈਲੋਸ਼ਿਪ);    

ਡਿਲੀਵਰਪਰਸਨ ਦੇ ਲਾਗੂ ਕਰਨ ਦੇ ਬਾਵਜੂਦ, ਅਸੀਂ ਜਾਣਦੇ ਹਾਂ ਕਿ ਅਸਲੀ ਵੈਕਟਰ ਲੌਗ ਕੀਤਾ ਜਾਵੇਗਾ, ਬਸ ਇਸ ਲਈ ਕਿਉਂਕਿ ਇਸ ਦੀ ਗਾਰੰਟੀ ਹੈ ਕਿ ਇਸਨੂੰ ਪਰਿਵਰਤਿਤ ਨਹੀਂ ਕੀਤਾ ਜਾ ਸਕਦਾ. ਜੇ ਅਸੀਂ ਚਾਹੁੰਦੇ ਹਾਂ ਕਿ ਫੰਕਸ਼ਨ ਉਪਯੋਗੀ ਹੋਵੇ, ਤਾਂ ਇਸ ਨੂੰ ਇਕ ਨਵਾਂ ਵੈਕਟਰ ਵਾਪਸ ਕਰਨਾ ਚਾਹੀਦਾ ਹੈ ਜਿਸ ਨਾਲ ਹਟਾਇਆ ਗਿਆ ਇਕ ਖਾਸ ਆਈਟਮ

ਅਸਥਿਰ ਡੇਟਾ ਤੇ ਕੰਮ ਕਰਨ ਵਾਲੇ ਕਾਰਜਾਂ ਰਾਹੀਂ ਸਮਲ ਵਹਾਓ ਆਸਾਨ ਹੁੰਦਾ ਹੈ, ਕਿਉਂਕਿ ਅਸੀਂ ਜਾਣਦੇ ਹਾਂ ਕਿ ਉਨ੍ਹਾਂ ਦਾ ਇਕੋ ਇਕ ਪ੍ਰਭਾਵ ਵੱਖਰੇ ਅਸਥਿਰ ਮੁੱਲ ਪ੍ਰਾਪਤ ਕਰਨਾ ਅਤੇ ਵਾਪਸ ਕਰਨਾ ਹੋਵੇਗਾ.

ਮੋਰੀ ਨਾਲ ਅਗਾਊਂ ਡਾਟਾ ਅਤੇ ਕਾਰਜਸ਼ੀਲ ਜਾਵਾਸਕ੍ਰਿਪਟਮੋਰੀ ਨਾਲ ਅਗਾਊਂ ਡਾਟਾ ਅਤੇ ਕਾਰਜਸ਼ੀਲ ਜਾਵਾਸਕ੍ਰਿਪਟ ਵਿਸ਼ੇ:
npmTools ਅਤੇ ਲਾਇਬਰੇਰੀਆਂ APIsRaw ਮਿਡਲ

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

ਮੋਰੀ ਨਾਲ ਅਗਾਊਂ ਡਾਟਾ ਅਤੇ ਕਾਰਜਸ਼ੀਲ ਜਾਵਾਸਕ੍ਰਿਪਟਮੋਰੀ ਨਾਲ ਅਗਾਊਂ ਡਾਟਾ ਅਤੇ ਕਾਰਜਸ਼ੀਲ ਜਾਵਾਸਕ੍ਰਿਪਟ ਵਿਸ਼ੇ:
npmTools ਅਤੇ ਲਾਇਬਰੇਰੀਆਂ APIsRaw ਮਿਡਲ

ਵਧੇਰੇ ਸੌਖਾ, ਅਸਥਿਰ ਡੇਟਾ ਅਨੁਮਾਨ ਲਗਾਉਣ ਦੀ ਇੱਕ ਸੱਭਿਆਚਾਰ ਨੂੰ ਲਾਗੂ ਕਰਦਾ ਹੈ .

ਪ੍ਰੈਕਟਿਸ ਵਿਚ

ਅਸੀਂ ਇਸ ਗੱਲ ਵੱਲ ਧਿਆਨ ਦੇ ਰਹੇ ਹਾਂ ਕਿ ਅਸੀਂ ਮੌਰੀ ਨੂੰ ਕਾਰਜਕੁਸ਼ਲਤਾ ਨੂੰ ਵਾਪਸ ਕਰਨ ਦੇ ਨਾਲ ਇੱਕ ਪਿਕਸਲ ਸੰਪਾਦਕ ਬਣਾਉਣ ਲਈ ਕਿਵੇਂ ਵਰਤ ਸਕਦੇ ਹਾਂ. ਹੇਠ ਲਿਖੇ ਕੋਡ ਇੱਕ ਮਿਡਲ ਦੇ ਰੂਪ ਵਿੱਚ ਉਪਲਬਧ ਹੈ ਜੋ ਤੁਸੀਂ ਲੇਖ ਦੇ ਪੈਰਾਂ 'ਤੇ ਵੀ ਲੱਭ ਸਕਦੇ ਹੋ.

ਮੋਰੀ ਨਾਲ ਅਗਾਊਂ ਡਾਟਾ ਅਤੇ ਕਾਰਜਸ਼ੀਲ ਜਾਵਾਸਕ੍ਰਿਪਟਮੋਰੀ ਨਾਲ ਅਗਾਊਂ ਡਾਟਾ ਅਤੇ ਕਾਰਜਸ਼ੀਲ ਜਾਵਾਸਕ੍ਰਿਪਟ ਵਿਸ਼ੇ:
npmTools ਅਤੇ ਲਾਇਬਰੇਰੀਆਂ APIsRaw ਮਿਡਲ

ਅਸੀਂ ਇਹ ਮੰਨ ਲਵਾਂਗੇ ਕਿ ਤੁਸੀਂ ਕੋਡਪੇਨ ਦੇ ਨਾਲ ਨਾਲ ਚੱਲ ਰਹੇ ਹੋ, ਜਾਂ ਤੁਸੀਂ ਮੋਰੀ ਅਤੇ ਅਗਲੇ HTML ਨਾਲ ਇੱਕ ES2015 ਵਾਤਾਵਰਨ ਵਿੱਚ ਕੰਮ ਕਰ ਰਹੇ ਹੋ.

   

ਮੋਰੀ ਪੇਂਟਰ

ਸੈਟਅੱਪ ਅਤੇ ਉਪਯੋਗਤਾਵਾਂ

ਸੈਮੀਲਟ ਨੇ ਮੋਰੀ ਨਾਮਾਂਕਣ ਤੋਂ ਲੋੜੀਂਦੇ ਕੰਮਾਂ ਨੂੰ ਨਸ਼ਟ ਕਰਕੇ ਸ਼ੁਰੂਆਤ ਕੀਤੀ. ਤੁਸੀਂ ਮੋਰੀ ਓਬਜੈਕਟ ਤੇ ਸਿੱਧੇ ਪਹੁੰਚ ਕਰਕੇ ਮੋਰੀ ਤੋਂ ਕਿਸੇ ਵੀ ਫੰਕਸ਼ਨ ਦੀ ਵਰਤੋਂ ਕਰ ਸਕਦੇ ਹੋ (eg. ਮੋਰੀ. ਸੂਚੀ ).

ਸਭ ਤੋਂ ਪਹਿਲਾਂ ਅਸੀਂ ਆਪਣੀਆਂ ਲਗਾਤਾਰ ਡਾਟਾ ਢਾਂਚਿਆਂ ਨੂੰ ਵੇਖਣ ਲਈ ਇੱਕ ਹੈਲਪਰ ਫੰਕਸ਼ਨ ਸੈਟਅੱਪ ਕਰਾਂਗੇ. ਮੋਰਿ ਦੀ ਅੰਦਰੂਨੀ ਪ੍ਰਤੀਨਿਧਤਾ ਇੱਕ ਕੰਸੋਲ ਵਿੱਚ ਜ਼ਿਆਦਾ ਅਰਥ ਨਹੀਂ ਰੱਖਦੀ, ਇਸ ਲਈ ਅਸੀਂ ਟੂਜ਼ ਫੰਕਸ਼ਨ ਨੂੰ ਇੱਕ ਸਮਝਣਯੋਗ ਰੂਪ ਵਿੱਚ ਬਦਲਣ ਲਈ ਇਸਤੇਮਾਲ ਕਰਾਂਗੇ.

     ਕਾਂਡ = (= ਆਰਜ਼ੀ) => {ਕੰਸੋਲ ਲਾਗ (. ਆਰਗੂਜ਼ ਮੈਪ (toJs))};    

ਅਸੀਂ ਇਸ ਫੰਕਸ਼ਨ ਨੂੰ ਕੰਸੋਲ ਦੇ ਵਿਕਲਪ ਦੇ ਤੌਰ ਤੇ ਵਰਤ ਸਕਦੇ ਹਾਂ. ਲਾਗ ਜਦੋਂ ਸਾਨੂੰ ਮੋਰੀ ਦੇ ਡਾਟਾ ਢਾਂਚਿਆਂ ਦੀ ਜਾਂਚ ਕਰਨ ਦੀ ਲੋੜ ਹੈ.

ਅੱਗੇ ਅਸੀਂ ਕੁਝ ਕੌਨਫਿਗ੍ਰੇਸ਼ਨ ਵੈਲਯੂਸ ਅਤੇ ਇੱਕ ਉਪਯੋਗਤਾ ਫੰਕਸ਼ਨ ਸੈਟਅੱਪ ਕਰਾਂਗੇ.

     // ਕੈਨਵਸ ਦੇ ਮਾਪconst [ਉਚਾਈ, ਚੌੜਾਈ] = [20, 20];// ਹਰ ਇੱਕ ਕੈਨਵਸ ਪਿਕਸਲ ਦਾ ਆਕਾਰconst ਪਿਕਸਲਸਾਈਜ਼ = 10;// ਇੱਕ 2D ਨਿਰਦੇਸ਼ ਅੰਕ ਵੈਕਟਰ ਨੂੰ ਇੱਕ ਪੂਰਨ ਅੰਕ ਨੂੰ ਬਦਲਦਾ ਹੈconst to2D = (i) => ਵੈਕਟਰ (i% ਚੌੜਾਈ,ਮੈਥ ਮੰਜ਼ਲ (i / ਚੌੜਾਈ));    

ਉਮੀਦ ਹੈ ਕਿ ਤੁਸੀਂ ਦੇਖਿਆ ਹੈ ਕਿ ਸਾਡੇ to2D ਫੰਕਸ਼ਨ ਇੱਕ ਵੈਕਟਰ ਨੂੰ ਵਾਪਸ ਕਰਦੇ ਹਨ. ਵੈਕਟਰ ਜਾਵਾਸਕਰਿਪਟ ਐਰੇ ਵਰਗੇ ਕੁਝ ਹਨ ਅਤੇ ਕਾਰਜਸ਼ੀਲ ਰੈਂਡਮ ਐਕਸੈਸ ਦੀ ਸਹਾਇਤਾ ਕਰਦੇ ਹਨ.

ਸਟ੍ਰਕਚਰਿੰਗ ਡੇਟਾ

ਕੈਨਵਸ ਦੇ ਸਾਰੇ ਪਿਕਸਲ ਦੀ ਨੁਮਾਇੰਦਗੀ ਕਰਨ ਵਾਲੇ ਨਿਰਦੇਸ਼ਾਂ ਦੀ ਤਰਤੀਬ ਬਣਾਉਣ ਲਈ ਅਸੀਂ to2D ਫੰਕਸ਼ਨ ਦੀ ਵਰਤੋਂ ਕਰਾਂਗੇ.

     ਕੰਨ ਕੋਆਰਡ = ਨਕਸ਼ਾ (to2D, ਸੀਮਾ (ਉਚਾਈ * ਚੌੜਾਈ));    

ਅਸੀਂ 0 ਅਤੇ ਦੀ ਉਚਾਈ * ਚੌੜਾਈ (ਸਾਡੇ ਕੇਸ ਵਿਚ 100 ) ਅਤੇ ਅਸੀਂ ਸਾਡੀ to2D ਸਹਾਇਕ ਫੰਕਸ਼ਨ ਨਾਲ ਇਸਨੂੰ 2D ਦੇ ਨਿਰਦੇਸ਼ਾਂ ਦੀ ਸੂਚੀ ਵਿੱਚ ਬਦਲਣ ਲਈ ਨਕਸ਼ੇ ਦੀ ਵਰਤੋਂ ਕਰ ਰਿਹਾ ਹਾਂ.

ਇਹ ਕੋਆਰਡਸ ਦੇ ਢਾਂਚੇ ਦੀ ਕਲਪਨਾ ਕਰਨ ਵਿੱਚ ਮਦਦ ਕਰ ਸਕਦਾ ਹੈ.

     [[0, 0], [0, 1], [0, 2], [0, 3], [0, 4], [0, 5], [0, 6], [0, 7], [0] , 8], [0, 9],[1, 0], [1, 1], [1, 2], [1, 3], [1, 4], [1, 5], [1, 6], [1, 7], [1 , 8], [1, 9],[2, 0], [2, 1], [2, 2], [2, 3], [2, 4], [2, 5], [2, 6], [2, 7], [2] , 8], [2, 9] [8, 0], [8, 1], [8, 2], [8, 3], [8, 4], [8, 5], [8, 6], [8, 7], [8] , 8], [8, 9][9, 0], [9, 1], [9, 2], [9, 3], [9, 4], [9, 5], [9, 6], [9, 7], [9] , 8], [9, 9]]    

ਕੋਆਰਡੀਨੇਟ ਵੈਟਰਾਂ ਦਾ ਇਕ-ਅਯਾਮੀ ਅਨੁਪਾਤ ਮਿਟਾਓ.

ਹਰੇਕ ਕੋਆਰਡੀਨੇਟ ਨੂੰ ਮਿਟਾਓ, ਅਸੀਂ ਇੱਕ ਕਲਰ ਵੈਲਯੂ ਸਟੋਰ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹਾਂ.

     ਕਾਂ ਰੰਗ = ਦੁਹਰਾਓ ('# ਫਿਫ');    

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

ਸੈਮੂਅਲ ਅਸੀਂ ਆਪਣੇ ਧੁਰੇ ਨੂੰ ਇੱਕ ਹੈਸ਼ ਮੈਪ ਦੇ ਰੂਪ ਵਿੱਚ ਆਪਣੇ ਕੋਆਰਡੀਨੇਟਸ ਨੂੰ ਜੋੜਨਾ ਚਾਹੁੰਦੇ ਹਾਂ.

     ਕੰਨ ਪਿਕਸਲ = ਜਿਪਮੈਪ (ਕੋਆਰਡਜ਼, ਰੰਗ);    

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

     {[0, 0]: '#fff',[1, 0]: '#fff',[2, 0]: '#fff',[3, 0]: '#fff',[4, 0]: '#fff',[5, 0]: '# ਫ੍ਫ', [8, 9]: '# ਫਫਿ',[9, 9]: '# ਫਫ਼'}    

ਜਾਵਾਸਕਰਿਪਟ ਦੀਆਂ ਚੀਜ਼ਾਂ ਦੇ ਉਲਟ, ਸੈਮਲਾਟ ਹੈਸ਼ ਮੈਪਸ ਇੱਕ ਕੁੰਜੀ ਦੇ ਤੌਰ ਤੇ ਕਿਸੇ ਵੀ ਕਿਸਮ ਦਾ ਡਾਟਾ ਲੈ ਸਕਦਾ ਹੈ.

ਪਿਕਸਲ ਡਰਾਇੰਗ

ਪਿਕਸਲ ਦਾ ਰੰਗ ਬਦਲਣ ਲਈ ਅਸੀਂ ਇੱਕ ਨਵੇਂ ਸਤਰ ਦੇ ਨਾਲ ਸਾਡੇ ਹੈਸ਼ ਮੈਪ ਵਿਚ ਕਿਸੇ ਨਿਰਦੇਸ਼ਕ ਨੂੰ ਜੋੜਨ ਦੇਵਾਂਗੇ. ਮੀਮੋਲਟ ਇੱਕ ਸ਼ੁੱਧ ਕੰਮ ਲਿਖਦਾ ਹੈ ਜੋ ਇੱਕ ਸਿੰਗਲ ਪਿਕਸਲ ਰੰਗ ਦੇ ਹੁੰਦੇ ਹਨ.

     const draw = (x, y, pixels, color = '# 000') => {const coord = ਵੈਕਟਰ (x, y);ਵਾਪਸ ਅਸਾਓਕ (ਪਿਕਸਲ, ਧੁਰੇ, ਰੰਗ);};    

ਅਸੀਂ x ਅਤੇ y ਇੱਕ ਧੁਰਾ ਬਣਾਉਣ ਲਈ ਨਿਰਦੇਸ਼ਕ ਵੈਕਟਰ ਬਣਾਉਂਦੇ ਹਾਂ ਜੋ ਅਸੀਂ ਇੱਕ ਕੁੰਜੀ ਦੇ ਤੌਰ ਤੇ ਵਰਤ ਸਕਦੇ ਹਾਂ, ਤਦ ਅਸੀਂ ਏਸੋਕ ਵਰਤਦੇ ਹਾਂ ਤਾਂ ਕਿ ਨਵੀਂ ਰੰਗ ਨਾਲ ਉਸ ਕੁੰਜੀ ਨੂੰ ਜੋੜ ਸਕੋ.

ਪੇਂਟਿੰਗ ਚਿੱਤਰਕਾਰੀ

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

     ਕਾਂਸਟ = (ctx, pixels) => {const px = pixelSize;ਹਰ (ਪਿਕਸਲ, p => {const [coord, color] = intoArray (p);const [x, y] = intoArray (ਧੁਰੇ);ctx fillStyle = color;ctx ਭਰਨ ਲਈ ਖੋਜ (x * px, y * px, px, px);});};    

ਸੈਮਵਲ ਵਿੱਚ ਇਹ ਸਮਝਣ ਲਈ ਇੱਕ ਮਿੰਟ ਲਗਾਓ ਕਿ ਇੱਥੇ ਕੀ ਹੋ ਰਿਹਾ ਹੈ.

ਅਸੀਂ ਹਰ ਇੱਕ ਵਰਤ ਰਹੇ ਹਾਂ ਤਾਂ ਕਿ ਸਾਡੇ ਪਿਕਸਲ ਹਸ਼ ਮੈਪ ਤੇ ਦੁਹਰਾਓ. ਇਹ ਕਾਲਬੈਕ ਫੰਕਸ਼ਨ p ਦੇ ਰੂਪ ਵਿਚ ਹਰੇਕ ਕੁੰਜੀ ਅਤੇ ਵੈਲਯੂ (ਇੱਕਠੇ ਕ੍ਰਮ ਦੇ ਰੂਪ ਵਿੱਚ) ਪਾਸ ਕਰਦਾ ਹੈ. ਫੇਰ ਅਸੀਂ ਇਸਨੂੰ ਐਰੇ ਵਿਚ ਬਦਲਣ ਲਈ ਐਰੇਅ ਫੰਕਸ਼ਨ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਾਂ ਜੋ ਵਿਨਾਸ਼ਕਾਰੀ ਹੋ ਸਕਦੀਆਂ ਹਨ, ਇਸਲਈ ਅਸੀਂ ਚਾਹੁੰਦੇ ਹਾਂ ਕਿ ਮੁੱਲ ਸਾਨੂੰ ਚੁਣ ਸਕਦੇ ਹਾਂ.

     const [coord, color] = inArray (p);const [x, y] = intoArray (ਧੁਰੇ);    

ਮਿਘਟੇ ਅਸੀਂ ਸੰਦਰਭ ਉੱਤੇ ਰੰਗਦਾਰ ਆਇਤ ਬਣਾਉਣ ਲਈ ਕੈਨਵਸ ਵਿਧੀਆਂ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਾਂ

     ਸੀਟੀਐਕਸ. fillStyle = color;ctx ਭਰਨ ਲਈ ਖੋਜ (x * px, y * px, px, px);    

ਵਾਇਰਿੰਗ ਇਸ ਨਾਲ

ਹੁਣ ਸਾਨੂੰ ਇਨ੍ਹਾਂ ਸਾਰੀਆਂ ਚੀਜ਼ਾਂ ਨੂੰ ਇਕੱਠਾ ਕਰਨ ਅਤੇ ਕੰਮ ਕਰਨ ਲਈ ਕੁਝ ਪਲੰਬਿੰਗ ਕਰਨ ਦੀ ਜ਼ਰੂਰਤ ਹੈ.

     ਕਾਂਸਟਰਾ ਕਿਨਵ = ਦਸਤਾਵੇਜ਼ getElementById ('ਕੈਨਵਸ');const ਸੰਦਰਭ = ਕੈਨਵਸ getContext ('2d');ਕੈਨਵਸ ਚੌੜਾਈ = ਚੌੜਾਈ * ਪਿਕਸਲਸਾਈਜ਼;ਕੈਨਵਸ ਉਚਾਈ = ਉੱਚਾਈ * ਪਿਕਸਲਸਾਈਜ਼;ਰੰਗ (ਪ੍ਰਸੰਗ, ਪਿਕਸਲ);    

ਮਿਡਲ ਨੂੰ ਕੈਨਵਸ ਦੀ ਪਕੜ ਕੇ ਰੱਖੋ ਅਤੇ ਆਪਣੀ ਚਿੱਤਰ ਨੂੰ ਪੇਸ਼ ਕਰਨ ਲਈ ਇੱਕ ਪ੍ਰਸੰਗ ਬਣਾਉਣ ਲਈ ਇਸਦੀ ਵਰਤੋਂ ਕਰੋ. ਮਿਮਾਲਾ ਸਾਡੇ ਪੈਮਾਨੇ ਨੂੰ ਦਰਸਾਉਣ ਲਈ ਸਹੀ ਰੂਪ ਵਿੱਚ ਇਸਦਾ ਆਕਾਰ ਵੀ ਬਦਲਦਾ ਹੈ.

ਸਿਮਟੈਂਟ ਅਸੀਂ ਆਪਣੇ ਪ੍ਰਸੰਗ ਨੂੰ ਆਪਣੇ ਪਿਕਸਲ ਨਾਲ ਪਾਸ ਕਰਾਂਗੇ ਜਿਸ ਨੂੰ ਪੇਂਟ ਵਿਧੀ ਰਾਹੀਂ ਖਿੱਚਿਆ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ. ਕਿਸੇ ਵੀ ਕਿਸਮਤ ਨਾਲ, ਤੁਹਾਡੇ ਕੈਨਵਸ ਨੂੰ ਸਫੈਦ ਪਿਕਸਲ ਦੇ ਤੌਰ ਤੇ ਪੇਸ਼ ਕਰਨਾ ਚਾਹੀਦਾ ਹੈ. ਸਭ ਤੋਂ ਦਿਲਚਸਪ ਨਾ ਖੁਲਾਸਾ, ਪਰ ਅਸੀਂ ਨੇੜੇ ਆ ਰਹੇ ਹਾਂ

ਇੰਟਰਐਕਟੀਵਿਟੀ

ਅਸੀਂ ਕਲਿਕ ਈਵੈਂਟਾਂ ਲਈ ਸੁਣਨਾ ਚਾਹੁੰਦੇ ਹਾਂ ਅਤੇ ਉਨ੍ਹਾਂ ਦੇ ਵਰਤੋ ਡਰਾਅ ਫੰਕਸ਼ਨ ਨਾਲ ਇੱਕ ਵਿਸ਼ੇਸ਼ ਪਿਕਸਲ ਦਾ ਰੰਗ ਬਦਲਣ ਲਈ ਵਰਤੋ.

     ਫਰੇਮ = ਸੂਚੀ (ਪਿਕਸਲ) ਦਿਉ;ਕੈਨਵਸ addEventListener ('ਤੇ ਕਲਿੱਕ ਕਰੋ', ਈ => {const x = ਮਥਾਨ. ਮੰਜ਼ਲ (E. layerX / pixelSize);const y = ਮੈਥ ਮੰਜ਼ਲ (ਏ. ਲੇਅਰ ਲਾਈਫ / ਪਿਕਸਲ ਸਿਜ਼);const ਪਿਕਸਲ = ਡਰਾਅ (x, y, ਫਰੇਮ);ਰੰਗ (ਪ੍ਰਸੰਗ, ਪਿਕਸਲ);ਫ੍ਰੇਮ = ਪਿਕਸਲ;});    

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

ਇਸ ਸਮੇਂ ਅਸੀਂ ਕੈਨਵਸ ਵਿੱਚ ਬਲੈਕ ਪਿਕਸਲ ਬਣਾ ਸਕਦੇ ਹਾਂ ਅਤੇ ਹਰ ਇੱਕ ਫਰੇਮ ਪਿਛਲੇ ਇਕ ਉੱਤੇ ਅਧਾਰਿਤ ਹੋਵੇਗੀ, ਇੱਕ ਸੰਯੁਕਤ ਚਿੱਤਰ ਬਣਾਉਣਾ.

ਟਰੈਕਿੰਗ ਫਰੇਮਜ਼

ਵਾਪਸੀ ਨੂੰ ਲਾਗੂ ਕਰਨ ਲਈ, ਅਸੀਂ ਹਰ ਇੱਕ ਇਤਿਹਾਸਕ ਦੁਹਰਾਈ ਨੂੰ ਪਿਕਸਲ ਹੈਸ਼ ਮੈਪ ਤੇ ਸਟੋਰ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹਾਂ, ਇਸ ਲਈ ਅਸੀਂ ਭਵਿੱਖ ਵਿੱਚ ਦੁਬਾਰਾ ਉਹਨਾਂ ਨੂੰ ਪ੍ਰਾਪਤ ਕਰ ਸਕਦੇ ਹਾਂ.

     ਫਰੇਮ = ਸੂਚੀ (ਪਿਕਸਲ) ਦਿਉ;    

ਅਸੀਂ ਵੱਖਰੇ "ਫਰੇਮਾਂ" ਨੂੰ ਸਟੋਰ ਕਰਨ ਲਈ ਇੱਕ ਸੂਚੀ ਦੀ ਵਰਤੋਂ ਕਰ ਰਹੇ ਹਾਂ ਜੋ ਅਸੀਂ ਖਿੱਚਿਆ ਹੈ ਸੈਮਲਾਟ ਸਹਾਇਤਾ ਪ੍ਰਾਇਮਰੀ ਜੋੜ ਅਤੇ ਸਿਰ ਤੇ ਹੇ ਪਹਿਲੀ ਆਈਟਮ ਲਈ ਖੋਜ, ਜੋ ਉਹਨਾਂ ਨੂੰ ਸਟੈਕਾਂ ਦਾ ਪ੍ਰਤੀਨਿਧ ਕਰਨ ਲਈ ਆਦਰਸ਼ ਬਣਾਉਂਦਾ ਹੈ.

ਸੈਮਟ੍ਰੋਲ ਨੂੰ ਸਾਡੀ ਫਰੇਮ ਸਟੈਕ ਨਾਲ ਕੰਮ ਕਰਨ ਲਈ ਸਾਡੀ ਲਿਸਨਰ ਬਦਲਣ ਦੀ ਲੋੜ ਹੈ.

     ਕੈਨਵਸ addEventListener ('ਤੇ ਕਲਿੱਕ ਕਰੋ', ਈ => {const x = ਮਥਾਨ. ਮੰਜ਼ਲ (E. layerX / pixelSize);const y = ਮੈਥ ਮੰਜ਼ਲ (ਏ. ਲੇਅਰ ਲਾਈਫ / ਪਿਕਸਲ ਸਿਜ਼);const currentFrame = peek (ਫਰੇਮਾਂ);const newFrame = ਡਰਾਅ (x, y, currentFrame);ਫ੍ਰੇਮ = ਕੋਨਜ (ਫਰੇਮਾਂ, ਨਵਾਂਫਰਾ);ਰੰਗ (ਪ੍ਰਸੰਗ, ਨਵਾਂਫਰਾ);});    

ਅਸੀਂ ਸਟੈਕ ਦੇ ਉੱਪਰ ਫਰੇਮ ਪ੍ਰਾਪਤ ਕਰਨ ਲਈ ਪੀਕ ਫੰਕਸ਼ਨ ਵਰਤ ਰਹੇ ਹਾਂ. ਫਿਰ ਅਸੀਂ ਇਸਨੂੰ ਡਰਾਅ ਫੰਕਸ਼ਨ ਨਾਲ ਇੱਕ ਨਵੀਂ ਫਰੇਮ ਬਣਾਉਣ ਲਈ ਇਸਨੂੰ ਵਰਤਦੇ ਹਾਂ. ਅਖੀਰ ਵਿਚ ਅਸੀਂ ਕੰਜ ਤੋਂ ਕਨਜੋਨ ਨੂੰ ਨਵੀਂ ਫਰੇਮ ਫਰੇਮ ਸਟੈਕ ਦੇ ਸਿਖਰ ਤੇ ਵਰਤਦੇ ਹਾਂ.

ਹਾਲਾਂਕਿ ਅਸੀਂ ਸਥਾਨਕ ਰਾਜ ਬਦਲ ਰਹੇ ਹਾਂ ( ਫਰੇਮ = ਕੋਨਜ (ਫਰੇਮਾਂ, ਨਵੇਂਫਰਾਮੇ) ) ਅਸੀਂ ਅਸਲ ਵਿੱਚ ਕਿਸੇ ਵੀ ਡੇਟਾ ਨੂੰ ਪਰਿਵਰਤਿਤ ਨਹੀਂ ਕਰ ਰਹੇ ਹਾਂ.

     const undo = ਦਸਤਾਵੇਜ਼. getElementById ('undo');ਵਾਪਿਸ. addEventListener ('ਤੇ ਕਲਿੱਕ ਕਰੋ', ਈ => {ਜੇ (ਗਿਣਤੀ (ਫਰੇਮਾਂ)> 1) {ਫਰੇਮ = ਪੌਪ (ਫਰੇਮਾਂ);ਰੰਗ (ਪ੍ਰਸੰਗ, ਪੀਕ (ਫਰੇਮਾਂ));}});    

ਜਦੋਂ ਵਾਪਸ ਆਉ ਬਟਨ ਤੇ ਕਲਿਕ ਕੀਤਾ ਜਾਂਦਾ ਹੈ ਤਾਂ ਅਸੀਂ ਜਾਂਚ ਕਰਾਂਗੇ ਕਿ ਕੀ ਇੱਥੇ ਵਾਪਸ ਕਰਨ ਲਈ ਕੋਈ ਫਰੇਮ ਹੈ, ਫਿਰ ਫਰੇਮਾਂ ਨੂੰ ਬਦਲਣ ਵਾਲੀ ਪੌਪ ਫੰਕਸ਼ਨ ਦੀ ਨਵੀਂ ਸੂਚੀ ਦੇ ਨਾਲ ਵਰਤੋ ਜੋ ਹੁਣ ਚੋਟੀ ਦੇ ਫਰੇਮ ਵਿੱਚ ਸ਼ਾਮਲ ਨਹੀਂ ਹੈ.

ਅਖੀਰ ਵਿਚ ਅਸੀਂ ਨਵੇਂ ਸਟੈਕ ਤੇ ਚੋਟੀ ਦੇ ਫਰੇਮ ਨੂੰ ਆਪਣੇ ਰੰਗ ਫੰਕਸ਼ਨ ਨੂੰ ਪਰਿਵਰਤਨ ਦਰਸਾਉਣ ਲਈ ਪਾਸ ਕਰਦੇ ਹਾਂ. ਇਸ ਮੌਕੇ 'ਤੇ, ਤੁਸੀਂ ਕੈਨਵਸ ਵਿੱਚ ਬਦਲਾਅ ਕਰਨ ਦੇ ਯੋਗ ਹੋਣਾ ਚਾਹੀਦਾ ਹੈ.

ਡੈਮੋ

ਸਿਮਟ ਕਰਨਾ ਜੋ ਸਾਡੇ ਨਾਲ ਖ਼ਤਮ ਹੁੰਦਾ ਹੈ:

ਕੋਡਪੈਨ ਤੇ ਸਾਈਟਪੁਆਇੰਟ (@ਸੇਟਪੁਆਇੰਟ) ਦੁਆਰਾ ਪੇਨ ਮੋਰੀ ਪਿਕਸਲ ਦੇਖੋ.

ਐਕਸਟੈਂਸ਼ਨਾਂ

ਇੱਥੇ ਇਹ ਢੰਗਾਂ ਲਈ ਵਿਚਾਰਾਂ ਦੀ ਇੱਕ ਸੂਚੀ ਹੈ ਜੋ ਤੁਸੀਂ ਇਸ ਐਪਲੀਕੇਸ਼ਨ ਵਿੱਚ ਸੁਧਾਰ ਕਰ ਸਕਦੇ ਹੋ:

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

ਸਿੱਟਾ

ਮਿਮਾਲ ਨੇ ਵੈਕਟਸ, ਲਿਸਟਸ, ਰੇਜ਼ ਅਤੇ ਹੈਸ਼ ਮੈਪਾਂ 'ਤੇ ਨਜ਼ਰ ਮਾਰੀ, ਪਰ ਮੋਰੀ ਵੀ ਸੈੱਟ, ਕ੍ਰਮਬੱਧ ਸੈਟ ਅਤੇ ਕਤਾਰਾਂ ਦੇ ਨਾਲ ਆਉਂਦੀ ਹੈ ਅਤੇ ਇਹਨਾਂ ਵਿੱਚੋਂ ਹਰੇਕ ਡਾਟਾ ਢਾਂਚੇ ਉਹਨਾਂ ਦੇ ਨਾਲ ਕੰਮ ਕਰਨ ਲਈ ਪੋਲੀਮੋਰਫਿਕ ਫੰਕਸ਼ਨਾਂ ਦੇ ਪੂਰਕ ਨਾਲ ਆਉਂਦਾ ਹੈ.

ਸੈਮਮਟ ਨੇ ਸੰਭਵ ਤੌਰ 'ਤੇ ਕੀ ਸੰਭਵ ਹੈ ਦੀ ਸਤ੍ਹਾ ਨੂੰ ਖੁਰਿਆ, ਪਰ ਆਸ ਹੈ ਕਿ ਤੁਸੀਂ ਸਾਧਾਰਨ ਫੰਕਸ਼ਨਾਂ ਦੇ ਇੱਕ ਸ਼ਕਤੀਸ਼ਾਲੀ ਸਮੂਹ ਦੇ ਨਾਲ ਲਗਾਤਾਰ ਜਾਣਕਾਰੀ ਜੋੜਨ ਦੇ ਮਹੱਤਵ ਨੂੰ ਮਹੱਤਵ ਦੇ ਤੌਰ ਤੇ ਦੇਖਿਆ ਹੋਵੇਗਾ.

March 7, 2018