JavaScript அழகுபடுத்துதல் எவ்வாறு செயல்படுகிறது
அழகுபடுத்தி உங்கள் கோடை எழுத்தெழுத்தாக வாசிக்கிறது, ஒவ்வொரு statement எவ்வளவு ஆழமாக nested என்று கண்காணிக்கிறது, மற்றும் சீரான இடைவெளியுடன் மீண்டும் வெளியிடுகிறது. கோட் என்ன செய்கிறது என்பது ஒருபோதும் மாறாது — அது எப்படி தெரிகிறது மட்டுமே மாறுகிறது.
- டோக்கனைஸ். library உங்கள் உள்ளீட்டை tokens நீரோட்டமாக scan செய்கிறது: keywords, identifiers, strings, operators மற்றும் punctuation. Strings, template literals மற்றும் regular-expression literals ஒற்றை அலகுகளாக அங்கீகரிக்கப்படுகின்றன, எனவே string-க்குள் உள்ள brace-ஐ block delimiter என்று தவறாக எடுக்க முடியாது.
- உள்ளமைவு கண்காணிப்பு. token நீரோட்டத்தில் நடக்கும்போது, அழகுபடுத்தி ஒரு நடப்பு உள்தள்ளல் நிலையை வைத்திருக்கிறது. ஒவ்வொரு திறக்கும் brace, bracket அல்லது parenthesis நிலையை ஆழமாக்குகிறது; ஒவ்வொரு மூடுவது அதை மீண்டும் pop செய்கிறது. அந்த ஆழம் திரும்பப் பெறும் ஒவ்வொரு வரியின் முன்னால் எத்தனை உள்தள்ளல் அலகுகள் இருக்கும் என்று தீர்மானிக்கிறது.
- உங்கள் விருப்பங்களை பயன்படுத்துங்கள். உங்கள் உள்தள்ளல் தேர்வு (2 இடைவெளிகள், 4 இடைவெளிகள், அல்லது tab) ஒரு நிலையின் அகலத்தை அமைக்கிறது. Brace-style அமைப்பு திறக்கும் brace முந்தைய statement-ஐ இறுக்கியதா அல்லது சொந்த வரியில் இறங்குமா என்பதை தீர்மானிக்கிறது. வெற்று வரி வரம்பு நீண்ட காலி வரிகளை நீங்கள் தேர்ந்தெடுத்த அளவுக்கு சுருக்குகிறது.
- மீண்டும் வெளியிடுதல். இறுதியில் formatter நிர்ணயிக்கப்பட்ட உள்தள்ளல் மற்றும் வரி முறிவுகளுடன் tokens-ஐ மீண்டும் print செய்கிறது, விருப்பமாக automatic semicolon insertion runtime-ல் வழங்கும் semicolons-ஐ சேர்க்கிறது. முடிவு அதே program, ஒரு மனிதன் படிக்கக்கூடிய வகையில் அமைக்கப்பட்டது.
JavaScript-ஐ ஏன் அழகுபடுத்த வேண்டும்
- மினிஃபை செய்யப்பட்ட கோடை வாசிக்கவும். Production bundles ஒரே வரியில் ஒற்றை-எழுத்து variable பெயர்களுடன் ship ஆகின்றன. அழகுபடுத்துதல் வரி முறிவுகள் மற்றும் உள்தள்ளலை மீட்டெடுக்கிறது, source map இல்லாமலும் ஒரு bug-ஐ அதை உண்டாக்கிய statement வரை கண்டுபிடிக்கலாம்.
- சீரற்ற கோப்புகளை ஒழுங்குபடுத்தவும். பலர் தொட்ட கோட் கலந்த உள்தள்ளல் மற்றும் brace styles-க்கு நகர்கிறது. அழகுபடுத்தி வழியாக ஒரு pass முழு கோப்பையும் ஒரே layout-க்கு normalize செய்கிறது, அடுத்த diff whitespace noise-க்கு பதிலாக உண்மையான logic மாற்றங்களை காண்பிக்கும்.
- இந்தக் கருவி உங்கள் பக்கத்தை மெதுவாக்காது. பெரும்பாலான ஆன்லைன் formatters பக்கம் திறக்கும்போதே முழு library-ஐ load செய்கின்றன. இந்தக் கருவி js-beautify-ஐ நீங்கள் Beautify கிளிக் செய்யும்போது அல்லது நேரடி பயன்முறை ஆன் செய்யும்போது மட்டுமே lazy-load செய்கிறது, எனவே பக்கம் திறக்க சில நூறு kilobytes-க்கு பதிலாக சில kilobytes மட்டுமே தேவை.
- எதுவும் உங்கள் உலாவியை விட்டு வெளியே செல்வதில்லை. அழகுபடுத்தி முழுவதும் உங்கள் சாதனத்தில் இயங்குகிறது. உங்கள் கோட் எப்போதும் server-க்கு பதிவேற்றம் ஆவதில்லை, இது முக்கியமானது குறிப்பாக நீங்கள் பரிசோதிக்கும் script ஒரு client-க்கு சொந்தமானதாக இருந்தால், உள்ளக API பாதைகள் இருந்தால், அல்லது இரகசியத்தன்மை ஒப்பந்தத்தின் கீழ் இருந்தால்.
பொதுவான பயன்பாடுகள்
JavaScript-ஐ அழகுபடுத்துவது தேவைப்படுவது யாரேனும் படிக்கும் நோக்கத்திற்காக எழுதப்படாத கோடை படிக்க வேண்டியிருக்கும்போது.
- Production பிழைதிருத்தம்: Network tab-ல் இருந்து எடுத்த மினிஃபை செய்யப்பட்ட bundle-ஐ ஒட்டி, பிழை stack-ல் உள்ள function-ஐ கண்டுபிடியுங்கள் — இல்லையேல் decode செய்வது கடினம்.
- Code review தயாரிப்பு: pull request திறப்பதற்கு முன்பு contributor-ன் சீரற்று உள்தள்ளப்பட்ட கோப்பை reformat செய்யுங்கள், reviewers layout மாற்றங்கள் அல்ல logic பாருவார்கள்.
- பாதுகாப்பு மற்றும் இணக்க தணிக்கைகள்: மூன்றாம் தரப்பு analytics அல்லது விளம்பர snippet-ஐ விரிவாக்கி அது நேரலைக்கு செல்வதற்கு முன்பு சரியாக என்ன செய்கிறது என்று உறுதிப்படுத்திக்கொள்ளுங்கள்.
ஒரு விளக்க உதாரணம்
ஒரு மினிஃபை செய்யப்பட்ட ஒரே வரியை எடுங்கள்: function f(a){if(a){return a*2}else{return 0}}. 2 இடைவெளிகள் உள்தள்ளல் மற்றும் Collapse brace style-உடன் மேலே ஒட்டி Beautify கிளிக் செய்யுங்கள். படிக்கக்கூடிய block திரும்பிவருகிறது: function f(a) {, பின்னர் உள்தள்ளப்பட்ட if (a) {, ஒரு நிலை ஆழமாக return a * 2; statement, மற்றும் கீழே பொருந்தும் braces. Brace style-ஐ Expand-க்கு மாற்றினால் ஒவ்வொரு திறக்கும் brace சொந்த வரியில் வருகிறது. Indentation-ஐ Tabs-க்கு மாற்றினால் ஒவ்வொரு நிலையும் இரண்டு இடைவெளிகளில் இருந்து tab character-க்கு மாறுகிறது. அமைப்பு ஒன்றே; layout மட்டும் மாறுகிறது.
FAQ
இது என் உலாவியில் இயங்குகிறதா?
ஆம். js-beautify library முதல் முறை Beautify கிளிக் செய்யும்போது அல்லது நேரடி பயன்முறை enable செய்யும்போது lazy-load ஆகிறது, பின்னர் cache ஆகிறது. உங்கள் கோட் பக்கத்தை விட்டு வெளியே செல்வதே இல்லை — server round-trip இல்லை, பதிவேற்றம் இல்லை.
அழகுபடுத்துவது un-minifying-க்கு சமானமா?
இது படிக்கக்கூடிய formatting-ஐ மீட்டெடுக்கிறது — உள்தள்ளல், வரி முறிவுகள் மற்றும் இடைவெளி — ஆனால் மினிஃபிகேஷன் அகற்றிய அசல் variable பெயர்கள் அல்லது கருத்துரைகளை திரும்பக் கொண்டுவர முடியாது. source map இருந்தால் உங்கள் browser DevTools அசல் பெயர்களை மீட்டெடுக்கலாம்; தனித்த அழகுபடுத்தி கோப்பில் உள்ளதுடன் மட்டுமே செயல்படுகிறது.
அழகுபடுத்துவது என் கோட் செயல்பாட்டை மாற்றுமா?
இல்லை. அழகுபடுத்துதல் வெற்று இடங்கள் மற்றும் வரி முறிவுகளை மட்டும் சேர்க்கிறது அல்லது நீக்குகிறது; program அதே வழியில் இயங்குகிறது. tokens-ஐ தொடும் ஒரே ஒரு விருப்பம் "Add missing semicolons", இது automatic semicolon insertion runtime-ல் வழங்கும் statement terminators-ஐ செருகுகிறது, கோடை பின்னர் பாதுகாப்பாக மினிஃபை செய்ய அனுமதிக்கிறது.
பிரேஸ்-ஸ்டைல் விருப்பங்களின் பொருள் என்ன?
Collapse திறக்கும் brace-ஐ statement-ன் அதே வரியில் வைக்கிறது (if (x) {), இது சாதாரண JavaScript convention. Expand ஒவ்வொரு திறக்கும் brace-ஐ சொந்த வரியில் வைக்கிறது (Allman style). End-expand திறக்கும் brace-ஐ இணைக்கப்பட்டதாக வைக்கிறது ஆனால் மூடும் brace-க்கு பிறகு else மற்றும் catch-ஐ புதிய வரியில் வைக்கிறது.
Browser-side JavaScript அழகுபடுத்துதல் build step அல்லது பதிவேற்றம் இல்லாமல் படிக்கக்கூடிய கோடை வழங்குகிறது. மினிஃபை செய்யப்பட்ட அல்லது ஒழுங்கற்ற script ஒட்டுங்கள், உங்கள் உள்தள்ளல் மற்றும் brace style தேர்ந்தெடுங்கள், பின்னர் முடிவை நகலெடுங்கள் அல்லது பதிவிறக்குங்கள். எதுவும் உங்கள் சாதனத்தை விட்டு வெளியேறுவதில்லை, கணக்கு தேவையில்லை, library நீங்கள் கேட்கும்போது மட்டுமே load ஆகிறது — எனவே இந்தப் பக்கம் திறப்பதால் megabyte அல்ல, சில kilobytes மட்டுமே செலவாகும்.