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 ફેરફારો બતાવે છે.
- આ સાધન તમારા page પર ભાર નથી નાખતું. મોટાભાગના ઓનલાઇન formatters પેજ ખોલતા જ આખી લાઇબ્રેરી લોડ કરે છે. આ ફક્ત ત્યારે js-beautify ને lazy-load કરે છે જ્યારે તમે બ્યૂટિફાઈ ક્લિક કરો અથવા Live mode ચાલુ કરો, જેથી પેજ ખોલવાનો ખર્ચ થોડા સોને બદલે થોડા કિલોબાઇટ થાય છે, અને પ્રારંભિક render ઝડપી રહે છે.
- કંઈ તમારું બ્રાઉઝર છોડતું નથી. બ્યૂટિફાયર સંપૂર્ણપણે તમારા device પર ચાલે છે. તમારો કોડ ક્યારેય 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 અને કૌંસ શૈલી પસંદ કરો, પછી પરિણામ કૉપી કે ડાઉનલોડ કરો. કંઈ તમારું device છોડતું નથી, કોઈ account નથી, અને લાઇબ્રેરી ફક્ત ત્યારે જ લોડ થાય છે જ્યારે તમે કહો — તેથી આ પેજ ખોલવાનો ખર્ચ તમને એક megabyte નહીં, થોડા કિલોબાઇટ થાય છે.