JavaScript güzelleştirme nasıl çalışır
Güzelleştirici, kodunuzu karakter karakter okur, her deyimin ne kadar iç içe olduğunu izler ve tutarlı boşluklarla yeniden yayar. Kodun ne yaptığını asla değiştirmez — yalnızca nasıl göründüğünü.
- Belirtece ayırma. Kütüphane girdinizi bir belirteç akışına tarar: anahtar sözcükler, tanımlayıcılar, dizeler, operatörler ve noktalama işaretleri. Dizeler, şablon literalleri ve düzenli ifade literalleri tek birim olarak tanınır; bu nedenle bir dize içindeki ayraç hiçbir zaman bir blok sınırlayıcı ile karıştırılmaz.
- İç içe geçmeyi izleme. Belirteç akışını dolaşırken güzelleştirici çalışan bir girinti düzeyi tutar. Her açılan süslü ayraç, köşeli ayraç veya parantez düzeyi derinleştirir; her kapanan onu geri alır. Bu derinlik, geri aldığınız her satırın önünde kaç girinti birimi olacağına karar verir.
- Seçenekleri uygulama. Girinti seçiminiz (2 boşluk, 4 boşluk veya sekme) bir düzeyin genişliğini belirler. Ayraç stili ayarı, açılan süslü ayracın kendisinden önceki deyime yapışıp yapışmayacağına ya da kendi satırına düşüp düşmeyeceğine karar verir. Boş satır sınırı, uzun boş satır dizilerini seçtiğiniz limite kadar daraltır.
- Yeniden yayma. Son olarak biçimlendirici belirteçleri hesapladığı girinti ve satır sonlarıyla geri yazdırır; isteğe bağlı olarak otomatik noktalı virgül eklemenin çalışma zamanında sağlayacağı noktalı virgülleri ekler. Sonuç, bir insanın okuyabileceği şekilde düzenlenmiş aynı programdır.
JavaScript neden güzelleştirilir
- Küçültülmüş kodu okuma. Üretim paketleri tek harfli değişken adlarıyla tek satırda gelir. Güzelleştirme satır sonlarını ve girinti düzeyini geri yükler; böylece bir kaynak haritası olmasa bile bir hatayı neden olduğu deyime kadar gerçekten izleyebilirsiniz.
- Tutarsız dosyaları düzenleme. Birden fazla kişinin dokunduğu kod, karışık girinti ve ayraç stillerine sürüklenir. Güzelleştirici üzerinden tek bir geçiş tüm dosyayı tek bir düzene normalleştirir; bu da bir sonraki farkın boşluk gürültüsü yerine gerçek mantık değişikliklerini göstermesini sağlar.
- Bu araç sayfanıza vergi yüklemez. Çoğu çevrimiçi biçimlendirici, sayfayı açar açmaz tüm kütüphanesini yükler. Bu araç js-beautify'ı yalnızca Güzelleştir'e tıkladığınızda veya Canlı modu açtığınızda geç yükler; bu nedenle sayfayı açmak birkaç yüz yerine birkaç kilobayta mal olur ve ilk oluşturma hızlı kalır.
- Hiçbir şey tarayıcınızı terk etmez. Güzelleştirici tamamen cihazınızda çalışır. Kodunuz hiçbir zaman bir sunucuya yüklenmez; bu, incelediğiniz betik bir müşteriye ait olduğunda, dahili API yolları içerdiğinde veya bir gizlilik anlaşması kapsamında olduğunda önem taşır.
Yaygın uygulamalar
JavaScript güzelleştirme, birinin okunmak için yazılmamış kodu okuması gerektiğinde ortaya çıkar.
- Üretim hata ayıklama: Aksi takdirde çözemeyeceğiniz bir hata yığınının arkasındaki işlevi bulmak için Ağ sekmesinden çekilen küçültülmüş bir paketi yapıştırın.
- Kod inceleme hazırlığı: Gözden geçirenler düzen değil mantık görsün diye çekme isteğini açmadan önce bir katılımcının tutarsız girintili dosyasını yeniden biçimlendirin.
- Güvenlik ve uyumluluk denetimleri: Yayına girmeden önce tam olarak ne yaptığını doğrulamak için üçüncü taraf bir analitik veya reklam snippet'ini genişletin.
Uygulamalı bir örnek
Küçültülmüş bir tek satır alın: function f(a){if(a){return a*2}else{return 0}}. Girinti 2 boşluk ve ayraç stili Daralt olarak ayarlanmışken yukarıya yapıştırın, ardından Güzelleştir'e tıklayın. Okunabilir bir blok geri alırsınız: function f(a) {, ardından girintili if (a) {, bir düzey daha derin iç içe geçmiş return a * 2; deyimi ve altında hizalanmış eşleşen kapatma ayraçları. Ayraç stilini Genişlet olarak değiştirin; her açılan süslü ayraç kendi satırına düşer. Girinti'yi Sekmelere değiştirin; her düzey iki boşluktan bir sekme karakterine geçer. Yapı aynıdır; yalnızca düzen değişir.
FAQ
Bu tarayıcımda mı çalışıyor?
Evet. js-beautify kütüphanesi, Güzelleştir'e ilk tıkladığınızda veya Canlı modu etkinleştirdiğinizde geç yüklenir, ardından önbelleğe alınır. Kodunuz hiçbir zaman sayfayı terk etmez — sunucu ile gidiş-dönüş veya yükleme yoktur.
Güzelleştirme ile küçültmeyi geri alma aynı şey mi?
Okunabilir biçimlendirmeyi — girinti, satır sonları ve boşlukları — geri yükler; ancak küçültmenin kaldırdığı orijinal değişken adlarını veya yorumları getiremez. Bir kaynak haritası varsa tarayıcınızın DevTools'u orijinal adları kurtarabilir; güzelleştirici tek başına yalnızca dosyada bulunanla çalışır.
Güzelleştirme kodumun davranışını değiştirir mi?
Hayır. Güzelleştirme yalnızca boşluk ve satır sonları ekler ve kaldırır; program aynı şekilde çalışır. Belirteçlere dokunan tek seçenek "Eksik noktalı virgülleri ekle" seçeneğidir; bu, otomatik noktalı virgül eklemenin çalışma zamanında zaten ekleyeceği deyim sonlandırıcıları ekler ve kodu daha sonra güvenle küçültülebilir kılar.
Ayraç stili seçenekleri ne anlama gelir?
Daralt, açılan süslü ayracı deyimle aynı satırda tutar (if (x) {); bu yaygın JavaScript kuralıdır. Genişlet her açılan süslü ayracı kendi satırına düşürür (Allman stili). Sonda genişlet açılan ayracı deyime yapışık tutar ancak else ve catch'i kapatan ayracın ardından yeni bir satıra koyar.
Tarayıcı taraflı JavaScript güzelleştirme, bir derleme adımı veya yükleme olmadan size okunabilir kod sağlar. Küçültülmüş veya dağınık bir betiği yapıştırın, girinti ve ayraç stilinizi seçin, ardından sonucu kopyalayın veya indirin. Hiçbir şey cihazınızı terk etmez, hesap yoktur ve kütüphane yalnızca bunu istediğinizde yüklenir — bu nedenle bu sayfayı açmak size bir megabayт değil birkaç kilobayt mal olur.