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 ಬದಲಾವಣೆಗಳನ್ನು ತೋರಿಸುತ್ತದೆ.
- ಈ ಟೂಲ್ ನಿಮ್ಮ ಪೇಜ್ ಅನ್ನು ಭಾರ ಮಾಡುವುದಿಲ್ಲ. ಹೆಚ್ಚಿನ ಆನ್ಲೈನ್ formatter ಗಳು ನೀವು ಪೇಜ್ ತೆರೆದ ಕ್ಷಣವೇ ತಮ್ಮ ಇಡೀ ಲೈಬ್ರರಿ ಲೋಡ್ ಮಾಡುತ್ತವೆ. ಇದು js-beautify ಅನ್ನು ನೀವು ಬ್ಯೂಟಿಫೈ ಕ್ಲಿಕ್ ಮಾಡಿದಾಗ ಅಥವಾ Live mode ಚಾಲು ಮಾಡಿದಾಗ ಮಾತ್ರ lazy-load ಮಾಡುತ್ತದೆ, ಆದ್ದರಿಂದ ಪೇಜ್ ತೆರೆಯುವುದು ಕೆಲವು ನೂರು ಕಿಲೋಬೈಟ್ಗಳ ಬದಲು ಕೆಲವು ಕಿಲೋಬೈಟ್ಗಳ ವೆಚ್ಚವಾಗುತ್ತದೆ, ಮತ್ತು ಆರಂಭಿಕ render ವೇಗವಾಗಿ ಉಳಿಯುತ್ತದೆ.
- ಏನೂ ನಿಮ್ಮ ಬ್ರೌಸರ್ ಬಿಡುವುದಿಲ್ಲ. ಬ್ಯೂಟಿಫೈಯರ್ ಸಂಪೂರ್ಣವಾಗಿ ನಿಮ್ಮ ಸಾಧನದಲ್ಲಿ ಚಲಾಯಿಸಲ್ಪಡುತ್ತದೆ. ನಿಮ್ಮ ಕೋಡ್ ಎಂದಿಗೂ server ಗೆ upload ಆಗುವುದಿಲ್ಲ, ಇದು ನೀವು ಪರಿಶೀಲಿಸುತ್ತಿರುವ script ಯಾವುದೋ client ಗೆ ಸೇರಿದ್ದಾಗ, ಆಂತರಿಕ API paths ಹೊಂದಿದ್ದಾಗ ಅಥವಾ ಗೌಪ್ಯತಾ ಒಪ್ಪಂದದ ಅಡಿಯಲ್ಲಿ ಬಂದಾಗ ಮುಖ್ಯವಾಗುತ್ತದೆ.
ಸಾಮಾನ್ಯ ಅನ್ವಯಗಳು
ಓದಲು ಬರೆಯದ ಕೋಡ್ ಅನ್ನು ಯಾರಾದರೂ ಓದಬೇಕಾದಾಗ JavaScript ಬ್ಯೂಟಿಫೈ ಮಾಡುವುದು ಎದುರಾಗುತ್ತದೆ.
- Production ಡೀಬಗ್: ನೀವು ಬೇರೆ ರೀತಿ ಡಿಕೋಡ್ ಮಾಡಲಾಗದ error stack ಹಿಂದಿನ function ಅನ್ನು ಹುಡುಕಲು Network ಟ್ಯಾಬ್ನಿಂದ ಎಳೆದ ಮಿನಿಫೈಡ್ bundle ಅನ್ನು ಪೇಸ್ಟ್ ಮಾಡಿ.
- ಕೋಡ್ ರಿವ್ಯೂ ಸಿದ್ಧತೆ: 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 ಗಳನ್ನು ಮುಟ್ಟುವ ಏಕೈಕ ಆಯ್ಕೆ "ಕಾಣೆಯಾದ ಸೆಮಿಕೋಲನ್ ಸೇರಿಸಿ," ಇದು automatic semicolon insertion runtime ನಲ್ಲಿ ಹೇಗಿದ್ದರೂ ಸೇರಿಸುತ್ತಿದ್ದ statement terminators ಅನ್ನು ಸೇರಿಸುತ್ತದೆ, ಕೋಡ್ ಅನ್ನು ನಂತರ ಮಿನಿಫೈ ಮಾಡಲು ಸುರಕ್ಷಿತಗೊಳಿಸುತ್ತದೆ.
ಬ್ರೇಸ್-ಶೈಲಿ ಆಯ್ಕೆಗಳ ಅರ್ಥವೇನು?
Collapse ತೆರೆಯುವ ಬ್ರೇಸ್ ಅನ್ನು statement ನ ಅದೇ ಸಾಲಿನಲ್ಲಿ ಇಡುತ್ತದೆ (if (x) {), ಇದು ಸಾಮಾನ್ಯ JavaScript ಸಂಪ್ರದಾಯ. Expand ಪ್ರತಿ ತೆರೆಯುವ ಬ್ರೇಸ್ ಅನ್ನು ತನ್ನದೇ ಸಾಲಿಗೆ ಇಳಿಸುತ್ತದೆ (Allman ಶೈಲಿ). End-expand ತೆರೆಯುವ ಬ್ರೇಸ್ ಅನ್ನು ಜೋಡಿಸಿ ಇಡುತ್ತದೆ ಆದರೆ else ಮತ್ತು catch ಅನ್ನು ಮುಚ್ಚುವ ಬ್ರೇಸ್ ನಂತರ ಹೊಸ ಸಾಲಿನಲ್ಲಿ ಇಡುತ್ತದೆ.
ಬ್ರೌಸರ್-ಬದಿಯ JavaScript ಬ್ಯೂಟಿಫಿಕೇಶನ್ ನಿಮಗೆ build step ಅಥವಾ upload ಇಲ್ಲದೆ ಓದಬಲ್ಲ ಕೋಡ್ ನೀಡುತ್ತದೆ. ಮಿನಿಫೈಡ್ ಅಥವಾ ಅಸ್ತವ್ಯಸ್ತ script ಅನ್ನು ಪೇಸ್ಟ್ ಮಾಡಿ, ನಿಮ್ಮ indentation ಮತ್ತು ಬ್ರೇಸ್ ಶೈಲಿ ಆಯ್ಕೆ ಮಾಡಿ, ನಂತರ ಫಲಿತಾಂಶವನ್ನು copy ಅಥವಾ download ಮಾಡಿ. ಏನೂ ನಿಮ್ಮ ಸಾಧನ ಬಿಡುವುದಿಲ್ಲ, ಯಾವುದೇ account ಇಲ್ಲ, ಮತ್ತು ಲೈಬ್ರರಿ ನೀವು ಕೇಳಿದಾಗ ಮಾತ್ರ load ಆಗುತ್ತದೆ — ಆದ್ದರಿಂದ ಈ ಪೇಜ್ ತೆರೆಯುವುದು ನಿಮಗೆ ಒಂದು megabyte ಅಲ್ಲ, ಕೆಲವು ಕಿಲೋಬೈಟ್ಗಳ ವೆಚ್ಚವಾಗುತ್ತದೆ.