JavaScript embelleren _

Hoe JavaScript-embellissement werkt

De beautifier leest je code teken voor teken, houdt bij hoe diep elke instructie is genest en emitteert die opnieuw met consistente spatiëring. Het verandert nooit wat de code doet — alleen hoe het eruitziet.

1. Tokeniseren. De bibliotheek scant je invoer naar een stroom van tokens: sleutelwoorden, identificatoren, strings, operatoren en leestekens. Strings, template literals en reguliere-expressieletterwoorden worden als enkelvoudige eenheden herkend, zodat een accolade in een string nooit wordt aangezien voor een blokscheidingsteken.
2. Nesting bijhouden. Terwijl de beautifier de tokenstroom doorloopt, houdt hij een lopend inspringniveau bij. Elke openende accolade, haakje of ronde haak verhoogt het niveau; elke sluitende verlaagt het. Die diepte bepaalt hoeveel inspringeenheden voor elke teruggestuurde regel staan.
3. Je opties toepassen. Je keuze voor inspringing (2 spaties, 4 spaties of een tab) stelt de breedte van één niveau in. De accoladesstijl bepaalt of een openende accolade bij de instructie ervoor blijft of naar een eigen regel valt. Het limiet voor lege regels perst lange reeksen lege regels samen tot het maximum dat je kiest.
4. Opnieuw emitteren. Ten slotte drukt de formatter de tokens af met de inspringing en regelafbrekingen die het heeft berekend, en voegt optioneel de puntkomma's toe die automatisch puntkomma-invoeging in de runtime had geleverd. Het resultaat is hetzelfde programma, opgemaakt zodat een mens het kan lezen.

Waarom JavaScript embelleren

• Geminifieerde code lezen. Productiebundles worden op één regel verzonden met variabelenamen van één letter. Embelleren herstelt de regelafbrekingen en inspringing zodat je een bug kunt traceren naar de instructie die het veroorzaakte, zelfs zonder een source map.
• Inconsistente bestanden opruimen. Code die meerdere mensen hebben aangeraakt drijft naar gemengde inspringing en accoladesstijlen. Één doorgang door de beautifier normaliseert het hele bestand naar één opmaak, waardoor de volgende diff echte logische wijzigingen toont in plaats van witruimteruis.
• Dit gereedschap belast je pagina niet. De meeste online formatters laden hun volledige bibliotheek zodra je de pagina opent. Deze laadt js-beautify lazy alleen wanneer je op Embelleren klikt of Live-modus inschakelt, zodat de pagina openen een paar kilobytes kost in plaats van een paar honderd, en de initiële weergave snel blijft.
• Niets verlaat je browser. De beautifier draait volledig op je apparaat. Je code wordt nooit naar een server geüpload, wat belangrijk is wanneer het script dat je inspecteert van een klant is, interne API-paden bevat of onder een geheimhoudingsovereenkomst valt.

Veelvoorkomende toepassingen

JavaScript embelleren komt naar voren wanneer iemand code moet lezen die niet geschreven was om gelezen te worden.

• Productie debuggen: plak een geminifieerde bundle uit het Netwerk-tabblad om de functie achter een foutstack te vinden die je anders niet kunt ontcijferen.
• Code review voorbereiden: formatteer het inconsistent ingesprongen bestand van een bijdrager voordat je de pull request opent zodat reviewers de logica zien, niet de opmaakvariatie.
• Beveiligings- en complianceaudits: vouw een analytisch of advertentiesnippet van derden uit om precies te bevestigen wat het doet voordat het live gaat.

Een uitgewerkt voorbeeld

Neem een geminifieerde one-liner: function f(a){if(a){return a*2}else{return 0}}. Plak die hierboven met inspringing ingesteld op 2 spaties en accoladesstijl Collapse, klik dan op Embelleren. Je krijgt een leesbaar blok terug: function f(a) {, dan een ingesprongen if (a) {, de instructie return a * 2; één niveau dieper genest, en de bijbehorende accolades eronder uitgelijnd. Schakel de accoladesstijl naar Expand en elke openende accolade valt naar een eigen regel. Verander de inspringing naar Tabs en elk niveau verschuift van twee spaties naar een tab-teken. De structuur is identiek; alleen de opmaak verandert.

FAQ

Draait dit in mijn browser?

Ja. De js-beautify-bibliotheek wordt lazy geladen de eerste keer dat je op Embelleren klikt of Live-modus inschakelt, daarna gecachet. Je code verlaat de pagina nooit — geen serverroundtrip, geen upload.

Is embelleren hetzelfde als deminificeren?

Het herstelt leesbare opmaak — inspringing, regelafbrekingen en spatiëring — maar kan de oorspronkelijke variabelenamen of opmerkingen die minificatie heeft verwijderd niet terugbrengen. Als er een source map bestaat, kunnen de DevTools van je browser de originele namen herstellen; een beautifier alleen werkt met wat in het bestand staat.

Verandert embelleren hoe mijn code zich gedraagt?

Nee. Embellissement voegt alleen witruimte en regelafbrekingen toe en verwijdert die; het programma draait identiek. De enige optie die tokens aanraakt is "Ontbrekende puntkomma's toevoegen", die de instructieafsluitingen invoegt die automatisch puntkomma-invoeging hoe dan ook in de runtime zou hebben toegevoegd, waardoor de code veilig is om later te minificeren.

Wat betekenen de accoladesstijlopties?

Collapse houdt een openende accolade op dezelfde regel als de instructie (if (x) {), wat de gangbare JavaScript-conventie is. Expand plaatst elke openende accolade op een eigen regel (de Allman-stijl). End-expand houdt de openende accolade aangehecht maar plaatst else en catch op een nieuwe regel na de sluitende accolade.

JavaScript embelleren aan de browserkant geeft je leesbare code zonder een bouwstap of upload. Plak een geminificeerd of rommelig script, kies je inspringing en accoladesstijl, kopieer of download dan het resultaat. Niets verlaat je apparaat, er is geen account nodig en de bibliotheek laadt alleen wanneer je erom vraagt — het openen van deze pagina kost je een paar kilobytes, niet een megabyte.