Jak funguje zkrášlení JavaScriptu
Beautifier čte váš kód znak po znaku, sleduje, jak hluboko je každý příkaz vnořen, a znovu jej vydává s konzistentními mezerami. Nikdy nemění, co kód dělá — pouze jak vypadá.
- Tokenizace. Knihovna scanuje váš vstup do proudu tokenů: klíčová slova, identifikátory, řetězce, operátory a interpunkce. Řetězce, template literály a regexové literály jsou rozpoznány jako jednotlivé jednotky, takže závorka uvnitř řetězce není nikdy zaměněna za oddělovač bloku.
- Sledování vnoření. Při procházení token streamu si beautifier udržuje aktuální úroveň odsazení. Každá otevírací závorka, závorka nebo kulatá závorka posouvá úroveň hlouběji; každá zavírací ji posouvá zpět. Tato hloubka určuje, kolik odsazovacích jednotek je před každým řádkem, který dostanete zpět.
- Aplikace vašich voleb. Vaše volba odsazení (2 mezery, 4 mezery nebo tabulátor) nastavuje šířku jedné úrovně. Nastavení stylu závorek rozhoduje, zda otevírací závorka přiléhá k předchozímu příkazu nebo klesá na vlastní řádek. Limit prázdných řádků sráží dlouhé běhy prázdných řádků na vámi zvolený limit.
- Znovuvydání. Nakonec formátovač vytiskne tokeny zpět s odsazením a zalomením řádků, které vypočítal, volitelně doplní středníky, které by automatické vkládání středníků dodalo za běhu. Výsledkem je stejný program, rozložený tak, aby jej člověk mohl číst.
Proč zkrášlovat JavaScript
- Čtení minifikovaného kódu. Produkční balíčky jsou dodávány na jednom řádku s jednopísmennými názvy proměnných. Zkrášlení obnoví zalomení řádků a odsazení, takže můžete skutečně vysledovat chybu zpět k příkazu, který ji způsobil, i bez source mapy.
- Uspořádání nekonzistentních souborů. Kód, na kterém pracovalo několik lidí, driftuje do smíšeného odsazení a stylů závorek. Jeden průchod beautifierem normalizuje celý soubor do jediného layoutu, což způsobí, že příští diff ukáže skutečné logické změny místo šumu z bílých znaků.
- Tento nástroj nezatěžuje vaši stránku. Většina online formátovačů načte celou svou knihovnu ve chvíli, kdy stránku otevřete. Tento lazy-načítá js-beautify pouze při kliknutí na Zkrášlit nebo při zapnutí Živého režimu, takže otevření stránky stojí pár kilobajtů místo stovek a počáteční vykreslení zůstává rychlé.
- Nic neopouští váš prohlížeč. Beautifier běží zcela na vašem zařízení. Váš kód není nikdy nahrán na server, což je důležité, když skript, který prohlížíte, patří klientovi, obsahuje interní API cesty nebo podléhá dohodě o mlčenlivosti.
Běžná použití
Zkrášlení JavaScriptu přichází na řadu, kdykoli někdo potřebuje číst kód, který nebyl napsán pro čtení.
- Ladění v produkci: vložte minifikovaný balíček z panelu Network, abyste našli funkci za chybovým stackem, který jinak nelze dekódovat.
- Příprava code review: přeformátujte nekonzistentně odsazený soubor přispěvatele před otevřením pull requestu, aby recenzenti viděli logiku, nikoli změny layoutu.
- Bezpečnostní a compliance audity: rozbalte snippet analýzy nebo reklamy třetí strany, abyste potvrdili, co přesně dělá, než jde do provozu.
Příklad
Vezměte minifikovaný one-liner: function f(a){if(a){return a*2}else{return 0}}. Vložte jej výše s odsazením 2 mezery a stylem závorek Sbalený, pak klikněte na Zkrášlit. Získáte zpět čitelný blok: function f(a) {, pak odsazené if (a) {, příkaz return a * 2; vnořený o úroveň hlouběji a odpovídající závorky seřazené pod sebou. Přepněte styl závorek na Roztažený a každá otevírací závorka padne na vlastní řádek. Změňte odsazení na Tabulátory a každá úroveň se posune ze dvou mezer na tabulátor. Struktura je identická; mění se pouze layout.
FAQ
Běží to v mém prohlížeči?
Ano. Knihovna js-beautify je lazy-načtena při prvním kliknutí na Zkrášlit nebo při zapnutí Živého režimu a poté je cachována. Váš kód nikdy neopouští stránku — neprobíhá žádná komunikace se serverem ani nahrávání.
Je zkrášlení totéž co odminifikování?
Obnovuje čitelné formátování — odsazení, zalomení řádků a mezery — ale nemůže vrátit původní názvy proměnných nebo komentáře, které minifikace odstranila. Pokud existuje source mapa, DevTools vašeho prohlížeče mohou obnovit původní názvy; samotný beautifier pracuje pouze s tím, co je v souboru.
Změní zkrášlení chování mého kódu?
Ne. Zkrášlení pouze přidává a odebírá bílé znaky a zalomení řádků; program běží identicky. Jediná volba, která se dotýká tokenů, je "Doplnit chybějící středníky", která vkládá ukončovací znaky příkazů, které by automatické vkládání středníků stejně přidalo za běhu, čímž je kód bezpečný pro pozdější minifikaci.
Co znamenají možnosti stylu závorek?
Sbalený ponechává otevírací závorku na stejném řádku jako příkaz (if (x) {), což je běžná JavaScript konvence. Roztažený dává každou otevírací závorku na vlastní řádek (Allman styl). Koncově roztažený ponechává otevírací závorku připojenou, ale dává else a catch na nový řádek po zavírací závorce.
Zkrášlení JavaScriptu na straně prohlížeče vám dává čitelný kód bez build kroku nebo nahrávání. Vložte minifikovaný nebo nepřehledný skript, vyberte odsazení a styl závorek, pak zkopírujte nebo stáhněte výsledek. Nic neopouští vaše zařízení, není potřeba účet a knihovna se načítá pouze na vyžádání — takže otevření této stránky stojí pár kilobajtů, ne megabajt.