JavaScript ਬਿਊਟੀਫਿਕੇਸ਼ਨ ਕਿਵੇਂ ਕੰਮ ਕਰਦੀ ਹੈ
ਬਿਊਟੀਫਾਇਰ ਤੁਹਾਡੇ ਕੋਡ ਨੂੰ ਅੱਖਰ-ਦਰ-ਅੱਖਰ ਪੜ੍ਹਦਾ ਹੈ, ਹਰ statement ਕਿੰਨੀ ਡੂੰਘਾਈ ਤੇ nested ਹੈ ਇਹ ਟ੍ਰੈਕ ਕਰਦਾ ਹੈ, ਅਤੇ ਇਸ ਨੂੰ ਇਕਸਾਰ spacing ਨਾਲ ਮੁੜ ਛਾਪਦਾ ਹੈ। ਇਹ ਕਦੇ ਨਹੀਂ ਬਦਲਦਾ ਕਿ ਕੋਡ ਕੀ ਕਰਦਾ ਹੈ — ਸਿਰਫ਼ ਇਹ ਕਿ ਇਹ ਕਿਵੇਂ ਦਿਖਦਾ ਹੈ।
- Tokenize. ਲਾਇਬ੍ਰੇਰੀ ਤੁਹਾਡੇ ਇਨਪੁੱਟ ਨੂੰ token ਦੀ ਇੱਕ ਧਾਰਾ ਵਿੱਚ ਸਕੈਨ ਕਰਦੀ ਹੈ: keywords, identifiers, strings, operators, ਅਤੇ punctuation। Strings, template literals, ਅਤੇ regular-expression literals ਨੂੰ ਇੱਕ ਇਕਾਈ ਵਜੋਂ ਪਛਾਣਿਆ ਜਾਂਦਾ ਹੈ, ਇਸ ਲਈ string ਦੇ ਅੰਦਰਲੇ ਬ੍ਰੇਸ ਨੂੰ ਕਦੇ ਵੀ block delimiter ਵਜੋਂ ਗਲਤ ਨਹੀਂ ਸਮਝਿਆ ਜਾਂਦਾ।
- Nesting ਟ੍ਰੈਕ ਕਰੋ. ਜਿਵੇਂ ਇਹ token ਧਾਰਾ ਉੱਤੇ ਚੱਲਦਾ ਹੈ, ਬਿਊਟੀਫਾਇਰ ਇੱਕ ਚਾਲੂ indent level ਰੱਖਦਾ ਹੈ। ਹਰ ਖੁੱਲ੍ਹਣ ਵਾਲਾ ਬ੍ਰੇਸ, ਬ੍ਰੈਕਟ, ਜਾਂ ਬਰੈਕਟ level ਨੂੰ ਡੂੰਘਾ ਧੱਕਦਾ ਹੈ; ਹਰ ਬੰਦ ਹੋਣ ਵਾਲਾ ਉਸ ਨੂੰ ਵਾਪਸ ਪੌਪ ਕਰਦਾ ਹੈ। ਉਹ ਡੂੰਘਾਈ ਤੈਅ ਕਰਦੀ ਹੈ ਕਿ ਤੁਹਾਨੂੰ ਵਾਪਸ ਮਿਲਣ ਵਾਲੀ ਹਰ ਲਾਈਨ ਅੱਗੇ ਕਿੰਨੀਆਂ indent ਇਕਾਈਆਂ ਬੈਠਦੀਆਂ ਹਨ।
- ਆਪਣੇ ਵਿਕਲਪ ਲਾਗੂ ਕਰੋ. ਤੁਹਾਡੀ indent ਚੋਣ (2 ਸਪੇਸ, 4 ਸਪੇਸ, ਜਾਂ ਇੱਕ ਟੈਬ) ਇੱਕ level ਦੀ ਚੌੜਾਈ ਸੈੱਟ ਕਰਦੀ ਹੈ। ਬ੍ਰੇਸ-ਸ਼ੈਲੀ ਸੈਟਿੰਗ ਤੈਅ ਕਰਦੀ ਹੈ ਕਿ ਖੁੱਲ੍ਹਣ ਵਾਲਾ ਬ੍ਰੇਸ ਆਪਣੇ ਅੱਗੇ ਵਾਲੇ statement ਨਾਲ ਚਿੰਬੜੇ ਜਾਂ ਆਪਣੀ ਵੱਖਰੀ ਲਾਈਨ ਉੱਤੇ ਉੱਤਰੇ। ਖਾਲੀ-ਲਾਈਨ ਸੀਮਾ ਖਾਲੀ ਲਾਈਨਾਂ ਦੀ ਲੰਮੀ ਲੜੀ ਨੂੰ ਤੁਹਾਡੀ ਚੁਣੀ ਸੀਮਾ ਤੱਕ ਸੰਕੁਚਿਤ ਕਰਦੀ ਹੈ।
- ਮੁੜ ਛਾਪੋ. ਅੰਤ ਵਿੱਚ formatter token ਨੂੰ ਉਸ indentation ਅਤੇ line breaks ਨਾਲ ਵਾਪਸ ਛਾਪਦਾ ਹੈ ਜੋ ਉਸ ਨੇ ਕੱਢੇ, ਵਿਕਲਪਿਕ ਤੌਰ ਤੇ ਉਹ ਸੈਮੀਕੋਲਨ ਜੋੜਦਾ ਜੋ automatic semicolon insertion runtime ਉੱਤੇ ਪ੍ਰਦਾਨ ਕਰ ਦਿੰਦਾ। ਨਤੀਜਾ ਉਹੀ program ਹੈ, ਇਸ ਤਰ੍ਹਾਂ ਵਿਛਾਇਆ ਕਿ ਇੱਕ ਮਨੁੱਖ ਪੜ੍ਹ ਸਕੇ।
JavaScript ਕਿਉਂ ਬਿਊਟੀਫਾਈ ਕਰੋ
- ਮਿਨੀਫਾਈਡ ਕੋਡ ਪੜ੍ਹੋ. Production bundles ਇੱਕ ਲਾਈਨ ਉੱਤੇ ਇੱਕ-ਅੱਖਰੀ variable ਨਾਮਾਂ ਨਾਲ ਭੇਜੇ ਜਾਂਦੇ ਹਨ। ਬਿਊਟੀਫਾਈ ਕਰਨ ਨਾਲ line breaks ਅਤੇ indentation ਵਾਪਸ ਆਉਂਦੇ ਹਨ ਤਾਂ ਜੋ ਤੁਸੀਂ source map ਤੋਂ ਬਿਨਾਂ ਵੀ bug ਨੂੰ ਉਸ statement ਤੱਕ ਟ੍ਰੇਸ ਕਰ ਸਕੋ ਜਿਸ ਨੇ ਇਹ ਕੀਤਾ।
- ਬੇਮੇਲ ਫਾਈਲਾਂ ਸੁਥਰੀਆਂ ਕਰੋ. ਜਿਸ ਕੋਡ ਨੂੰ ਕਈ ਲੋਕਾਂ ਨੇ ਛੂਹਿਆ ਹੋਵੇ ਉਹ ਮਿਲਵੀਂ indentation ਅਤੇ ਬ੍ਰੇਸ ਸ਼ੈਲੀਆਂ ਵਿੱਚ ਭਟਕ ਜਾਂਦਾ ਹੈ। ਬਿਊਟੀਫਾਇਰ ਰਾਹੀਂ ਇੱਕ ਪਾਸ ਪੂਰੀ ਫਾਈਲ ਨੂੰ ਇੱਕੋ ਖਾਕੇ ਉੱਤੇ ਆਮ ਬਣਾਉਂਦਾ ਹੈ, ਜਿਸ ਨਾਲ ਅਗਲਾ diff ਖਾਲੀ ਥਾਂ ਦੇ ਰੌਲੇ ਦੀ ਬਜਾਏ ਅਸਲ logic ਤਬਦੀਲੀਆਂ ਦਿਖਾਉਂਦਾ ਹੈ।
- ਇਹ ਟੂਲ ਤੁਹਾਡੇ ਪੇਜ ਉੱਤੇ ਬੋਝ ਨਹੀਂ ਪਾਉਂਦਾ. ਜ਼ਿਆਦਾਤਰ ਔਨਲਾਈਨ formatters ਪੇਜ ਖੋਲ੍ਹਦੇ ਹੀ ਆਪਣੀ ਪੂਰੀ ਲਾਇਬ੍ਰੇਰੀ ਲੋਡ ਕਰ ਲੈਂਦੇ ਹਨ। ਇਹ js-beautify ਨੂੰ ਸਿਰਫ਼ ਉਦੋਂ lazy-load ਕਰਦਾ ਹੈ ਜਦੋਂ ਤੁਸੀਂ ਬਿਊਟੀਫਾਈ ਕਲਿੱਕ ਕਰਦੇ ਹੋ ਜਾਂ Live mode ਚਾਲੂ ਕਰਦੇ ਹੋ, ਇਸ ਲਈ ਪੇਜ ਖੋਲ੍ਹਣ ਦਾ ਖਰਚ ਕੁਝ ਸੌ ਦੀ ਬਜਾਏ ਕੁਝ ਕਿਲੋਬਾਈਟ ਹੁੰਦਾ ਹੈ, ਅਤੇ ਸ਼ੁਰੂਆਤੀ render ਤੇਜ਼ ਰਹਿੰਦਾ ਹੈ।
- ਕੁਝ ਵੀ ਤੁਹਾਡਾ ਬ੍ਰਾਊਜ਼ਰ ਨਹੀਂ ਛੱਡਦਾ. ਬਿਊਟੀਫਾਇਰ ਪੂਰੀ ਤਰ੍ਹਾਂ ਤੁਹਾਡੇ ਡਿਵਾਈਸ ਉੱਤੇ ਚੱਲਦਾ ਹੈ। ਤੁਹਾਡਾ ਕੋਡ ਕਦੇ ਵੀ server ਉੱਤੇ upload ਨਹੀਂ ਹੁੰਦਾ, ਜੋ ਉਦੋਂ ਮਾਅਨੇ ਰੱਖਦਾ ਹੈ ਜਦੋਂ ਤੁਸੀਂ ਜਾਂਚ ਰਹੀ script ਕਿਸੇ client ਦੀ ਹੋਵੇ, ਅੰਦਰੂਨੀ API paths ਰੱਖਦੀ ਹੋਵੇ, ਜਾਂ ਗੁਪਤਤਾ ਸਮਝੌਤੇ ਅਧੀਨ ਆਉਂਦੀ ਹੋਵੇ।
ਆਮ ਵਰਤੋਂ
JavaScript ਬਿਊਟੀਫਾਈ ਕਰਨਾ ਉਦੋਂ ਆਉਂਦਾ ਹੈ ਜਦੋਂ ਕਿਸੇ ਨੂੰ ਅਜਿਹਾ ਕੋਡ ਪੜ੍ਹਨਾ ਪਵੇ ਜੋ ਪੜ੍ਹਨ ਲਈ ਨਹੀਂ ਲਿਖਿਆ ਗਿਆ ਸੀ।
- Production ਡੀਬੱਗ ਕਰਨਾ: Network ਟੈਬ ਵਿੱਚੋਂ ਖਿੱਚਿਆ ਮਿਨੀਫਾਈਡ bundle ਪੇਸਟ ਕਰੋ ਤਾਂ ਜੋ ਉਸ error stack ਪਿੱਛੇ ਵਾਲਾ function ਮਿਲੇ ਜਿਸ ਨੂੰ ਤੁਸੀਂ ਹੋਰ ਤਰੀਕੇ ਨਾਲ ਡੀਕੋਡ ਨਹੀਂ ਕਰ ਸਕਦੇ।
- ਕੋਡ ਰਿਵਿਊ ਦੀ ਤਿਆਰੀ: pull request ਖੋਲ੍ਹਣ ਤੋਂ ਪਹਿਲਾਂ contributor ਦੀ ਬੇਮੇਲ-ਇੰਡੈਂਟ ਹੋਈ ਫਾਈਲ ਮੁੜ ਫਾਰਮੈਟ ਕਰੋ ਤਾਂ ਜੋ reviewers logic ਵੇਖਣ, ਖਾਕੇ ਦਾ ਰੌਲਾ ਨਹੀਂ।
- ਸੁਰੱਖਿਆ ਅਤੇ ਅਨੁਪਾਲਨ ਆਡਿਟ: live ਹੋਣ ਤੋਂ ਪਹਿਲਾਂ ਇਹ ਠੀਕ-ਠੀਕ ਕੀ ਕਰਦਾ ਹੈ ਇਸ ਦੀ ਪੁਸ਼ਟੀ ਕਰਨ ਲਈ third-party analytics ਜਾਂ ad snippet ਨੂੰ expand ਕਰੋ।
ਇੱਕ ਕੰਮ ਕੀਤੀ ਉਦਾਹਰਣ
ਇੱਕ ਮਿਨੀਫਾਈਡ ਇੱਕ-ਲਾਈਨ ਲਓ: function f(a){if(a){return a*2}else{return 0}}। ਇਸ ਨੂੰ ਉੱਪਰ indentation 2 ਸਪੇਸ ਅਤੇ ਬ੍ਰੇਸ ਸ਼ੈਲੀ Collapse ਸੈੱਟ ਕਰਕੇ ਪੇਸਟ ਕਰੋ, ਫਿਰ ਬਿਊਟੀਫਾਈ ਕਲਿੱਕ ਕਰੋ। ਤੁਹਾਨੂੰ ਪੜ੍ਹਨਯੋਗ block ਵਾਪਸ ਮਿਲਦਾ ਹੈ: function f(a) {, ਫਿਰ ਇੱਕ indented if (a) {, ਇੱਕ level ਡੂੰਘਾ nested return a * 2; statement, ਅਤੇ ਹੇਠਾਂ ਮੇਲ ਖਾਂਦੇ ਬ੍ਰੇਸ ਕਤਾਰ ਵਿੱਚ। ਬ੍ਰੇਸ ਸ਼ੈਲੀ ਨੂੰ Expand ਉੱਤੇ ਬਦਲੋ ਅਤੇ ਹਰ ਖੁੱਲ੍ਹਣ ਵਾਲਾ ਬ੍ਰੇਸ ਆਪਣੀ ਵੱਖਰੀ ਲਾਈਨ ਉੱਤੇ ਉੱਤਰਦਾ ਹੈ। indentation ਨੂੰ ਟੈਬ ਉੱਤੇ ਬਦਲੋ ਅਤੇ ਹਰ level ਦੋ ਸਪੇਸ ਤੋਂ ਇੱਕ ਟੈਬ ਅੱਖਰ ਉੱਤੇ ਖਿਸਕਦਾ ਹੈ। ਬਣਤਰ ਇੱਕੋ ਹੀ ਹੈ; ਸਿਰਫ਼ ਖਾਕਾ ਬਦਲਦਾ ਹੈ।
FAQ
ਕੀ ਇਹ ਮੇਰੇ ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ ਚੱਲਦਾ ਹੈ?
ਹਾਂ। js-beautify ਲਾਇਬ੍ਰੇਰੀ ਪਹਿਲੀ ਵਾਰ ਬਿਊਟੀਫਾਈ ਕਲਿੱਕ ਕਰਨ ਜਾਂ Live mode ਸਮਰੱਥ ਕਰਨ ਤੇ lazy-load ਹੁੰਦੀ ਹੈ, ਫਿਰ cache ਹੁੰਦੀ ਹੈ। ਤੁਹਾਡਾ ਕੋਡ ਕਦੇ ਪੇਜ ਨਹੀਂ ਛੱਡਦਾ — ਕੋਈ server round-trip ਨਹੀਂ ਅਤੇ ਕੋਈ upload ਨਹੀਂ।
ਕੀ ਬਿਊਟੀਫਾਈ ਕਰਨਾ ਅਨ-ਮਿਨੀਫਾਈ ਕਰਨ ਵਾਂਗੂ ਹੈ?
ਇਹ ਪੜ੍ਹਨਯੋਗ ਫਾਰਮੈਟਿੰਗ ਵਾਪਸ ਲਿਆਉਂਦਾ ਹੈ — indentation, line breaks, ਅਤੇ spacing — ਪਰ ਇਹ ਮੂਲ variable ਨਾਮ ਜਾਂ ਮਿਨੀਫਿਕੇਸ਼ਨ ਨੇ ਹਟਾਈਆਂ ਟਿੱਪਣੀਆਂ ਵਾਪਸ ਨਹੀਂ ਲਿਆ ਸਕਦਾ। ਜੇ source map ਮੌਜੂਦ ਹੋਵੇ, ਤਾਂ ਤੁਹਾਡੇ ਬ੍ਰਾਊਜ਼ਰ ਦੇ DevTools ਮੂਲ ਨਾਮ ਮੁੜ ਪ੍ਰਾਪਤ ਕਰ ਸਕਦੇ ਹਨ; ਇਕੱਲਾ ਬਿਊਟੀਫਾਇਰ ਸਿਰਫ਼ ਉਸੇ ਨਾਲ ਕੰਮ ਕਰਦਾ ਹੈ ਜੋ ਫਾਈਲ ਵਿੱਚ ਹੈ।
ਕੀ ਬਿਊਟੀਫਾਈ ਕਰਨ ਨਾਲ ਮੇਰਾ ਕੋਡ ਕਿਵੇਂ ਵਰਤਾਉ ਕਰਦਾ ਹੈ ਉਹ ਬਦਲੇਗਾ?
ਨਹੀਂ। ਬਿਊਟੀਫਿਕੇਸ਼ਨ ਸਿਰਫ਼ ਖਾਲੀ ਥਾਂ ਅਤੇ line breaks ਜੋੜਦਾ ਅਤੇ ਹਟਾਉਂਦਾ ਹੈ; program ਇੱਕੋ ਜਿਹਾ ਚੱਲਦਾ ਹੈ। ਇੱਕੋ ਵਿਕਲਪ ਜੋ token ਨੂੰ ਛੂਹੰਦਾ ਹੈ ਉਹ ਹੈ "ਗੁੰਮ ਸੈਮੀਕੋਲਨ ਜੋੜੋ," ਜੋ ਉਹ statement terminators ਪਾਉਂਦਾ ਹੈ ਜੋ automatic semicolon insertion runtime ਉੱਤੇ ਵੈਸੇ ਵੀ ਜੋੜ ਦਿੰਦਾ, ਕੋਡ ਨੂੰ ਬਾਅਦ ਵਿੱਚ ਮਿਨੀਫਾਈ ਕਰਨ ਲਈ ਸੁਰੱਖਿਅਤ ਬਣਾਉਂਦਾ ਹੈ।
ਬ੍ਰੇਸ-ਸ਼ੈਲੀ ਵਿਕਲਪਾਂ ਦਾ ਕੀ ਮਤਲਬ ਹੈ?
Collapse ਖੁੱਲ੍ਹਣ ਵਾਲੇ ਬ੍ਰੇਸ ਨੂੰ statement ਦੀ ਉਸੇ ਲਾਈਨ ਉੱਤੇ ਰੱਖਦਾ ਹੈ (if (x) {), ਜੋ ਆਮ JavaScript ਰਿਵਾਜ ਹੈ। Expand ਹਰ ਖੁੱਲ੍ਹਣ ਵਾਲੇ ਬ੍ਰੇਸ ਨੂੰ ਆਪਣੀ ਵੱਖਰੀ ਲਾਈਨ ਉੱਤੇ ਉਤਾਰਦਾ ਹੈ (Allman ਸ਼ੈਲੀ)। End-expand ਖੁੱਲ੍ਹਣ ਵਾਲੇ ਬ੍ਰੇਸ ਨੂੰ ਜੁੜਿਆ ਰੱਖਦਾ ਹੈ ਪਰ else ਅਤੇ catch ਨੂੰ ਬੰਦ ਬ੍ਰੇਸ ਤੋਂ ਬਾਅਦ ਨਵੀਂ ਲਾਈਨ ਉੱਤੇ ਪਾਉਂਦਾ ਹੈ।
ਬ੍ਰਾਊਜ਼ਰ-ਸਾਈਡ JavaScript ਬਿਊਟੀਫਿਕੇਸ਼ਨ ਤੁਹਾਨੂੰ build step ਜਾਂ upload ਤੋਂ ਬਿਨਾਂ ਪੜ੍ਹਨਯੋਗ ਕੋਡ ਦਿੰਦੀ ਹੈ। ਮਿਨੀਫਾਈਡ ਜਾਂ ਗੜਬੜ script ਪੇਸਟ ਕਰੋ, ਆਪਣੀ indentation ਅਤੇ ਬ੍ਰੇਸ ਸ਼ੈਲੀ ਚੁਣੋ, ਫਿਰ ਨਤੀਜਾ ਕਾਪੀ ਜਾਂ ਡਾਊਨਲੋਡ ਕਰੋ। ਕੁਝ ਵੀ ਤੁਹਾਡਾ ਡਿਵਾਈਸ ਨਹੀਂ ਛੱਡਦਾ, ਕੋਈ account ਨਹੀਂ, ਅਤੇ ਲਾਇਬ੍ਰੇਰੀ ਸਿਰਫ਼ ਉਦੋਂ ਲੋਡ ਹੁੰਦੀ ਹੈ ਜਦੋਂ ਤੁਸੀਂ ਕਹੋ — ਇਸ ਲਈ ਇਹ ਪੇਜ ਖੋਲ੍ਹਣਾ ਤੁਹਾਨੂੰ ਇੱਕ megabyte ਨਹੀਂ, ਕੁਝ ਕਿਲੋਬਾਈਟ ਪੈਂਦਾ ਹੈ।