Hogyan működik a JavaScript szépítés
A szépítő karakterenként olvassa a kódod, nyomon követi, hogy az egyes utasítások milyen mélyen vannak beágyazva, és újra kibocsátja konzisztens szóközökkel. Soha nem változtatja meg, hogy a kód mit csinál — csak azt, hogy hogyan néz ki.
- Tokenizálás. A könyvtár a bemenetedet tokenek folyamává szkenneli: kulcsszavak, azonosítók, karakterláncok, operátorok és írásjelek. A karakterláncok, template literálok és reguláris kifejezés literálok egységes egységként kerülnek felismerésre, így egy karakterláncon belüli kapcsos zárójel soha nem téveszthető össze egy blokk határolóval.
- Beágyazás követése. Ahogy halad a token folyamban, a szépítő folyamatos behúzási szintet tart. Minden nyitó kapcsos zárójel, szögletes zárójel vagy zárójel mélyebbre tolja a szintet; minden záró visszahozza. Ez a mélység dönti el, hány behúzási egység kerül a visszakapott sorok elé.
- Beállításaid alkalmazása. A behúzási választásod (2 szóköz, 4 szóköz vagy egy tab) beállítja egy szint szélességét. A kapcsos zárójel stílus beállítás eldönti, hogy egy nyitó kapcsos zárójel az előző utasításhoz simul-e, vagy a saját sorára kerül. Az üres sor korlát összezsugorítja a hosszú üres sorozatokat a kiválasztott korlátra.
- Újrakibocsátás. Végül a formázó visszanyomtatja a tokeneket a kidolgozott behúzással és sortörésekkel, opcionálisan hozzáadva azokat a pontosvesszőket, amiket az automatikus pontosvessző beszúrás futásidőben biztosított volna. Az eredmény ugyanaz a program, úgy elrendezve, hogy egy ember el tudja olvasni.
Miért érdemes JavaScriptet szépíteni
- Minifikált kód olvasása. A termelési csomagok egy sorban utaznak egyszerűsített változónevekkel. A szépítés visszaállítja a sortöréseket és a behúzást, így ténylegesen vissza tudsz vezetni egy hibát az azt okozó utasításig, még forrástérkép nélkül is.
- Inkonzisztens fájlok rendbetétele. A kód, amit többen is érintettek, vegyes behúzásba és kapcsos zárójel stílusba csúszik. Egyetlen menet a szépítőn keresztül normalizálja az egész fájlt egyetlen elrendezésre, ami a következő diff-ben valódi logikai változásokat mutat, nem pedig szóköz zajt.
- Ez az eszköz nem terheli az oldaladat. A legtöbb online formázó a teljes könyvtárat betölti, amint megnyitod az oldalt. Ez lustán tölti be a js-beautify-t csak akkor, amikor rákattintasz a Szépítés gombra vagy bekapcsolod az Élő módot, így az oldal megnyitása néhány kilobájtba kerül a néhány száz helyett, és a kezdeti renderelés gyors marad.
- Semmi sem hagyja el a böngésződet. A szépítő teljesen az eszközödön fut. A kódod soha nem töltődik fel szerverre, ami számít, amikor a vizsgált szkript egy ügyfélhez tartozik, belső API útvonalakat tartalmaz, vagy titoktartási megállapodás alá esik.
Gyakori felhasználások
A JavaScript szépítés akkor merül fel, amikor valakinek el kell olvasnia olyan kódot, amit nem olvasásra írtak.
- Éles hibakeresés: illessz be egy minifikált csomagot a Network fülről, hogy megtaláld a függvényt a hibaverem mögött, amit egyébként nem tudnál dekódolni.
- Kódellenőrzés előkészítés: formázd át egy közreműködő inkonzisztensen behúzott fájlját a pull request megnyitása előtt, hogy a véleményezők logikát lássanak, ne elrendezési zajt.
- Biztonsági és megfelelőségi auditok: bonts ki egy harmadik féltől származó analitikai vagy hirdetési kódrészletet, hogy pontosan megerősítsd, mit csinál, mielőtt élesbe kerül.
Egy gyakorlati példa
Vegyünk egy minifikált egysorost: function f(a){if(a){return a*2}else{return 0}}. Illeszd be fent 2 szóköz behúzással és Összecsukás kapcsos zárójel stílussal, majd kattints a Szépítés gombra. Visszakapsz egy olvasható blokkot: function f(a) {, majd egy behúzott if (a) {, a return a * 2; utasítás eggyel mélyebben beágyazva, és a hozzá illő kapcsos zárójelek alatta sorakozva. Válts a Kibontás kapcsos zárójel stílusra, és minden nyitó kapcsos zárójel a saját sorára kerül. Válts Tabok behúzásra és minden szint két szóközről egy tab karakterre vált. A szerkezet azonos; csak az elrendezés változik.
FAQ
Ez a böngészőmben fut?
Igen. A js-beautify könyvtár lustán töltődik be, amikor először kattintasz a Szépítés gombra vagy bekapcsolod az Élő módot, majd gyorsítva marad. A kódod sosem hagyja el az oldalt — nincs szerver kör és nincs feltöltés.
A szépítés ugyanaz, mint a visszaminifikálás?
Visszaállítja az olvasható formázást — behúzást, sortöréseket és szóközöket — de nem tudja visszahozni az eredeti változóneveket vagy megjegyzéseket, amiket a minifikáció eltávolított. Ha létezik forrástérkép, a böngésződ DevTools-ja vissza tudja állítani az eredeti neveket; egy szépítő önmagában csak azzal dolgozik, ami a fájlban van.
A szépítés megváltoztatja, hogyan viselkedik a kódom?
Nem. A szépítés csak szóközöket és sortöréseket ad hozzá és távolít el; a program azonosan fut. Az egyetlen opció, ami tokenekhez nyúl, a "Hiányzó pontosvesszők hozzáadása", ami azokat az utasításlezárókat illeszti be, amiket az automatikus pontosvessző beszúrás futásidőben amúgy is hozzáadott volna, így a kód biztonságosan minifikálható később.
Mit jelentenek a kapcsos zárójel stílus opciók?
Az Összecsukás a nyitó kapcsos zárójelet az utasítással egy sorban tartja (if (x) {), ami a gyakori JavaScript konvenció. A Kibontás minden nyitó kapcsos zárójelet a saját sorára tesz (Allman stílus). A Vég-kibontás megtartja a nyitó kapcsos zárójelet, de az else és catch elemeket a záró kapcsos zárójel után új sorba teszi.
A böngészőoldali JavaScript szépítés olvasható kódot ad build lépés vagy feltöltés nélkül. Illessz be egy minifikált vagy rendetlen szkriptet, válaszd ki a behúzást és a kapcsos zárójel stílust, majd másold ki vagy töltsd le az eredményt. Semmi sem hagyja el az eszközödet, nincs fiók, és a könyvtár csak akkor töltődik be, amikor kéred — így az oldal megnyitása néhány kilobájtba kerül, nem egy megabájtba.